텍스트를 묶어주는 태그
🌳 <hn> 태그 - 제목 표시
- 기본형 : <hn> 제목 </hn>
- 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그
- h1 > h2 > h3 > h4 > h5 > h6 (h1의 글자가 가장 큼)
🌳 <p> 태그 - 텍스트 단락
- 기본형 : <p> 텍스트 </p>
- 입력한 내용 앞, 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
- <p> 태그를 이용하여 제목을 만들 경우, 보기에는 <hn>과 다를 바가
없는 것처럼 보이나, 웹 브라우저에서는 제목으로 인식하지 못하기 때문에
제목을 표시할 경우 <hn> 태그를 사용해야 한다.
🌳 <br> 태그 - 줄 바꾸기
- 기본형 : <br>
- 줄을 바꿀 위치에 <br> 태그를 사용한다.
- 닫는 태그가 없다.
🌳 <blockquote> 태그 - 인용문 넣기
- 기본형 : <blockquote> 인용 내용 </blockquote>
- 다른 텍스트보다 들여 써진다.
🌳 <hr> 태그 - 분위기 전환
- 기본형 : <hr>
- 주제가 바뀔 때 분위기 전환을 위하여 사용한다.
- 수평선이 생긴다.
🌳 <pre> 태그 - 입력한 그대로 표시
- 기본형 : <pre> 텍스트 </pre>
- 소스에 표시한 공백이 그대로 표시된다.
- 프로그램 소스를 표시할 때 유용하다.
텍스트를 한 줄로 표시하는 태그
🌳 <strong>, <b> - 굵게 표시
- <strong> : 중요한 내용이라서 강조해야 할 때 사용한다.
- <b> : 단순히 굵게 표시할 때 사용한다.
🌳 <em>, <i> - 이탤릭체로 표시
- <em> : 흐름상 특정 부분을 강조할 때 사용한다.
- <i> : 단순히 이탤릭체로 표시할 때 사용한다.
🌳 <q> 태그 - 인용 내용 표시
- 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시한다.
- 인용 내용 앞, 뒤에 따옴표(" ")가 추가된다.
🌳 <mark> - 형광펜 효과
- <mark> 태그로 묶은 부분의 배경색이 노란색으로 표시된다.
🌳 <span>, <div> - 영역 묶기
- <span> : 줄 안에서 (인라인) 묶기
- <div> : 줄 바꿔 (블록) 단락으로 묶기
- 특정 부분에 CSS를 적용하기 위하여 사용한다.
🌳 <ruby> - 동아시아 글자에 주석 표시
- <ruby> 태그 안에 <rt> 태그를 사용하여 주석을 표시한다.
목록을 만드는 태그
🌳 <ul>, <li> - 순서 없는 목록
- 각 항목 앞에 불릿이 붙여진다.
- CSS의 list-style-type 속성으로 불릿을 수정한다.
🌳 <ol>, <li> - 순서 목록
- 각 항목 앞에 숫자가 붙여진다.
- <ol> 태그의 속성
1) type 속성 : 불릿 앞의 숫자 조정
2) start 속성 : 중간 번호부터 표시
3) reserved 속성 : 역순으로 표시
🍂 여러 항목이 나열될 때 </li> 태그를 생략해도 다음에 오는 <li> 태그를 만나면
자동으로 그 전에 </li> 태그가 있는 것처럼 인식한다.
🌳 <dl>, <dt>, <dd> - 설명 목록
- '제목'과 그에 대한 '설명'으로 이루어진 목록이다.
- <dl>과 <dt>, <dd> 태그를 사용한다.
- 하나의 <dt>에 여러 개의 <dd> 값을 가질 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl>
<dt>
올레 1코스
</dt>
<dd>
코스 : △△ 초등학교 옆 - □□ 해변
</dd>
<dd>
거리 : 14.6km (4~5시간)
</dd>
<dd>
난이도 : 중
</dd>
<dt>
올레 2코스
</dt>
<dd>
코스 : □□ 해변 - ○○ 포구
</dd>
<dd>
거리 : 14.5km (4~5시간)
</dd>
<dd>
난이도 : 중
</dd>
</dl>
</body>
</html>
각 태그들의 예제는 천천히 추가해야겠다 ,, 😂
'HTML' 카테고리의 다른 글
| [HTML] 이미지와 하이퍼링크 (0) | 2021.07.31 |
|---|---|
| [HTML] 목록과 표 태그 (0) | 2021.07.31 |
| [HTML] HTML5와 CSS3란 무엇인가? - HTML 기초 (0) | 2021.07.29 |
