와인을 좀 더 맛있게 마시는 방법
- 와인에 알맞은 잔을 선택한다.
- 와인을 적당한 온도로 마신다.
- 필요하면 디캔더Decanter:와인 병 속에 담긴 와인을 옮겨 붓는 투명한 유리병에 따라 마신다.
Semantic이란 한마디로 "의미"를 뜻한다.
즉, 시맨틱 태그라는 건 의미를 갖고 있는 태그이다.
시맨틱 태그가 없던 시절엔 div
와 같은 의미없는 박스 태그에 id나 class를 사용하여 컨텐츠를 구분지었다.
현재는 시맨틱 태그의 출현으로 별도의 이름을 짓지 않아도 태그만으로 "컨텐츠의 성격"을 구분할 수 있게 되었다.
이러한 특성 덕분에 사용자가 검색을 하거나 개발자가 사이트를 제작할 시에 많은 이점이 있다고 한다.
자세한 내용은 링크 참고. 시맨틱(Semantic) 태그란?
컨텐츠 성격에 맞는 태그 선정과 태그 성격에 따른 컨텐츠 구조 설계가 필수이다.
극단적인 예를 들자면, header
태그 안에 갑자기 footer
의 내용이 들어간다면 제작자와 사용자 모두 혼란스러울 것이다.
이처럼 태그 역할과 맞지 않는 컨텐츠는 웹표준에도 어긋나기 때문에 지양해야 한다.
태그명 | 정의 · 설명 |
---|---|
header |
- 페이지 머리말 영역. - 로고 등이 들어간다. - nav 를 포함할 수 있다.
|
nav | - 메뉴(링크) 영역. |
section | - 본문 영역. |
article |
- 독립적인 컨텐츠 영역. - article vs section의 차이점 |
aside | - 본문 내용과 관련 없는 영역. (ex. 광고 등) |
footer |
- 페이지 꼬리말 영역. - 본문과 관련성은 있지만 본문에는 담기 힘든 내용이 들어간다. - 대표적으로 사이트 주소를 담는 address 가 있다.
|
figure |
- 그림, 사진 , 영상 등 컨텐츠 영역. - 이미지 캡션 달기 |
figcaption |
- 컨텐츠 설명 영역. - 이미지 캡션 달기 |
details |
- 요약글 영역. - summary 라는 제목 요소를 자식으로 받는다.- 제목을 클릭하기 전까진 내용이 보이지 않는다. |
summary |
- details 안 제목 요소.
|
time |
- 일반 텍스트로 보이는 시간, 날짜 정보를 컴퓨터가 읽을 수 있게끔 만들어준다. - datetime 속성을 필수로 넣어야한다. 자세한 건 아래 링크 참고.- time 태그 사용법 알아보기 |
progress |
- 작업의 진행율을 나타낼 때 사용한다. - max (최댓값), value (값) 속성이 있다.- 다운로드 - 속성을 넣지 않으면 바가 제멋대로 움직이는 오류가 발생한다. - 브라우저마다 바의 모양이 제각각이다. |
meter |
- 특정 자료의 범위나, 수치를 표현할 때 사용한다. - max (최대범위), min (최소범위), value (값) 속성이 있다.- 디스크 사용량 - 브라우저마다 바의 모양이 제각각이다. |
ruby · rt |
- 일본어나 한자 등과 같은 외국어의 발음을 표시할 때 사용한다. - ruby 안에 단어를 쓰고 rt 를 자식요소로 배치하여 발음을 표기한다.- 允情 - 이처럼 발음은 윗첨자로 표시된다. |