웹 개발의 3대장 HTML, CSS, JS
HTML을 통해 웹의 구조를 짜고, CSS를 통해 시각적 요소를 추가하며 JS를 통해 상호작용 하는 웹페이지를 구성할 수 있다. 웹의 초기엔 문서로서의 역할만 강조하였기 때문에 HTML내에서 모든걸 해결하려 하였지만, 기술이 발전하며 각자의 특성을 살려 목적에 맞게 분화하게 되었다.
HTML : Hyper Text Markup Language
HTML은 구조를 짜는 언어이다. 프로그래밍 언어라 부르지는 않는데 HTML은 뼈대를 세워줄 뿐 기능을 구현할 수는 없기 때문이다.(Markup!) 하지만 HTML은 중요하다. 집을 지을때 설계가 중요하듯이, 웹을 구성하는데 구조를 제대로 짜지 않는다면 CSS로 아름답게 디자인 하는 것도, JS로 혁신적인 기능을 구현 하는 것도 어려울 것이다.
<div>
<a href="https://velog.io/@rladntjd320">김우성의 velog</a>
//태그와 태그안에 담긴 속성과 속성의 값 그리고 엘리먼트
</div>태그()
태그는 <>안에 담겨있는 HTML의 기본 구성 요소를 의미한다. HTML은 이러한 태그들의 집합이다. 태그는 여는 태그(opening tag)와 쌍으로 닫는 태그(closing tag)를 지니고 있으며, 일부 태그는 스스로 닫을 수 있다.(self-closing tag)
- 태그는 속성을 지닐수도 있다.
- 속성은 값(value)를 지닌다.
<a href="https://velog.io/@rladntjd320"></a>속성과 속성의 값- 여는 태그와 닫는 태그 사이에 해당 태그의 내용을 넣을수 있으며
<>내용</>여는태그-내용-닫는태그를 한번에 엘리먼트라 한다.
의미가 있는 태그(Sementic Tag)
HTML이 구조를 표현하는데 목적이 있다면, 해당 구조가 같는 목적성이 명확히 표현되는게 바람직 할것이다. 그렇기 때문에 최근의 HTML 태그는 태그의 이름 자체에 해당 태그가 하는 역할을 담고 있도록 변경 되고 있다. Sementic은 HTML에만 국한되지 않는 개념으로써 코드의 해석이나 유지보수에 용이 하도록 코드 자체를 Sementic하게 작성하는것이 지향되고 있다
🌳트리구조
선언태그를 제외 한다면 HTML의 모든 태그는 부모 태그가 존재한다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8"> //self-closing Tag
<title>hello world!</title>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>위의 예제를 트리구조로 본다면
- html
- head
- meta
- title
- body
- div
- ul
- li
- li
- ul
- div
- head
html태그를 부모로 두고 자식들이 계속해서 갈라져 나오는 모습을 하고 있는 것을 볼 수 있다.
CSS : Cascading Style Sheet
CSS가 등장하며 HTML은 구조를 표현하는 본연의 목적에 충실할 수 있게 되었고 시각적 표현은 CSS가 담당하게 되었다. CSS는 선택자를 통해 HTML의 구조에 접근한다.
JS에는 변수와 함수, HTML에는 태그가 있다면 CSS는 선택자 (Selector)가 있다!
👉선택자
HTML에서 태그를 통해 웹페이지의 구조를 잡으면 각 태그를 가리키는 선택자를 사용하여 CSS에서 꾸며줄 수 있다.
- 기본적인 선택자는 태그 이름을 사용한다. div {}, p {}...
- 태그 전부를 선택하는 선택자는 * {}
- HTML에서 div 태그가 여러개 사용될수 있다. 이와 같은 경우 div 태그 중 특정 태그만 선택할수도 있다. 이는 id를 부여하거나 class를 부여해 주는 것으로 가능하다.
- id = 하나의 태그에 대해서만 부여 가능, class = 같은 class를 여러 태그에 부여 가능
- id를 선택할때는 #idname {}과 같은 형식, class를 선택할때는 .classname {}
앞서 우리는 HTML이 트리구조로 이루어져 있는 것을 보았다. 따라서 HTML 태그를 선택해서 동작하는 CSS또한 HTML의 트리구조에 영향을 받는다. 다시 말해 태그간의 부모-자식, 후손 관계를 고려할 필요가 있다.
- 자식 셀렉터 vs 후손 셀렉터
- 자식 셀렉터는 부모 태그의 직계 자식만 선택한다. header > p {}
- 후손 셀렉터는 직계 자식의 자식 및 후손들도 선택 가능하다. header h1 {}
- 형제 셀렉터는 같은 위계의 태그들을 고려한다. section ~ p {}
- 인접 형제 셀렉터는 인접한 형제 태그를 선택한다. section + p {}
📦박스모델
HTML은 태그의 집합이라 말하였다. 그렇다면 CSS를 통해 시각적 표현을 할때 각 태그는 어떤 단위로 표현될까?
CSS를 통한 웹페이지의 시각적 표현은 박스의 집합이다.
각 태그는 각각 박스 영역을 가지고 있다. 이 박스는 4겹으로 구성되어 있다. 가장 안쪽 내용이 담기는 Content 내용을 감싸는 Padding, Padding을 감싸는 Border와 Border를 감싸는 Margin이 각 박스의 이름이다.
보더는 박스의 시각적 경계선을 의미한다. 물론 테두리의 두께를 0으로 지정해 테두리를 보이지 않게 할수 있지만, 개발 과정에서는 각 영역이 해당하는 크기를 알수 있게 해주는 중요한 기능을 갖고 있다.
보더를 기준으로 안쪽 컨텐트 와의 간격을 패딩이라 한다. 겨울에 입는 패딩을 생각해보면 이해가 쉽다.
보더를 기준으로 다른 박스와의 간격을 마진 이라 한다.
