[HTML] 요소들의 구분
FE 공부 처음 시작합니다! 공부 일지도 처음 작성해보는데 시간이 생각보다 걸리네요. 그래도 배운 내용 덜 까먹겠죠? 개발 하시는 분들이 TIL이란걸 작성하신다고 하셔서, 눈치껏 따라해보려고 합니다. 이렇게 하는게 맞나요? 🤔
contents model
html요소들이 가지고 있는 규칙들을 그룹화한 것
1. metadata
html요소들이 가지고 있는 규칙들을 그룹화한 것
콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다. 대부분 head 내에 들어간다는 것이 특징입니다.
2. Flow
Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.
3. Sectioning
Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다. 문서의 구조, 아웃라인에 영향을 주게 됩니다.
4. Heading
Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.
5. Phrasing
Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.
6. Embedded
Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.
7. Interactive
Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.
semantic markup
시멘틱 = 의미론적인
시멘틱 마크업 = 브라우저가 잘 이해할 수 있도록
컴퓨터가 잘 이해할 수 있는 코드란?
- 의미에 맞는 요소 사용
- 문서의 구조화
- 인간과 기계 다 잘 이해하는 것이 목표
시멘틱 = 의미론적인
시멘틱 마크업 = 브라우저가 잘 이해할 수 있도록
🔎검색엔진 최적화에 큰 도움을 준다🔎
각 줄에 동일한 서식이 적용되어있는 것과 같이 보이지만 사실은 그렇지 않습니다. 가령, 쇼핑몰에서 할인된 가격을 표기할 때 취소선을 사용합니다. 이 때 's'태그를 사용한다면 컴퓨터는 동일 상품에 대해 2개의 가격이 존재한다고 인식할 것입니다. 하지만 'del'태그를 사용한다면 이 가격이 취소되었다는 의미까지 알 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>semantic</title>
</head>
<body>
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>
</body>
</html>
기타 자주 쓰이는 semantics 정리
-
main | 본문 컨텐츠 전체를 감싸고, 1번만 쓰임
-
article | 자유로운 본문
-
section | 자유로운 본문
-
aside | 본문이 아닌 부가 정보를 표기. article 내에 사용해서 주석/각주 표기 가능
-
figure | 독립적 컨텐츠
-
figcaption | figure 내부에서 부가설명
-
footer | 푸터 정보 header와 중첩 불가
-
header | 헤더 정보 footer와 중첩 불가
-
nav | 웹 사이트 전체 흐름을 제어하는 네비게이트
-
mark | 사용자가 관심을 가져야 할 텍스트를 강조, 다른 mark와 차별성을 두기 위해 사용자 지정 클래스 적용 후 글의 검색 결과를 강조할 용도로 사용
-
time | 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용
block&inline
요소들을 위처럼 contents model로 분류할 수 있지만, block level과 inline level로 분류할 수도 있습니다. 시각적으로 명확한 차이가 있습니다.
block level
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다. 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다. 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다.
- div : Division의 약자로, 레이아웃을 나누는데 주로 쓰입니다. 줄바꿈 O
- h1~h6
- p
- ul
- li
- table
inline level
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다. 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다. 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다. 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다.
- span: 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰입니다. 줄바꿈 X
- i
- img
- em
- strong
- a
예외
'a' 는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있습니다.
Author And Source
이 문제에 관하여([HTML] 요소들의 구분), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@designhuh/요소들의구분저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)