웹문서의 대부분 정보는 텍스트로 전달됩니다. 이렇게 텍스트로 이루어진 정보는 수정이 편리하다는 장점이 있지만 텍스트 양이 많을 경우 정보를 찾기 힘듭니다. 따라서 필요에 따라 크기나 색상, 스타일을 바꾸어 표시합니다. 텍스트와 관련해 사용하는 태그는 많으나 그중에서도 텍스트를 블록으로 묶어 처리하는 태그를 살펴보도록 하겠습니다.
<hn> 태그
제목을 표시합니다.
일반 텍스트보다 굵고 진하게 표시됩니다.
크기는 <h1>에서 <h6>까지 존재하며 h1 > h2 > h3 > h4 > h5 > h6순으로 큽니다.
|
<!DOCTYPE html>
<html>
<body>
<h1>제목 1, 제목의 사이즈가 가장 큽니다</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6, 제목의 사이즈가 가장 작습니다</h6>
</body>
</html>
|
cs |
<출력 결과>
<p> 태그
텍스트를 표시할 때 가장 많이 사용하는 태그입니다.
텍스트 단락을 만들 때 사용하며 <p>~</p> 안에 텍스트는 줄 바꿈 없이 한 줄로 표시됩니다.
화면의 너비보다 길어질 경우 줄이 자동으로 바뀝니다.
|
<!DOCTYPE html>
<html>
<body>
<p>
이 단락에
많은 공백을 줬지만
브라우저는
이를 무시합니다
</p>
<p>
단락의 줄 수는 브라우저 창의 크기에 따라 자동으로 다르게 표시됩니다.<br>
브라우저창의 크기를 조절하면 단락의 줄수도 자동으로 변경됩니다
</p>
</body>
</html>
|
cs |
<출력 결과>
<br> 태그
html문서를 작성할 때 입력자가 엔터를 치더라도 웹 브라우저 창에서는 줄 바꿈이 되지 않습니다.
줄 바꿈을 원하는 위치에 <br>를 입력해야 줄 바꿈이 되며 닫는 태그가 없습니다.
|
띄어쓰기를 원하는 칸에<br>
'br'태그를 입력해보세요!<br>
줄바꿈이 가능해집니다.
|
cs |
<hr> 태그
수평 줄을 삽입할 때 사용합니다.
보통 여러 개의 텍스트 단락을 나열하는 도중에 텍스트 단락의 주제가 바뀌는 시점에서 분위기 전환용으로 사용합니다.
닫는 태그가 없습니다.
|
기본형 <hr> -
|
cs |
<blockquote> 태그
인용문을 넣을 때 사용합니다.
인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 구분이 쉽습니다.
cite속성으로 인용 사이트 주소 표시도 가능합니다.
|
<!DOCTYPE html>
<html>
<body>
<h2>고등 학교 교과서 필수 문학작품 정리</h2>
<p>오늘은 수능에 자주 출제되는 문학 작품을 정리해봤습니다.<br>
국어 16종 문학 11종 작가별로 정리한 교과서 필수 문학작품!<br>
틈 날 때마다 문학작품을 미리 접하고 읽어보면 좋을 것 같은데요<br>
수능에 소설 지문이 워낙 길게 출제되니 미리 읽고 요약을<br>
정리해 두면 공부 시간을 훨씬 절약할 수 있겠죠?</p>
<blockquote>아래 적힌 도서는 시간 날 때 모두 접하는 것이 좋습니다.</blockquote>
</body>
</html>
|
cs |
<출력 결과>
<pre> 태그
해당 태그를 입력하면 소스에 표시한 공백이 브라우저에 그대로 표시됩니다.
하지만 접근성에 대해 고려해봐야 하며 사용을 추천하지 않습니다.
|
<!DOCTYPE html>
<html>
<body>
<h2>pre태그와 웹 접근성</h2>
<pre>
해당 태그를 사용할때는 접근성에 대해
한번더 고려를 해봐야 합니다. 웹문서를 소리로 읽어주는 기계나
점자로 표시해주는 기계는 이 태그가 적용된 부분을
건너뛰어버리기
때문입니다. 따라서 그 부분의 내용을 알 수 있도록
대체 텍스트를 추가하는것이 좋습니다
</pre>
</body>
</html>
|
cs |
<출력 결과>
'HTML' 카테고리의 다른 글
| 이미지 태그 다루기 / <img> (0) | 2020.03.22 |
|---|---|
| 목록 태그 다루기 (0) | 2020.03.22 |
| HTML 색 (0) | 2020.03.22 |
| HTML 기본 구조와 태그 (0) | 2020.03.22 |
| HTML 개요 (0) | 2020.03.12 |
