HTML, CSS, JavaScript - Basic Frontend Knowledge

Basic Frontend Knowledge ( 기본 프런트 엔드 지식 ) 

 

BackEnd Roadmap 에 Frontend 가 왜 필요할까요? 

 

 

일단 BackEnd 개발자라도 업무를 진행 시에 프런트 엔드 개발자와 함께 작업할 일이 많아지게 됩니다. 그래서 Front End 개발자가 설계해놓은 틀에 저희는 서버에 데이터를 보내주고 뿌려주는 역할을 합니다. 

그러다 보니까 기본적인 FrontEnd 지식이 있어야 소통과 협업이 더 원활해진다고 생각합니다. 

 

일단 기본적인 웹을 구성할때 쓰는 세 가지 요소가 있네요. HTML , CSS , JavaScript 

HTML은 웹브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 JavaScript와 본문과

그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있습니다. 

 

 

1.HTML (HyperText Markup Language)

HyperText는 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이고

Markup Language는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지입니다.

이러한 약자와 뜻을 가지고 있는 html은 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어라고 생각하시면 됩니다.

HTML은 웹 페이지의 구조를 설명하고. 일련의 요소로 구성됩니다.

 

 

여기서 말하는 요소들은 무엇이 있을까요?

HTML

 

html은 전체 html 문서를 정의합니다. 시작 안에 여러 가지 요소들이 들어가면서 웹페이지를 구성하게 됩니다. body는 문서의 본문을 정의한다고 생각하시면 됩니다. 그리고 h1은 제목이고 p는 문단입니다. 이런식으로 여러 가지 요소들이 구조에 맞게 작성돼있는 문서를 HTML 문서라고 합니다.

 

 

2.CSS (Cascading Style Sheets)

CSS는 무엇일까요?  CSS는 앞전에 설명한대로 HTML 문서의 배치와 외관을 정의하는 스타일시트 언어로 HTML로 뼈대를 만들면 여기에 디자인을 입힌다는 것을 의미합니다. HTML 문서는 변경되지 않지만 CSS가 변경된다면 웹 사이트는 무궁무진하게 변경될 수 있습니다.

웹페이지의 글꼴부터 시작해서 컬러 배경, 및 테두리 등 다양하게 변경할 수 있습니다.

 

사용법은 간단합니다. 

 

먼저 스타일을 지정할 HTML 요소(body) 를 정한 후에 변경하고자 하는 것들을 입력하고 세미콜론으로 구분해 하나 이상을 선언할 수 있습니다. 보시면 폰트사이즈부터 시작해서 폰트 종류, 배경 색깔, 글 정렬 등이 있네요. 

 

 

 

3.JavaScript (Cascading Style Sheets)

프론트엔드에서 제일 제가 중요하다고 생각하는 것이 나왔네요. 

JavaScript는 세계에서 가장 널리 사용되는 프로그래밍 언어로 객체 기반의 스크립트 언어입니다. Html에서 처리하고자 하는 행동이나 작업을 할 수 있는 언어입니다. 

버튼을 이용해서 css나 Html요소와 속성도 변경할수있고 시간이 지난 후에 알람도 띄워줄 수 있습니다. 이밖에도 다양한 행동과 작업이 가능합니다.

 

 

자바스크립트는 HTML문서에 <script>라는 태그를 사용하여 작동 가능합니다. 물론 외부의 파일로도 스크립트를 사용할 수 있습니다. 

jQuery 같은 라이브러리도 사용 가능하고 남들이 만들어놓은 스크립트를 가져와서도 사용 가능합니다. 

 

그리고 요즘 많이 사용하는 Vue, React, Angular같은 프레임워크로 더욱더 단순화하고 정리화 돼있는 자바스크립트를 쓸 수 있습니다.