Preface
이번 장에선 텍스트, 목록, 표에서 사용할 수 있는 태그들을 공부했다.
예제를 바탕으로 조금만 수정해도 내가 원하는 형태의 결과를 웹 브라우저에 출력할 수 있어서 그런지 쉽고 재미있다고 느껴졌다.
다만 태그의 종류가 너무 많아 원하는 형식을 만들어주는 태그를 바로바로 사용하려면 꽤나 숙련되어야 할 것 같다는 생각이 들었다.
이번 책의 HTML 부분이 끝나면 주요한 태그들을 아이패드에 정리해서 시간 날 때마다 볼 계획이다.
1. 텍스트 입력하기
- <hn> 태그: 제목을 나타내는 태그
1) n의 자리에는 1~6의 숫자가 들어가며, 크기를 나타낸다.
- <p> 태그: 텍스트 단락을 만든다.
1) 편집기에서 줄을 바꾸더라도 웹 브라우저에선 한 줄로 표시된다.
2) 텍스트 단락의 내용이 길어 화면에 한 줄로 표시할 수 없을 땐 자동으로 줄이 바뀐다.
- <br> 태그: 줄을 바꾸는 태그
1) 닫는 태그가 없다.
2) <br> 태그를 두 번 사용하기 보단 <p> 태그로 텍스트 단락을 만들어야 한다.
- <blockquote> 태그: 인용문을 표시한다.
1) 다른 텍스트보다 약간 들여써진다.
- 텍스트를 굵게 표시하는 태그
1)<strong> 태그: 텍스트를 굵게 표시하며, 강조한다.
2)<b> 태그: 텍스트를 굵게 표시한다.
- 텍스트를 기울여 표시하는 태그
1) <em> 태그: 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
2) <i> 태그: 마음속의 생각이나 용어, 관용구 등에 사용
- 다양한 텍스트 관련 태그
1) <abbr>: 줄임말을 표시하고 title 속성을 함께 사용할 수 있다.
2) <cite>: 웹 문서나 포스트에서 참고 내용을 표시한다.
3) <code>: 컴퓨터 인식을 위한 소스 코드이다.
4) <small>: 부가 정보처럼 작게 표시해도 되는 텍스트이다.
5) <sub>: 아래 첨자를 표시한다.
6) <sup>: 위 첨자를 표시한다.
7) <s>: 취소선을 표시한다. (abc)
8) <u>: 밑줄을 표시한다.
9) <ins>: 공동 작업 문서에서 새로운 내용을 삽입한다.
10) <del>: 공동 작업 문서에서 기존 내용을 삭제한다. (abc)
2. 목록 만들기
- <ol>, <li> 태그: 순서 있는 목록을 만든다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</body>
</html>
- <ol> 태그에 type 속성을 사용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다.
1) type="1": 숫자(기본값)
2) type="a": 영문 소문자
3) type="A": 영문 대문자
4) type="i": 로마 숫자 소문자
5) type="I": 로마 숫자 대문자
- 순서 목록은 기본적으로 '1'부터 시작하지만, start 속성을 사용해서 시작 번호를 바꿀 수 있다.
- <ul>, <li> 태그: 순서 없는 목록을 만든다.
→ 항목 앞에 작은 원이나 사각형을 붙여서 구분한다.
- 설명 목록: 이름과 값 형태로 된 목록
1) <dl> 태그: 설명 목록을 만든다.
2) <dt> 태그: 이름(단어명) 부분을 지정한다.
3) <dd> 태그: 값(설명) 부분을 지정한다.
→ <dt> 태그 하나에 <dd> 태그 여러 개 사용 가능
3. 표 만들기
- 표는 행과 열 그리고 셀(cell)로 이루어진다.
- 셀: 행과 열이 만나 이루어진 곳
- <table> 태그: 표를 만든다.
- <caption> 태그: 표의 제목을 나타낸다. (생략 가능)
- <tr> 태그: 행을 만든다.
- <td> 태그: 셀을 만든다.
- <th> 태그: 셀을 진하게 표시한다. (표의 제목 행에 셀을 만들 때 사용)
- 표의 구조
1) <thead> 태그: 제목 부분을 나타낸다.
2) <tbody> 태그: 본문 부분을 나타낸다.
3) <tfoot> 태그: 요약 부분을 나타낸다.
※ 표의 구조를 지정하면 CSS를 사용해 표의 구조에 따라 각각 다른 스타일을 적용할 수 있다.
- 행이나 열을 합치는 속성: 실제로는 셀을 합치는 것이므로 <td> 혹은 <th> 태그에서 이루어진다.
1) rowspan 속성: 행을 합칠 때 사용
2) colspan 속성: 열을 합칠 때 사용
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>→ 같은 내용이 표시된 셀을 합칠 땐 내용이 한 번만 표시되지만, 서로 다른 내용을 합칠 땐 하나의 셀에 모든 내용이 표시된다.
- <col>, <colgroup> 태그: 열을 묶어줄 때 사용한다.
1) <col> 태그는 열을 1개만 지정할 때 사용한다.
2) <colgroup> 태그는 <col> 태그를 2개 이상 묶어서 사용한다.
3) 반드시 <caption> 태그 다음에 써야 한다. (표의 내용이 사직 되기 전에)
4) <col> 태그를 사용할 땐 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체 열의 개수만큼 <col> 태그를 넣어야 한다.
→ 스타일 속성이 없는 열에도 단순히 <col> 태그를 명시해야 한다.
5) 같은 스타일 속성을 사용하는 <col> 태그가 있다면 span 속성을 사용해서 묶어 줄 수 있다.
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px"> <!-- 같은 속성은 묶어 사용 -->
</colgroup>
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [HTML] 입력 양식 작성하기 (1) (0) | 2022.07.17 |
|---|---|
| [HTML] 웹 문서에 다양한 내용 입력하기 (2) (1) | 2022.07.16 |
| [HTML] HTML 기본 문서 만들기 (0) | 2022.07.14 |
| 웹 개발 시작하기 (0) | 2022.07.14 |
| HTML + CSS + 자바스크립트 출처 (0) | 2022.07.13 |
댓글