TWD 2. HTML:시맨틱(Semantics)

2022-12-22

HTML(HyperText Markup Language): 시맨틱(Semantics)

본 내용은 'The Web Developer 부트캠프 2023', 'Mozilla Developer Network'를 참고하여 작성했습니다.

(시멘틱 마크업 종류는 엄청 다양하지만, 주로 사용되는 몇 가지 태그에 대해서만 다뤘습니다.)

1. 블록 vs 인라인 요소 - div(Division)와 span

블록 요소 div

<div> 요소는 “순수” 컨테이너로서 블록 수준 요소이며 아무것도 표현하지 않는다.
대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있다.
<div> 요소는 의미를 가진 다른 요소(<article>, <nav> 등)가 적절하지 않을 때만 사용해야 한다.
아무런 태그 언급 없이 바로’#’을 사용하면 자동으로 div태그가 사용된다.

인라인 요소 span

<span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다.
스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다.
적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 한다.
<span>은 <div>와 매우 유사하지만, <div>는 블록 레벨 요소인 반면 <span>은 인라인 요소다.

2. 기타 요소 hr,br,sup,sub

가로 선 hr

<hr> 요소는 스크린을 수평으로 가로지르는 선을 하나 만들어 나누어 문단 사이 공백이나 문단 레벨 요소들 사이의 공백을 의미한다.
색과 모양 등 다양한 커스텀이 가능하다.

줄바꿈 요소 br

<br> 요소는 텍스트 안에 줄바꿈을 생선한다.
주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용하다.

sup 위 첨자 요소, sub 아래 첨자 요소

<sup> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트다.
<sub> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.

sup,sub

3. 엔티티 코드(Entity Code)

HTML대신 쓸 수 있는 특별한 코드 또는 시퀀스
타이핑 하기 어려운 특별한 문자를 입력하기 위해 사용한다.
모든 엔티티 코드는 &로 시작해서 ;로 끝난다.
문자식 표현과 숫자식 표현이 있다.
예를 들어 1 < 6 에서 ‘<’ 문자는 화면상에는 이상없지만 VSCode상에서 일종의 열린 태그로 생각해서 Format On Save(코드정리)기능을 사용하면 혼란이 온다.

엔티티

사용 빈도가 높은 엔티티 코드

엔티티 코드	문자식 표현	숫자식 표현
<	`<`	`‹`
>	`>`	`›`
&	`&`	`&`
©	`©`	`©`
”	`"`	`"`
(공백)	` `	` `

4. 시맨틱 마크업(Semantic Markup)

시맨틱(Semantic)이란 “의미론적인”의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 시맨틱 마크업이란 마크업에 의미를 잘 전달하도록 작성하는 것을 말한다.
예시로는 아래의 종류 등이 있다.
- HTML 문서의 소개 및 탐색에 도움을 주는 콘텐츠 <header>
- HTML 문서의 꼬릿말로 <footer> 사용
- 문서 <body> 의 주요 콘텐츠의 <main> 사용
- 시간의 특정 지점 또는 구간 <time> 사용
  - 속성으로 datetime을 명시해야 한다.
- 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 <figure> 사용
- HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합인 <section> 사용
- HTML 문서에서 독립적인 하나의 기사 <article> 사용
- HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합 내비게이션에 <nav> 사용
- 문서의 주요 내용과 간접적으로만 연관된 부분 <aside> 사용

시맨틱마크업 (header, main, footer 등의 시맨틱 마크업이 있다.)

장점으로는 크게 3가지가 있다.
- 1) 크롤러가 더 쉽게 코드를 알아볼 수 있도록 한다.
  - 크롤러 즉 검색엔진이 시맨틱 태그를 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
- 2) 접근성이 좋다.
  - 스크린 리더를 쓰는 사람들이 더 쉽게 원하는 코드에 접근할 수 있다.
- 3) 스스로 만든 코드나 마크업을 본인과 다른 개발자들이 더 쉽게 읽을 수 있다.

5. Emmet

Html,css, 마크업 등을 작성할 때 시간을 줄여주는 확장 기능

대표적인 몇 가지 사용예시

1) ‘>’ 자식 요소 만들기

    <!-- main>secion>h1 -->

    <main>
        <section>
            <h1></h1>
        <section>
    </main>

2) ‘+’ 형제 요소 만들기

    <!-- h1+h2+h3 -->

    <h1></h1>
    <h2></h2>
    <h3></h3>

3) ‘*’ 반복 요소 만들기

    <!-- ul>li*5 -->

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

4) 클래스 이름 넣기

클래스 속성은 ‘.’을 이용해서 쉽게 부여할 수 있다.

    <!-- ul>li.item*5 -->

    <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

Twitter Facebook LinkedIn

ChangMinYang