html 파일에서 ! 입력 후 엔터키를 누르면 자동으로 생성되는 각 태그의 역할에 대해 알아보자.
- DOCTYPE(=DTD) : 문서의 HTML 버전을 지정해주는 코드이다. <!DOCTYPE html> 은 가장 최신인 HTML5을 의미한다.
- html 태그 : 문서의 범위를 브라우저에게 알려주는 역할
- head 태그 : 문서의 정보를 나타내는 범위로, 웹페이지의 보이지 않는 정보를 작성하는 범위
- body 태그 : 문서의 구조를 나타내는 범위로, 웹페이지의 보여지는 구조를 작성하는 범위
- TITLE 태그 : HTML 문서의 제목을 탭에 표시한다.
- meta : HTML 문서의 제작자, 내용, 키워드 같은 나머지 여러 정보를 검색엔진이나 브라우저에게 제공한다. charset은 문자 인코딩 방식을, name은 정보의 종류, content는 정보의 값을 나타낸다.
HTML의 기본 문법에 대해 알아보겠다.
이제껏 작성해온 것 처럼 HTML은 <태그>내용</태그> 와 같은 구조로 작성했다. 이렇게 태그와 내용을 포함해서 요소(Element)라고 부른다. 종료 태그가 시작 태그와 다른 점은 / 가 붙는다는 점이다.
<태그><태그>내용</태그></태그> 와 같이 태그 안에 태그가 있는 형태는 부모와 자식 관계라고 볼 수 있다. 이렇게 한 줄로 쭉 이어 적으면 부모와 자식의 범위를 알아보기 힘드므로 자식요소들을 줄바꿈과 들여쓰기를 이용해 알아보기 쉽게 작성하도록 하자. 참고로 상위(조상) 요소는 부모 요소를 포함한, 나를 감싸고 있는 모든 요소를 지칭하는 용어이며 하위(후손) 요소는 자식 요소를 포함한, 내가 감싸고 있는 모든 요소들을 지칭하는 용어이다.
그동안 써왔던 index.html 파일을 보면 meta, img 등의 태그는 닫힌 태그가 없는 것을 볼 수 있다. 이러한 태그들을 빈 태그(empty tag)라고 부른다. 다음과 같이 열린 태그에 속성과 값을 적용할 수 있다. <태그 속성="값">
빈 태그들은 내용을 채울 수 없는 비어있는 태그이기 때문에 대부분의 경우에 속성과 값을 이용해서 태그의 기능을 온전하게 사용한다.
HTML에서 요소가 화면에 출력되는 특성은 크게 2가지로 구분되며 글자와 상자 개념이 있다. 인라인 요소는 글자에 해당하며 글자를 만들기 위한 요소들, 블록 요소는 상자에 해당하며 상자(레이아웃)을 만들기 위한 요소들에 해당한다.
대표적인 인라인 요소로는 <span> 이 있다. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다. span 태그에서 줄바꿈은 띄어쓰기 하나로 나타나며, 포함한 콘텐츠 크기만큼 가로 세로 크기가 자동으로 줄어든다. 내 외부 모두 여백을 줄 때 위아래 여백은 적용되지 않고 좌우로만 적용된다. 또한 인라인 요소의 자식으로 블록 요소 태그를 사용할 수 없다.(ex. span 태그 안에 div태그 안됨!)
다음으로 대표적인 블록 요소로 <div> 가 있다. 마찬가지로 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다. 가로는 부모 요소의 크기만큼 자동으로 늘어나며 세로는 콘텐츠 크기만큼 자동으로 줄어드는 특징이 있다. 그리고 인라인 요소와는 다르게 내 외부 모두 상하좌우 여백을 모두 적용할 수 있다. 블록 요소의 자식으로는 블록, 인라인 요소를 모두 사용할 수 있다.
'2. Front-end > 2-1. HTML' 카테고리의 다른 글
| HTML - [ BEM ] (0) | 2022.04.29 |
|---|---|
| HTML - [ 오픈 그래프 / Favicon] (0) | 2022.04.21 |
| HTML - [ 핵심 요소(태그) / 전역 속성 ] (0) | 2022.04.21 |
| VS Code 사용 (0) | 2022.04.19 |