✦ 제목 요소
h1 ~ h6 태그
h태그는 제목을 나타내는 태그이며, 1단계부터 6단계까지 표현할 수 있다.
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
< 주의사항 >
- 웹 브라우저는 제목의 정보를 토대로 목차를 생성하여 사용자에게 제공하기 때문에, 글씨 크기를 위한 사용은 지양해야 한다. (ex. 스크린 리더기 등)
- 제목 태그는 1단계부터 6단계까지 건너뛰지 않고, 순차적으로 사용해야 한다.
h1태그의 경우에는 가장 큰 제목이기 때문에, 한 페이지에 한 번만 사용해야 한다.
✦ 본문 요소
p 태그
p태그는 하나의 문단을 나타내는 태그이다.
<p>
윱랸킵결아에서부터 도력네간랄이 벽율이기, 연목젼은 꺼뫂을. 난뱐이 게고삲의 븐인아이의 비뒸에서 이연지, 얼날까엘비라 고껴있혜의 고디다난맹이 딤진슨히어서
</p>
<p>에 룔노의 왔앙사에, 후켈아온은 까인을. 오메도다 건 힐깔다 우홍 윽첸헚솰죄지 온걊엉 러다가
진힌. 비혀스디며링이던 디웅가이히의 더룰히아로 라티어요 데빅은 기첨.
</p>
< 결과 확인 >
p태그가 끝난 이후에 자동으로 줄이 바뀌는 것을 확인할 수 있다.
br 태그
br태그는 텍스트 안에서의 줄 바꿈을 해준다.
- HTML은 태그 내에서의 줄 바꿈을 무시하기 때문에, 줄 바꿈이 필요한 경우에는
br태그를 사용한다.- 단, 문단 사이의 여백이 많이 필요한 경우에는
br태그 대신 CSS 작업을 통해 여백을 넓혀야 한다.
<p>
윱랸킵결아에서부터 도력네간랄이 벽율이기, <br/>연목젼은 꺼뫂을.<br/>난뱐이 게고삲의 븐인아이의 비뒸에서 이연지, 얼날까엘비라 고껴있혜의 고디다난맹이 딤진슨히어서
</p>
<p>
에 룔노의 왔앙사에, 후켈아온은 까인을. <br/>오메도다 건 힐깔다 우홍 윽첸헚솰죄지 온걊엉 러다가 진힌.<br/>비혀스디며링이던 디웅가이히의 더룰히아로 라티어요 데빅은
기첨.
</p>
blockquote 태그와 q 태그
두 태그는 인용 문장임을 나타낼 때 사용한다.
𝗤. 그렇다면 왜 굳이 두 개의 태그를 사용하는가?
𝐀.blockquote태그는 블럭 요소이고,q태그는 인라인 요소이기 때문이다.
블럭 요소는 긴 문장의 인용을 넣을 때, 인라인 요소는 짧은 인용을 넣을 때 사용하는 편이다. 또한, 두 태그는 같은 목적이지미나 결과가 다르게 출력된다.
<body>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Reddidisti torquatus iniuria, dubitemus omni, accusamus physici comprehenderit arbitrer. Mi eros
pede conciliant repugnantibus, convincere excruciant minuti. Senectutem assumenda invenerit certe excruciant efficiantur occultum clamat improborum
varias.
</blockquote>
<q> Explicatam tertio vendibiliora excruciant, dominationis egestas consulatu iucunda. </q>
<p>
Meminit reperiuntur opinor vestra eae contereret contenta, dedocere. Sed falso eademque via epularum. ECausae consuetudinum explicatis albuci vi nati
putamus. Partes theatro habent, nibh improbis iure, albuci, siculis, horum sit reperietur. Fastidium reprehenderit liberemus cupiditatibusque leniat.
</p>
</body>
< 결과 확인 >
blockquote태그가 적용된 부분은 앞쪽 여백이 자동으로 들어간 것을 확인할 수 있다.q태그가 적용된 부분은 따옴표(")가 적용된 것을 확인할 수 있다.- 𝗤. 어라 인용에 출처는 필수 아닌가요?!
𝐀.cite속성을 사용하여 정보를 기입할 수 있다.<q cite="출처경로">...</q>
pre 태그
HTML에 입력한 서식을 그대로 보여주는 태그이다.
- 아까
br태그를 사용해서만 줄 바꿈이 가능하다고 했지만,pre태그는 그냥 줄 바꿈이 가능하다.- 원하는 서식대로 출력되기 때문에 코드 등을 입력할 때 자주 사용된다.
<pre>
1
2
3
</pre>
< 결과 확인 >
- 사용자가 입력한 서식 그대로를 출력한다.
figure 태그와 figcaption 태그
두 태그는 페이지 내에서 독립적인 콘텐츠를 표현한다.
<figure>
<img src="" alt=""/>
<figcaption>이미지 설명중</figcaption> <!-- 생략 가능하다. -->
</figure>< 결과 확인 >
- 하나의 이미지 요소과 해당 이미지의 설명 요소를 하나의 독립적인 콘텐츠로 표현할 수 있다.
hr 태그
문단과 문단 등 무언가를 구분하는 가로선을 넣을 때 사용한다.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Reddidisti torquatus iniuria, dubitemus omni, accusamus physici comprehenderit arbitrer. Mi eros
pede conciliant repugnantibus, convincere excruciant minuti. Senectutem assumenda invenerit certe excruciant efficiantur occultum clamat improborum
varias.
</p>
<hr />
<p>
Meminit reperiuntur opinor vestra eae contereret contenta, dedocere. Sed falso eademque via epularum. Explicatam tertio vendibiliora excruciant,
dominationis egestas consulatu iucunda. Causae consuetudinum explicatis albuci vi nati putamus. Partes theatro habent, nibh improbis iure, albuci,
siculis, horum sit reperietur. Fastidium reprehenderit liberemus cupiditatibusque leniat.
</p>
< 결과 확인 >
- 문단(
p태그) 사이에 가로선이 생긴 걸 확인할 수 있다.
< 주의사항 >
- 이 태그를 사용할 때, 사용하면 안 되는 스타일(align, size 등의 속성)이 있는데, 이는 웹 표준서를 참고하면 알 수 있다.
addr, address, bdo 태그
addr태그는 약어의 원래 의미를 작성할 때 사용한다. (title이라는 속성을 사용한다.)
<p>
<abbr title="International Olympic Committee">IOC</abbr>
(국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다.
</p>
address태그는 주소를 나타낼 때 사용한다.
<address>
가나도 다라시 마바동
Tel: (000)123-4567 | Fax: (000)123-4567
</address>
bdo태그는 글이 오른쪽에서 왼쪽으로 작성되는 태그이다.
<p>왼쪽부터 오른쪽 방향.</p>
<p><bdo dir="rtl">오른쪽부터 왼쪽 방향</bdo></p>
໒꒰ྀ ˶ • ༝ •˶ ꒱ྀིა