텍스트 태그
1. 텍스트를 블록으로 묶어 처리하는 태그
* <h1> ~ <h6>
: 제목 텍스트 태그
- 일반 텍스트보다 크고 진하게 표시되며, <h1>이 가장 크게 표시되고 <h6>가 가장 작게 표시됨
- 굵기는 따로 설정하지 않아도 자동으로 진하게 적용됨
* <p>
: 단락을 만드는 텍스트 태그
- <p>태그로 표시하는 텍스트 단락은 닫는 태그</p>로 만날 때까지 줄바꿈 없이 텍스트로 한 줄 표시됨
- 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀜
(브라우저 창의 크기가 따라 자동으로 줄바꿈이 이루어짐)
* <hr>
: 수평 줄을 넣는 텍스트 태그
- 닫는 태그 없음
* <blockquote>
: 인용문 넣는 텍스트 태그
- 다른 텍스트보다 들여 써짐
- cite 속성을 이용하여 인용 사이트 주소를 표시할 수도 있음
* <pre>
: 입력하는 그대로 화면에 표시되는 태그
- 이 태그 안에서는 띄어쓰기, 줄바꿈 등 입력하는 그대로 표시가 됨
* <br>
: 줄바꿈 하는 태그
2. 텍스트를 인라인 레벨로 표시하는 태그
* <strong>, <b>
: 글자가 굵게 나오는 태그
- 두 태그의 굵기는 눈으로 보기에는 차이가 없음
- <strong>태그는 화면낭독기 사용 시 강조된 텍스트라고 읽어줌
- <b>태그는 화면에서 단순히 굵게 표시할 때 주로 사용
* <em>, <i>
: italic체로 표시되는 태그로 텍스트가 살짝 기울어진 체로 나타나는 텍스트 태그
- <em> : 특정 부분을 강조하고 싶을 때 사용
- <i> : 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 사용됨
* <q>
: 인용 내용을 표시하는 텍스트 태그
- 한 줄로 표시되며 인용 내용을 구분할 수 있도록 인용 내용에 따옴표를 붙여 표시됨
* <mark>
: 형광펜 효과를 주는 텍스트 태그
* <span>
: 줄바꿈 없이 영역을 묶는 텍스트 태그
- 보통 묶어서 따로 스타일을 주거나 할 때 주로 사용함
3. 기타 텍스트 태그
(종종 사용됨)
* <small>
: 부가정보처럼 작게 표시해도 되는 글자를 넣을 때 사용하는 텍스트 태그
* <sub>
: 아래 첨자를 나타내는 텍스트 태그
* <sup>
: 위 첨자를 나타내는 텍스트 태그
* <s>
: 취소선을 표시하는 텍스트 태그
* <u>
: 밑줄을 나타내는 텍스트 태그
목록 태그
1. 순서없는 목록 태그
* <ul> <li>
: 순서 없는 목록 태그 생성
- <ul> 안에 <li> 태그 생성하여 목록 작성
2. 순서있는 목록 태그
* <ol> <li>
: <ol>태그 안에 <li>태그 생성하여 목록 작성
<ol> type 속성: 목록 숫자를 다양하게 조절할 수 있음 (태그 속성으로 순서 목록의 숫자와 순서 바꾸기 가능)
속성값 / 설명
1 / 숫자(기본값)
a / 영문 소문자
A / 영문 대문자
i / 로마숫자 소문자
I / 로마숫자 대문자
3. 기타 목록 태그
* <dl>, <dt>, <dd>
: 설명 목록 만드는 태그
'Frontend > html-css' 카테고리의 다른 글
| [Html5/CSS3] 웹 홈페이지 상단 네비바(header) 만들기 (0) | 2024.05.31 |
|---|
