[html] 기본 태그, html의 요소(Element), 속성(Attribute)

---

 

기본 태그

 

01	<h1>~<h6>	<h1>~</h1>, ... <h6>~</h6>	· heading의 약자 · 제목 나타내기
02	<p>	<p>~</p>	· paragraph의 약자 · 단락 만들기
03	<br>	<br>	· break의 약자 · 줄 바꿈 - 여러 번 중첩해서 적용 가능
04	<hr>	<hr>	· horizontal의 약자 · 수평 줄 삽입
05	<blockquote>	<blockquote> ~</blockquote>	· 인용하기 - 주변 내용들과 인용 내용이 분리됨
06	<q>	<q>~</q>	· quote의 약자 · 인용하기 - 주변 내용들과 분리 되지 않고, 인용 내용에 큰따옴표가 붙음
07	<strong>	<strong> ~</strong>	· 볼드체로 표시하기
08	<b>	<b>~</b>	· 볼드체로 표시하기
09	<em>	<em>~</em>	· emphasis의 약자 · 이탤릭체로 표시하기
10	<i>	<i>~</i>	· italic의 약자 · 이탤릭체로 표시하기
11	<mark>	<mark> ~</mark>	· 형광펜 효과 내기
12	<span>	<span> ~</span>	· 줄 바꿈 없이 태그 내에 서술된 내용 묶기

▶01. <h1>~<h6> - 제목 나타내기

· 일반 텍스트보다 굵고 크게 표시됨

· <h1>이 가장 크고, <h6>으로 갈수록 작아짐

 

▶02. <p> - 단락 만들기

· <br>태그로는 단락을 만들 수 없음

· <p>태그 사용시, 별도로 <br>태그를 사용하지 않더라도 줄이 바꿔진 상태로 적용됨

 

▶05, 06. <blockquote>, <q> - 인용하기

· <blockquote>

- '블록 태그'에 해당됨

- 주변 내용들과 인용 내용이 분리됨

- 인용 내용은 줄이 바뀌고, 안으로 들여쓰기가 적용됨

· <q>

- 줄 바뀜 없이 주변 내용들과 함께 같은 한 줄에 표시됨 

- 인용 내용에 큰따옴표가 붙음

 

▶07, 08. <strong>, <b> - 볼드체로 표시하기

· <strong>

- 화면 낭독기가 인식함

- 중요한 내용에는 해당 태그를 사용할 것

· <b>

- 화면 낭독기가 인식하지 못함

 

▶10. <em>, <i> - 이탤릭체로 표시하기

· <em>

- 중요한 내용에는 해당 태그를 사용할 것

· <i>

 

▶11. <mark> - 형광펜 효과 내기

· 기본색은 노란색

· css의 background-color속성을 이용해 색변환 가능

 

html의 요소(Element)

 

<p>는 → 시작태그를,

</p>는 → 종료태그를,

Hello World는 → 콘텐츠(Contents)를 나타낸다.

위 세 개를 전부 합쳐 요소(Element)라고 한다.

 

html의 속성(Attribute)

 

src는 → 속성명(Attribute Name)을,

cat.png는→ 속성값(Attribute Value)을 나타낸다.

속성(Attribute)는 속성명과 속성값으로 구성된다.