[HTML] 텍스트 관련 태그 정리+연습

Do it! HTML5 + CSS 02장 복습

 

1. 텍스트를 덩어리로 묶어 주는 태그

 

<hn> 제목 표시 heading

<p> 단락 paragraph

<br> 줄 바꿈 break

<hr> 수평 줄 horizontal

<blockquote> 인용문 (들여쓰기) - cite 속성으로 인용 사이트 주소 표시 가능

<pre> 입력 그대로 표시 preformat (공백 포함, 그러나 해당 부분은 소리로 읽히지 않아 접근성 떨어짐)

 

2. 텍스트를 한 줄로 표시하는 태그

 

<strong> 굵게(강조)

<b> 굵게 bold

<em> 이탤릭체(강조) emphasis

<i> 이탤릭체 italic

<q> 인용 내용 표시 qoute (줄바꿈 없음,  따옴표로 표시됨)

<mark> 형광펜

<span> 줄바꿈 없이 영역 묶기 (일부 텍스트 스타일 적용)

<div> 블록 단위 묶기(단락 통째로)

<ruby> 동아시아 글자 표시

<s> 취소선 strikethrough

<u> 밑줄 underline

 

3. 목록을 만드는 태그

 

<li> 목록 list item -> ul 또는 ol 사이에 옴

 

 

<ul> 순서 없는 목록 unordered list (작은 원, 사각형 등 불릿이 붙음)

<ol> 순서 목록 ordered list

(1) type 속성 : type="a" (1, a, A, i, I)

(2) start 속성 : 중간번호부터 시작

(3) reversed 속성 : 역순

 

<dl> 설명 목록 description list

<dt> 제목 description term

<dd> 설명 definition description

 

4. 표를 만드는 태그

 

<table> 표 안에 행 먼저<tr>, 다음 열<td>

<tr> 가로 행 table row

<th> 제목 셀 table header (가운데 정렬, 굵게)

<td> 셀 table data

 

<rowspan> 행 합치기

<colspan> column span 열 합치기

<td colspan="합칠 셀의 개수"> 내용 </td>

 

<caption> 표 제목 (table 바로 뒤, 가운데 정렬, 표 위 제목)

<figcaption> 설명 글을 붙이고 싶은 대상 묶기(가운데 정렬 X, 제목 위치 달라짐)

 

<thead> 제목

<tbody> 본문

<tfoot> 요약

<col> <colgroup> 여러 열 묶어 스타일 지정

 

5. 연습

 

1. 주제 : 낭만주의 음악의 세계

2. 목적 : 낭만주의 음악가의 곡 영상 및 설명 모음

3. 진행 상황

- 서양음악사의 시대 구분 표 만들기

- 낭만주의 음악가 리스트 만들기

+ 낭만주의 음악가 소개 페이지 제작

+ 음악가별 대표곡 유튜브 영상 링크

+ 디자인적으로 아름답게!

 

2023. 08. 05. 작업물