HTML 작성법
웹페이지를 구성하고 있는 요소(element) 하나하나를 ‘태그’라는 표기법을 사용해 작성.
태그를 통해 어떤 요소인지(제목, 본문, 이미지, 비디오 등) 명시하며, 태그의 이름은 HTML5 웹 표준에 맞게 작성한다.
요소(element): 여는 태그, 닫는 태그, 내용을 통틀어 이르는 말
Opening Tag(여는 태그): <요소의 이름>
Closing Tag(닫는 태그): </요소의 이름>
Content(내용): 요소의 내용
→ex) <p>Content</p>
*태그의 경우 대소문자를 구분하지는 않으나, HTML5에서는 모두 소문자로 작성하는 것을 권장한다.
빈 요소(empty elements)
빈 요소(empty elements): 내용이 없는 요소.
ex) 이미지 <img>, 수평선 <hr>, 줄바꿈 <br> 등
이 경우는 닫는 태그를 추가로 명시할 필요가 없다.
Empty element, Self-Closing element<img />, Void element, Single tag 등등이라고도 불림.
<p></p> 처럼 태그 사이에 내용이 없는 건 빈 요소가 아님.
HTML5에서는 <img>, <img /> 둘 중 뭘 써도 됨. 선택적임.
XHTML(HTML5 전)에서는 더 엄격하게 해야해서 빈 요소는 self-closing tag를 쓰도록 했었음.
HTML5에서는 뭘 써도 상관 없으나 일관성 있게 아예 empty로 쓰거나, self-closing tag로 쓰거나 하기. 나는 self-closing tag 써야지~
요소의 중첩(Nesting)
요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.(태그 안에 또 다른 태그도 넣을 수 있다)
서로의 포함관계를 분명히 구분하기 위해 들여쓰기 사용. 열린 순서 반대로 닫혀야 함.
<1>
<2>
<3></3>
</2>
</1><h1>요소 안에 <strong>다른 요소가</strong> 들어갈 수 있다.</h1>
주석(Comments)
브라우저는 주석을 무시하여 사용자에게 주석이 보이지 않도록 함.
주석의 목적은 코드에 메모를 추가하거나, 사용하지 않는 코드를 임시로 처리하기 위함임.
<!— <p> Content </p> —>
HTML 문서의 구조
<!DOCTYPE html> // 문서의 타입이 html이다. 버전 명시하는 역할. 사실상 HTML5기에 생략 가능하나 관습화됨.
<html> // 태그의 실제 시작부분. 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소(최상위 요소)
<head> // 웹 브라우저 화면에 직접적으로 나타나진 않는 웹 페이지의 정보
<!— HEAD 입력 —>
- meta tag: 문서의 일반적인 정보와 문자 인코딩을 명시
- title
</head>
<body> // 웹 브라우저 화면에 나타나는 모든 콘텐츠
<!— BODY 입력 —>
</body>
</html>HEAD 태그
head mdn 구글 서치
: The Document Metadata (Header) element - HTML: HyperText Markup Language | MDN
HTML <head> 요소는 기계가 식별할 수 있는 문서 정보(메타 데이터)를 담음.
정보로는 문서가 사용할 제목<title> 필수！, 스크립트, 스타일 시트(css) 등이 있음.
사용자에게 보여주고 싶으면 <body> 내에서 <header>을 사용할 것.
BODY 태그
body mdn 구글 서치
: The Document Body element - HTML: HyperText Markup Language | MDN
속성(Attribute) 부분 확인. 옆에 trash 아이콘이 있으면 사용하지 않는 것을 권장
head 태그와 마찬가지로 모든 브라우저에서 지원함.
태그를 구분짓는 특성
body 영역에 들어가는 태그들만 아래 기준으로 나눌 수 있다.
-
구획을 나누는 태그
-
레이아웃을 위해 섹션별로 분리하거나 아이템을 담는 용도. 컨테이너 역할
-
단독으로 사용했을 때에는 눈에 보이지 않음.
-
여러가지 요소들을 묶어서 그룹화.
-
-
그 자체로 요소인 태그
- 단독으로 사용했을 시에도 눈으로 확인할 수 있음.
-<button>,<text>등등
블록과 인라인
- 블록(Block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함.(부모가 허용한 가로의 최대를 차지).
가로길이를 지정하지 않았을 때 기본 성질임. CSS 없다고 가정
- 상자를 아래로 쌓는 것
- w-full flex flex-col 느낌？ 위에서 아래로.
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함.(부모가 허용한 가로의 최대를 차지).
- 인라인(Inline)
- 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
- 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용만큼만 차지한다.
*포함 규칙
- 같은 형태의 다른 요소를 안에 포함할 수 있음.
ex) 블록 > 블록, 인라인 > 인라인 - 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있음
- 인라인 요소는 블록 요소를 포함할 수 없음.
콘텐츠 카테고리
HTML5 부터 비슷한 특징을 가진 요소끼리 묶어 7가지 카테고리로 세분화
하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있음.
| 콘텐츠 이름 | 설명 |
|---|---|
| 메타데이터 콘텐츠(Metadata Content) | 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 정보 |
| 플로우 콘텐츠(Flow Content) | 웹 페이지상에 일부 메타 데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠(이미지 등)를 포함 |
| 섹션 콘텐츠(Section Content) | 웹 문서의 구획(section)을 나눌 때 사용 |
| 헤딩 콘텐츠(Heading Content) | 섹션의 제목(heading)과 관련된 요소 |
| 프레이징 콘텐츠(Phrasing Content) | 문단에서 텍스트를 마크업할 때 사용 |
| 임베디드 콘텐츠(Embeded Content) | 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소 |
| 인터렉티브 콘텐츠(Interactive Content) | 사용자와의 상호작용을 위한 컨텐츠 요소 |
⬆️
위 링크의 다이어그램을 통해 어느 부분이 겹치고, 교집합이 있는지 알 수 있음.
Flow Content- Metadata 일부를 제외하고 다 포함하고 있음.
