HTML의 시작
(지금까지 웹표준, 시멘틱 무시하고 코딩한 나 반성해...)
article
독립적으로 구분하거나 재사용할 수 있는 구획
어던 페이지에 붙여도 독립적으로 사용 가능하다면 article 고려해보기
ex) 다크모드, 스크롤업 등등
section
사이트 내 연관 컨텐츠. 그룹화에 초점
다른 서비스에 가져다놓으면 이상함.
article과 section 태그는 h2~h6 요소와 함께 들어가야 함
여러 페이지에서 nav, header 등의 태그가 아니라 html 사용하는 이유는,
해당 태그들을 지원하지 않는 익스플로러 버전도 있기 때문이다. 그리고 아직 그 익스플로러를 쓰는 사람도 많다.
heading
중요도에 따라 사용됨
h1는 페이지 최상단에 한번만 사용할 것을 권장함
heading 구조는 사용자로 하여금 페이지의 계층 구조를 쉽게 파악할 수 있도록 한다.
그렇기 때문에 특별한 이유 없이 갑자기 h1에서 h3 으로 뛰어넘는것은 적절하지 않다.
html 구조상 순차적으로 h2,h3 차근차근 배치해야 한다.
nav
현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획
보통 메뉴에 사용된다.
aside
문서의 주요 흐름을 따라가지 않는, 간접적으로 관련있는 구획을 만들때 사용
보통 각주(참조) 또는 광고영역으로 활용함.
이 밖에도 양쪽 사이드에 위치해야 하는 요소 그룹지을때 사용
footer
페이지 제일 하단. footer 요소가 속한 가장 가까운 구획의 작성자 정보, 저작권, 링크 등
address
가장 가까운 부모 article 이나 body의 연락처 정보
만약 부모가 body라면 문서 전체의 연락처 정보 의미함(메일,주소,우편주소 등)
main
Main 태그는 안에 들어있는 대표적인 내용들을 감싸는 태그라고 생각하면 편함
grouping contents
ol ul li
ol -> 순서가 있는 목록
ul -> 순서 없는 목록
li -> 목록의 아이템
li 요소는 독립적으로 사용 불가능. ul 안에서 사용해야함
그리고 ol과 ul 의 자식은 li 만 사용 가능!
(리스트 제목 적고싶다면 밖에 작성하기. article 및 ul 태그 넣고싶다면 li의 자식으로 배치해줘야)
목록은 3가지 이상의 비슷한 요소들이 있어야 만드는 것을 권장함
페이지네이션 이란?
이것도 ol, li
dl dt dd
목록을 정의할때. 사전처럼 어떤 것을 정의할때 쓰임
dl 목록
dt 용어
dd 설명
*간격을 띄우고 싶을땐, dl 내부에서 div로 dt dd 감싸고 css로 스타일 주기
div
레이아웃 나눌때 사용하는 태그. 브라우저가 div 보았을때 아무것도 느낄 수 없다.무언가를 감싸기 위해서만 존재함
section header 등 모두 div 대신 사용할 수 있으니 보다 적합한 요소를 찾은 후 대응할 태그가 없을때 사용하기
figure figurecaption
이미지에 달린 자막,캡션
이미지와 캡션이 연결되도록 figure 요소 도입. img 와 연결해주는 태그임
<figure>
<img src="images/baby.jpg" alt="엄마 코끼리와 아기 코끼리">
<figcaption>
관심 받고싶어하는 아기
</figcaption>
</figure>p
단락 표시. 하나의 완결된 문장이나 문단 갖기
p태그 안에 자식으로 p 또 사용하지 않고,디자인 적인 줄바꿈 용도로 사용해도 안된다.
pre
html에 적은 내용 그대로 표기
code 넣어주고 싶을때는 code 태그 이용 가능
요상한것들도 입력한대로 다 나옴^^
blockquote
인용 블록. q 태그는 인용구 (문장 안에서 사용하는)
cite는 출처 의미
<blockquote>
<p>제발 그만해.. 이러다가 다~~ 죽어!</p>
<cite>영화 오징어게임중에서. 오일남</cite>
</blockquote>
<p><q>제발 그만해.. 이러다 다~~ 죽어!</q>라고 오일남이 소리쳤습니다.<p>hr
가로줄 표현하기 위해 사용했으나, 이야기에서의 장면 전환 혹은 문단 안에서 주제 변경되었을때 구별을 위해 나타냄.
단락 구분할때 사용하므로 p태그 내 사용 안됨
Entitiy
엔티티는 &로 시작해서 ;로 끝나는 문자열
HTML 내에서 예약어로 사용되고 있는 문자를 대체하기 위한 용도로 사용
// 자주 사용되는 예약어 목록
1. &
&
2. <
<
3. >
>
4."
"
