프론트 엔드 1일차 HTML(표 관련 태그, 영역 관리 태그)
2024. 1. 10. 16:46ㆍ프론트엔드
표 관련 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>표 관련 태그</title>
</head>
<body>
<!--
table 태그
- 테이블을 만들기 위해 필요한 태그
tr태그
- 한 행을 나타내는 태그
td태그
- 한 열을 나타내는 태그
th 태그
- 한 열을 나타내는 태그
- 첫 행에 제목을 나타낼 때 사용
- 가운데 정렬, 굵은 글씨
thead태그
- 테이블 제목에 해당
tbody태그
- 테이블 내용
tfoot태그
- 테이블 끝으로, 평균과 같이 내용을 종합할 때 사용
figure태그
- 요소를 설명하기 위한 태그로
- figcaption 태그와 같이 사용
figcaption 태그
- 요소 앞에 있으면 요소 위에 설명을 작성
- 요소 뒤에 있으면 요소 뒤에 설명을 작성
caption태그
- 표를 설명하는 태그
- 상단 가운데 정렬
colgroup태그
- 열의 스타일을 적용하기 위해 col태그들을 모아놓은 태그
col 태그
- 열의 스타일을 적용하는 태그
- 열을 적용하지 않아도 열의 개수마큼 작성
속성 colspan
- 열을 병합
- td/th태그에 사용
속성 rowspan
- 행을 병합
- td/th태그에 사용
-->
<figure>
<table border="2">
<caption>성적표</caption>
<colgroup>
<col style="background-color: yellow;">
<col style="background-color: aliceblue;">
<col style="background-color: gray;">
</colgroup>
<thead>
<tr>
<th rowspan="2">과목</th>
<th>번호</th>
<th>이름</th>
<th>성적</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>1</td>
<td>홍길동</td>
<td>100</td>
</tr>
<tr>
<td>HTML</td>
<td>2</td>
<td>임꺽정</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">평균</td>
<!-- <td></td>
<td></td> -->
<td>95</td>
</tr>
</tfoot>
</table>
<figcaption>학생 이름과 성적을 보여 줌</figcaption>
</figure>
</body>
</html>
영역 관리 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영역 관련 태그</title>
</head>
<body>
<!--
div
- 대표적인 block태그
- 기능은 없다
span
- 대표적인 inline태그
- 기능이 없다.
block 태그란?
- 새 라인에서 시작하는 태그
- 크기 변경이 가능
- table 태그, div태그, p태그 등
inline태그란?
- 현재 위치에서 시작하는 태그
- 크기 변경이 안된
- a태그, b태그, i태그 등
inline-block태그란?
- 현재 위치에서 시작
- 크기 변경이 가능
- input태그, img태그 등
iframe태그
- 다른 문서들을 가져와서 배치하는 태그
- 네이버 배너 광고, 유튜브,
- src 속성으로 가져올 문서를 지정
- width/height 속성으로 크기를 지정
- name으로 프레임 이름을 지정
-->
<div>박스1</div>
<div>박스2</div>
<div>박스3</div>
<span>박스1</span>
<span>박스2</span>
<span>박스3</span>
<br>
<!--
경로 지정 방식(서버)
- 절대 경로
- 문서의 위치가 바뀌어도 변함이 없음
- 최상위 root를 기준으로 경로를 잡아줌
- /html/day01/2_관련 태그.html
- 단, vs코드에서 폴더 열기를 통해 최상위 root를 변경하면 되던 코드가 안될 수 있다
혹시 학원에서 되던 코드가 안된다면 폴더 열기 할때 연 폴더가 학원과 다른 폴더일 수 있으니
확인 필수!
- 상대 경로
- 문서의 위치가 바뀌면 경로가 바뀌어야 함
- ../ : 상위 폴더
- ./ :현재 폴더, 보통은 생략
- vscode에서 폴더 열기를 통해 최상위 root를 변경 해도 실행이 됨
-->
<!-- 절대 경로 -->
<iframe src="/html/day01/6_멀티 미디어 관련 태그.html" frameborder="0" width="100%" height="300px"></iframe>
<br>
<!-- 상대 경로 -->
<iframe src="../../html/day01/2_글자 관련 태그.html" frameborder="0" width="100%" height="300px"></iframe>
<iframe src="5_영역 관련 태그.html" frameborder="0" width="100%" height="300px"></iframe>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성) (0) | 2024.01.15 |
|---|---|
| 프론트엔드 1일차 HTML(폼 관련 태그) (2) | 2024.01.10 |
| 프론트엔드 1일차 HTML(멀티 미디어 관련 태그, 하이퍼 링크 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(글자 관련 태그, 목록 태그) (0) | 2024.01.10 |
| 프론트 엔드 1일차 HTML(글자 꾸미기 태그) (1) | 2024.01.10 |