2022-02-24 (4일차)
01 : htmnl 블럭요소 정의
02 : header
03 : footer
04 : nav
05 : h*html 블럭요소 (block element)
- 모든 인라인 요소를 포함할 수 있고, 자식요소로 다른 블럭요소도 일부포함된다.
- 부모요소의 100% 가로크기를 가진다.
- 높이와 넓이 설정이 가능하다.
- 블럭요소는 인라인 요소로도 변경가능하다.(CSS 속성 display로 가능)
- 마진, 패딩 설정가능하다. (여백)
- 주로 레이아웃을 구성할 때 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 블럭요소</title>
</head>
<body>
<h1>html 블럭요소</h1>
-부모요소의 100% 가로크기를 가진다.<br>
-직사각형의 모형을 가진다. <br>
-자동 개행 <br>
-높이, 넓이, 여백(밖, 안쪽/마진,패딩) 설정 가능하다. <br>
-블럭 요소는 블럭요소와 인라인요소를 포함 시킬 수 있다. <br>
-주로 레이아웃(사용자 인터페이스) 구성 할 때 쓰인다. <br>
-구성된 대상의 요소의 높이를 자동으로 가진다.
<h2>블럭요소의 종류</h2>
<h3>div</h3>
-시멘틱 태그 외의 블럭요소 표현 할 때 쓰인다.
<div>div 블럭요소</div>
<div>div 블럭요소2</div>
<h3>header</h3>
-화면의 상단을 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<header>
header 블럭요소
</header>
<h3>footer</h3>
-화면의 하단을 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<footer>
footer 블럭요소
</footer>
<h3>nav</h3>
-메뉴를 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<nav>
nav 블럭요소
</nav>
<h3>h*</h3>
-1~6 크기 <br>
-타이틀, 강조, 콘텐츠 요소의 타이틀 <br>
-상하 밖 여백(마진)의 기본값을 가지고있다.
<h3>section</h3>
-유사한 컨텐츠끼리의 영역을 구분할 때 쓰이는 태그(컨텐츠 그룹핑) <br>
-html5 에서 새롭게 추가되었다.
<section>
section 블럭요소
</section>
<h3>article</h3>
-독립적인 컨텐츠끼리 영역을 구분할 때 쓰이는 태그
(서로 다른 컨텐츠끼리 영역 구분 ) <br>
-컨텐츠의 반복적으로 재사용되는 영역에서 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<article>
article 블럭요소
</article>
<h3>aside</h3>
-참고컨텐츠 영역을 감쌀 때 쓰이는 태그 <br>
-html5 에서 새롭게 추가되었다.
<aside>
aside 블럭요소
</aside>
<h3>ul, li</h3>
-목록을 주로 나타낼 때 쓰이는 태그 <br>
-li는 기본적으로 불릿을 가지고있다. <br>
-ui는 상하 마진(상하 밖 여백), 왼쪽 패딩(안쪽 여백)을 가지고있다.
<ul>
<li>안녕하세요.</li>
<li>공지사항입니다.</li>
<li>[필독]긴급 사항입니다.</li>
</ul>
<h3>table</h3>
-표를 구성할 때 쓰이는 태그(열, 행) <br>
-table : 표를 감싸는 태그<br>
-tr : 행을 표현<br>
-th, td : 열을 표현<br>
-thead : 표 상단<br>
-tbody : 표 본문<br>
-tfooter : 표 하단
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>안녕하세요.</td>
<td>2022-02-24</td>
</tr>
<tr>
<td>9</td>
<td>안녕하세요.</td>
<td>2022-02-23</td>
</tr>
<tr>
<td>8</td>
<td>안녕하세요.</td>
<td>2022-02-22</td>
</tr>
</tbody>
</table>
</body>
</html>표 병합 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 병합 실습</title>
</head>
<body>
<h1>표 병합 실습</h1>
실습. 화면에 제시된 내용대로 표를 구성하고 병합하여라.
<table border="1">
<theader>
<tr>
<th rowspan="2">학생</th>
<th colspan="2">교과목</th>
<th rowspan="2">평균</th>
</tr>
<tr>
<th>자바</th>
<th>CSS</th>
</tr>
</theader>
<tbody>
<tr>
<td rowspan="2">홍길동</td>
<td colspan="2">80</td>
<td>80</td>
</tr>
<tr>
<td>50</td>
<td>60</td>
<td>55</td>
</tr>
<tr>
<td>이순신</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
기록하는 삶