220603 Web TIL) 시맨틱태그,EntityCode

1. 시맨틱 태그를 사용하는 이유 

- html 코드를 작성할 때 웹 브라우저가 HTML의 소스코드만 보고도 어느 부분이 제목이고 어느 부분이 메뉴이고 본문인지를 쉽게 알 수 있게 하도록 하는 지표. 

- 검색 엔진이 검색을 수행할 때에는 HTML 태그 내에 있는 태그를 분석하는데 태그들의 의미가 분명하다면 검색 엔진 입장에서 구분하기가 쉬워진다.

- 코드 가독성 및 유지보수가 쉬워진다. 모든 태그가 <div>로 되어있으면 어느 영역(헤더,바디,푸터 등)인지 알기 힘든데 시맨틱 태그를 이용하면 해당 영역에 접근하기 쉬워진다. 

>> 결국은 코드를 쉽고 편하게 읽기 위해서 시맨틱 태그를 사용한다고 하자. 

 

2. 시맨틱 태그의 종류 

<header>,<nav>:웹페이지 메뉴 만들때 사용, <main>:메인 콘텐츠를 나타내는데 사용(nav,aside,section,article 등), <article>:개별 콘텐츠 나타냄,<aside>:좌우측 사이드 부분,<footer> 등 

 

3. block과 inline의 차이 

block : 새로운 줄로 시작하며 해당 줄의 가로를 다 차지한다 -> display:block 도 있음 

inline : 태그 안의 글자 길이만큼의 영역만 화면에 표시한다. 

 

4. <div>,<span>.<p>의 차이 

<div>는 영역을 구분하는 요소로 사용되며 <span>은 옆으로 붙는다. <p>는 문자 단락을 구성한다. 

 

5. <sub>는 H₂와 같이 기준값보다 아래에 있는 숫자를 표시한다. 

수소를 표현하려면 H₂로 표현해야 한다. 

 

6. Entity Code : HTML에서 특수문자를 사용하기 위해 사용하는 코드 

Entity Code를 왜 사용하냐면 컴퓨터가 문서를 읽어들일 때 예약문자와 문서내용을 구분하지 못해 생기는 문제를 해결하기 위해서이다.

https://entitycode.com/#about-content

Entity Code - A Clear and Quick Reference to HTML Entities Codes

 

&nbsp;도 Entity Code이며 다양한 종류가 있다. 

 

7. <nav>로 메뉴 만들때 

기본 형식 

<nav> 

    <ol> or <ul> 

        <li> ~ </li> 

        <li>~</li>  

    </ol> or </ul> 

</nav> 이런 식으로 작성. 이거는 기본 형식이니까 나머지는 더 추가하던가..해서 ! 

 

8. <div>,<article>,<section>의 차이? 

셋 다 큰 차이는 없다. 똑같은 결과물을 도출해내기 때문에 얘네들의 차이가 뭐지..하고 궁금해서 찾아보았다. 

 

article : 문서의 '독립적'인 부분. 따로 떼어놔도 의미가 사라지지 않고 그대로 존재해야 함 

그래서 웹 상의 실제 내용을 넣는다. 블로그 포스트, 웹 사이트 내용, 뉴스 기사 등.. 

section : 콘텐츠의 덩어리 

div : 영역 구분하기. 콘텐츠의 CSS를 적용하고 싶을 때 사용 

<div>만 주구장창 쓰면 이 <div>는 어떤 의미로 쓰인건지 알기가 힘들다. 하나하나 찾으면서 봐야하는데 이렇다보니 유지보수도 힘들고 하는 문제점 때문에 시맨틱 태그가 생겨났으며, 이 시맨틱 태그들을 통해 코드만 봐도 '아 이 부분이구나!'할 수 있게 된 것이다. 

 

그래서 각 영역에 맞게 <header>,<main>,<footer>로 큰 뼈대를 먼저 세워주고 

공지사항이나 FAQ 같은 부분은 <article>을 써주고, 그 외 논리적인 구분을 <section>으로 한다.

굳이 구분이 필요없고 블럭 요소가 필요하면 <div>를 써줄 것 

 

9.  ~ <time datetime="2022-06-03">June 3</time>~ 이라는 코드가 있다고 해보자.

기계 판독 가능한 포맷에서는 datetime 시맨틱 요소를 사용해야 한다. datetime도 시맨틱 요소이다. 

 

10. <figure>~</figure> : 캡션대상 지정 

<figcaption> : 캡션 설명 붙이기 

<div> 써도 되지만 일러스트나 다이어그램처럼 사람들의 시선을 끌기 위해 캡션 사용 

(+ 비디오 캡션 같은 경우는 청각 장애가 있는 시청자가 비디오 콘텐츠에 더 쉽게 접근할 수 있도록 하는 것 외에도 실제로 비디오 효과 향상시키기 가능 등..의 이유로 비디오에 캡션을 단다)

 

 

 

 

한 줄 정리 

시맨틱태그는 신문기사를 작성하는 것과 같다.