ol, ul, li 태그
ol - ordered list 약자로 순서가 있는 목록을 뜻함
ul - unordered list 약자로 순서가 없는 목록
li - 각 항목들을 나열하는 태그로 list item을 뜻함
주의할 점은 li 요소는 ol혹은 ul요소 안에서만 사용되어야 하며, ol,ul의 직계 자식 요소로는 li요소만 사용되어야 합니다. ul,ol > li
dl, dt, dd 태그
ol, ul, li 태그가 목록을 정의할 때 쓰였듯이
dl, dt, dd 도 목록을 정의할 때 쓰입니다.
차이점이 있다면 사전처럼 어떠한 것을 정의할 때 쓰이는 목록 입니다.
dl - definition list
dt - definition term
dd - definition description
사용 예시
1. 메타데이터를 표시
유형 : 뜨거운 논쟁을 즐기는 변론가(ENTP)
적용
<dl>
<dt>유형</dt>
<dd>뜨거운 논쟁을 즐기는 변론가(ENTP)</dd>
</dl>유형 : 뜨거운 논쟁을 즐기는 변론가(ENTP)
2. 대상을 정의(설명)
예시
뜨거운 논쟁을 즐기는 변론가
ENTP는 본인이 구상하는 바를 실현시키고 싶어하는 기질이 강하며, 여기에 특유의 아웃사이더적인 성격까지 겹쳐 말 그대로 혁명가의 기질을 띠고 있다. 모든 분야에 있어서, 기존의 체제 자체를 뒤집어 버리거나 분야 전체의 도약을 이루어내는 인물들이 많다.
적용
<dl>
<dt>뜨거운 논쟁을 즐기는 변론가</dt>
<dt>ENTP</dt>
<dd>ENTP는 본인이 구상하는 바를 실현시키고 싶어하는 기질이 강하며, 여기에 특유의 아웃사이더적인 성격까지 겹쳐 말 그대로 혁명가의 기질을 띠고 있다. 모든 분야에 있어서, 기존의 체제 자체를 뒤집어 버리거나 분야 전체의 도약을 이루어내는 인물들이 많다.</dd>
</dl>주의사항
dl은 반드시 하나 이상의 dt,dd 짝을 담고 있어야 한다.
dt,dd는 dl 밖에서 독립적으로 사용할 수 없다.
단, dt,dd가 반드시 하나의 짝으로 지어져야 되는 것은 아니다.
그래서 dt는 하나 이상의 dd를 형제 요소로 가질 수 있다. 또한 하나 이상의 dt가 연속으로 나올 수 있다.
div는 dt,dd 쌍을 감쌀 때 쓸 수 있지만, dt-dd의 형제 요소여서는 안된다.
dl은 공백이 아닌 텍스트 노드와 div,dt,dd가 아닌 요소를 포함해서는 안된다.
div 태그
div는 레이아웃을 나눌 때 사용하는 태그
컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경시킬 수 있다.
article, section, geader, nav는 기본적으로 div와 같은 역할을 한다. 차이점으로는 태그에 의미를 부여한 것.
예를 들어 내용이 하나의 독립된 컨텐츠라면 div 대신 article을 사용해야함.
바꿔 말해 article, section, header, nav 모두 div로 대신 사용 할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 최후의 수단으로 사용.
Semantic Tags
시멘틱 테그는 의미가 있는 태그 라는 뜻으로 의미에 맞게 사용해야한다.
시멘틱 태그가 중요한 3가지 이유
-
seo 최적화
검색을 최적화 하여 특정 키워드로 검색했을 때, 내가 만든 검색 엔진 상단에 정렬 가능하게 만든다. -
웹 접근성
웹페이지를 시각적이 아니라, 음성으로 읽어주는 스크린리더를 이용하거나 키보드만을 이용해 사이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 사이트라면 문제 없이 동작 가능. -
유지보보수성
단순히 div 박스로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수 있기 때문에 유지보수 하기 더 편함.
하지만 HTML에서 새로운 태그들이 등장하고 브라우저간 호환성 문제로 크로스 브라우징 이슈가 발생할 수 있기 때문에 유저 타겟에 맞는 태그를 이용하는 유연함이 요구된다.
figure, figcaption
웹페이지를 탐색하다보면 가끔 캡션(자막, 설명)이 있는 이미지를 접할 때가 있는데 이러한 컨텐츠의 경우 이미지와 캡션이 연결되도록 figure 요소 도입 가능.
<figure>
<img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리">
<figcaption>
관심 받고싶어하는 아기
</figcaption>
</figure>figcaption 요소는 이미지에 캡션을 추가하기 위해 도입되었으며 figure, figcaption 요소가 나오기 이전에는 img 요소와 해당하는 캡션을 연결할 방법이 없었음
p 태그
단락을 표시하는 태그. 하나의 완결된 문단을 의미하기 떄문에 p태그 안에 자식으로 p를 또 사용하지 않으며, 줄바꿈의 용도로 사용해서도 안됨.
pre
HTML에서 작성한 애용 그대로 화면에 표현함. 주로 코드 표현
<pre>
<code>
let val= 1;
function myFunc(value){
return value;
}
myFunc(val);
</code>
</pre>blockquote
인용 블록, 주로 문장 안에서 사용됨
예시
<blockquote> <p>제발 그만해.. 이러다가 다~~ 죽어!</p> <cite>오징어게임 오일남</cite> </blockquote> <p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.<p>
main
HTML main 요소는 문서의 주요 컨텐츠를 나타냄.
주요 영역이란 문서의 핵심 주제나 웹앱의 핵심 기능에 직접적으로 연결되어 있는 부분을 뜻함. 메인 요소안에 들어가는 내용은 문서의 유일한 내용이여야 한다.
다른 페이지나 섹션에서 반복적으로 표시 될수 있는 정보, 예를 들어 사이트 로고, 검색 폼, 저작권 정보 등은 들어가지 않습니다.
IE에서는 지원하지 않는 비교적 최근에 등장한 요소임으로 사용에 주의가 필요함.
hr
hr 태그는 원래 가로줄을 표현하기 위해 사용되었으나 HTML5에 오면서 의미가 생긴 요소.
이야기에서의 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용. 단락을 구분할 때 사용하므로 p태그 내 사용은 웹 표준에 어긋남.
