반응형
제목 태그 h1 ~ h6
<h1>heading level1</h1>
<h2>heading level2</h2>
<h3>heading level3</h3>
<h4>heading level4</h4>
<h5>heading level5</h5>
<h6>heading level6</h6>- 숫자가 작을 수록 중요도가 높다.
- 글씨 크기를 위해서 제목 태그를 사용하지 않고 font-size CSS 속성을 사용하기를 바란다.
본문 태그 p
- 블록 요소이다.
- p 태그 내에는 블록 요소를 사용하면 안 된다.
- 문단 단위로 활용한다. 스크린 리더가 문단 단위로 인식한다.
줄 바꿈 태그 br
- 빈 요소이다.
- 개행을 해준다.
- 여백을 길게 주기 위해서 br을 중복하여 사용하는 건 좋지 못하다. css 속성으로 해결하자.
인용 태그 blockqute, q
- blockqute : 블록 요소이다.
- 기본적으로 앞에 여백이 있다.
- q : 인라인 요소이다.
- 기본 스타일링으로 쌍따옴표가 사용된다.
pre, figure
<pre>
_______________________
< 나는 이 분야의 전문가다. >
-----------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>- 생긴 그대로 보여준다.
- 기본적으로 코드에서 스페이싱은 한 번만 되나 pre 태그는 스페이싱 한 만큼 보여준다.
- 고정폭 글꼴을 사용한다.
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>- 독립적인 콘텐츠를 표현한다.
- figcaption을 통해 설명할 수 있다.
- 연관성 있는 내용을 묶어줘서 사용하면 된다.
abbr, address, cite, bdo
- abbr :약어, title 속성에 원래 의미를 작성한다.
- address :이전에는 오프라인 주소만을 사용했지만 이메일 주소도 사용한다.
- cite :인용의 출처를 밝힐 때 사용한다.
- bdo : dir 속성에 rtl(right to left)를 지정하면 오른쪽에서 왼쪽으로 글을 읽게 만든다.
b와 strong
- b : 요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않음.
- strong : 높은 중요도를 가지고 있을 때 사용.
i와 em
- i
- 기본적으로 기울임꼴로 표시
- 주위와 구분해야 하는 부분을 나타낸다.
- 기술 용서, 외국어 구절, 등장인물들의 생각 등
- em : 강세 요소
mark, small, sub, sup
- mark : 중요한 부분 하이라이트, blockquote 내에 사용 가능
- small : 덧붙임 글 요소로 저작권과 법률 표기 등의 작은 텍스트를 의미
- sub : 각주 표기, 아래 첨자
- sup : 위 첨자 요소
del, ins, code, kbd
- del : 제거된 텍스트의 범위를 나타낸다.
- ins : 추가된 텍스트의 범위를 나타낸다.
- cod : 고정폭 글씨체
- kbd : 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낸다.
a태그와 화이퍼링크
- 이메일/전화 : 이메일 주소랑 전화에 태그를 입히면 메일과 전화할 수 있도록 간다.
- target : 사용할 때 rel="noreferrer "를 추가할 것.
- _self : URL을 현재 브라우징 맥락 표시.
- _blank : URL을 새로운 브라우징 맥락에 표기
- _parent : URL을 현재 브라우징 맥락의 부모에 표시.
- _top : URL을 최상단 브라우징에 표시.
같이 보면 좋은 글
반응형
댓글