HTML 기본, 강조 태그

HTML 기본, 강조 태그

 

1. 제목 태그 (h1 ~ h6)

크기, 굵기 별로 숫자를 붙여서 사용

※ header의 약자

※ 숫자가 높을 수록 작아짐

<h1>h1태그</h1>
<h2>h2태그</h2>
<h3>h3태그</h3>
<h4>h4태그</h4>
<h5>h5태그</h5>
<h6>h6태그</h6>

 

---

 

2. 본문 태그 (p 태그, span 태그)

 

① p 태그 (paragraph) 

단락으로 표현이 되기 때문에 무조건 가로 한 줄의 영역을 차지

옆에 남는 자리가 없어 다음 요소는 개행

<p>p태그1</p>
<p>p태그2</p>
<p>p태그3</p>

 

 

 

 

 

② span 태그

문장으로 표현 되기 때문에 내가 넣은 내용(content)만큼만 영역으로 차지

자리가 있다면 쭉 옆으로 배치

<span>span태그1</span>
<span style="color: blue;">span태그2</span>
<br>
<span>span태그3</span>

 

 

 

※ span 태그는 별도의 특징을 가지고 있지 않음 (공태그)

※ 별도의 특징은 없지만 태그를 사용해야 하는 이유는 특정 요소에만 접근하기 위함

 

---

 

3. 개행 태그 (br)

※ 홀태그 : </br>을 하지 않아도 동작함

※ break 약어

 

---

 

4. 수평선 태그 (hr)

<hr color="red" width="150px" size="20">
<hr color="orange" width="150px" size="20">
<hr color="yellow" width="150px" size="20">
<hr color="green" width="150px" size="20">
<hr color="blue" width="150px" size="20">
<hr color="indigo" width="150px" size="20">
<hr color="purple" width="150px" size="20">

 

▶ 다중 속성 : 속성 이름 = "값" 띄어쓰기로 복수 입력

▶ 태그 * 숫자 → 숫자만큼 태그 생성

 

---

 

5. 강조 태그 (b 태그, strong 태그)

 

① b 태그

bold, 시각적 의미 강조

<b>공지사항</b>
<span>지각하면 안돼요!</span>

 

② strong 태그

실질적 의미 강조

<span>이 좌석은 </span>
<strong>노약자, 임산부, 어린이만</strong>
<span>이용 가능합니다</span>