머릿말

웹 백엔드 개발자라도 프론트엔드의 기본적인 개념인 HTML, CSS, Javascript에 대한 기본적인 이해는 필요하다.

이번 글에선 각 기술에 대해 간단한 정의와 해당 기술이 왜 필요한지에 대해 다루어 보려고 한다.

HTML, CSS, Javascript

이전 글에서 브라우저의 렌더링 과정을 간단하게 살펴보면서 알아본 핵심은 브라우저는 HTML을 화면에 표시하는 것이 목적이라는 것이다.

웹 기술이 발전함에 따라 HTML과 스타일을 따로 분리하는 것이 필요해졌고,
단순히 멈춰있는 화면이 아니라 사용자와 상호작용하는 것이 필요해지므로 자바스크립트가 발전하게 되었다.

HTML, CSS, Javascript는 각각 사람의 장기로 보면 아래와 같이 비유할 수 있을 것 같다.

Front-End 기술 사람의 장기(?)
HTML 골격
CSS 겉 옷
Javascript 각종 신경 작용
(날아오는 물체가 있으면 눈을 감고 몸을 웅크린다)

HTML

  • HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위한 표준 마크업 언어이다.
  • 웹 페이지의 구조를 담당한다.
  • Element 단위로 구성되며, 브라우저에게 콘텐츠를 어떻게 표시하는지 알려준다

HTML 기본 구조

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

CSS

  • CSS는 Cascading Style Sheet의 약자로 직역하면 계단식 스타일 시트이다.
  • HTML의 스타일을 지정하는 데 사용되는 언어
  • HTML이 웹 페이지의 구조를 나타낸다면, CSS는 겉 옷을 담당한다 : HTML이 DOM으로 변환 된 후 어떻게 표시되어야 하는 지 설명한다.
  • Box Model : 한 HTML Element 당 하나의 박스로 모델링하여 스타일을 관리하는 기법

CSS 기본 구조

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}

Javascript

  • 웹 페이지에서 이벤트 처리를 기술할 수 있는 언어
  • DOM을 조작하거나 특정 이벤트에 어떤 Element를 수정하거나, 추가적인 인터페이스를 작성할 수 있다.

Javascript는 개발자들 사이에서 가장 인기있는 언어 중 하나이므로, 별도의 포스트로 런타임 환경과 컨셉에 대해 자세히 다뤄볼 예정이다.

생각해보자

  • 브라우저의 구동 방식과 연결지어서 HTML, CSS, Javascript를 다시 살펴보니, 간단한 내용이라도 다시 보이게 된다.
    (왜 CSS라는 새로운 언어가 필요해진건지 : DOM 트리를 구성한 후 스타일을 각 DOM 노드에 매핑하는 과정 등등..)

좋은 HOW 추천

참고자료