[HTML] 요소들의 구분

designhuh·2021년 7월 5일
TILboostcoursehtml
0

눈치껏 써보는 TIL

목록 보기
1/2
post-thumbnail

FE 공부 처음 시작합니다! 공부 일지도 처음 작성해보는데 시간이 생각보다 걸리네요. 그래도 배운 내용 덜 까먹겠죠? 개발 하시는 분들이 TIL이란걸 작성하신다고 하셔서, 눈치껏 따라해보려고 합니다. 이렇게 하는게 맞나요? 🤔

contents model

html요소들이 가지고 있는 규칙들을 그룹화한 것

1. metadata

콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다. 대부분 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

시멘틱 = 의미론적인
시멘틱 마크업 = 브라우저가 잘 이해할 수 있도록

컴퓨터가 잘 이해할 수 있는 코드란?

  1. 의미에 맞는 요소 사용
  2. 문서의 구조화
  3. 인간과 기계 다 잘 이해하는 것이 목표

🔎검색엔진 최적화에 큰 도움을 준다🔎

각 줄에 동일한 서식이 적용되어있는 것과 같이 보이지만 사실은 그렇지 않습니다. 가령, 쇼핑몰에서 할인된 가격을 표기할 때 취소선을 사용합니다. 이 때 '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 | 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용

Semantics in HTML

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' 는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있습니다.

profile
designhuh
배우고 때때로 익히면 또한 기쁘지 아니한가
다음 포스트

CSS 이해하기

0개의 댓글

관련 채용 정보