<!--
목록/항목 태그는 리스트와 메뉴를 저장할 때 사용한다.
목록 태그에는 ul(블릿 목록)과 ol(순서 번호 목록)이 있고 항목 태그는 li 이다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>목록 항목 태그</title>
<style>
.apple { margin-left: 500px;}
.bn {margin-left : 500px;}
.box {margin-left: 500px;}]
</style>
</head>
<body>
<ul>
<li class="apple">사과</li>
<li class="bn">바나나</li>
<li>오렌지</li>
</ul>
<ol class="box" >
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ol>
</body>
</html>
<!--
HTML4에서는 테이블 태그로 웹 사이트의 레이아웃을 배치했지만, HTML5에서는 테이블 태그를 UI 요소로 사용한다.
데이터베이스(MySQL, Oracle, MS-SQL)에서 데이터를 가져와 웹 브라우저에 표시할 때 테이블 태그를 사용한다.
table 태그: 전체를 감싼다. (테이블의 범위를 표시한다)
thead 태그: 테이블의 머리를 표시한다.
tbody 태그: 테이블의 본문을 표시한다.
tr 태그: 테이블의 행을 표시한다.
th 태그와 td 태그: 테이블의 열을 표시한다.
ul과 table 태그의 둘다 레이아웃 태그지만 table태그는 창크기 변화시 프레임 변화가 없음. 표를 만들 때 table태그사용.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>테이블 태그</title>
<style>
*{margin: 0; padding: 0;}
ul{margin-top: 50px;}
ul li {list-style:none; float:left; border: 1px solid #e2e2e2; }
table{border-collapse: collapse;}
td {border: 1px solid #e2e2e2; }
</style>
</head>
<body>
<table>
<tr> <!-- 첫번째 행-->
<td>첫번째 열</td>
<td>두번째 열</td>
<td>세번째 열</td>
</tr>
<tr> <!-- 두번째 행-->
<td>첫번째 열</td>
<td>두번째 열</td>
<td>세번째 열</td>
</tr>
</table>
<ul>
<li>첫번째 열</li>
<li>두번째 열</li>
<li>세번째 열</li>
</ul>
<br><br>
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>등록일</th>
</tr>
</thead>
<tbody>
<tr> <!-- 첫번째 행-->
<td>1</td>
<td>안녕하세요</td>
<td>홍길동</td>
<td>2021-07-05</td>
</tr>
<tr> <!-- 두번째 행-->
<td>2</td>
<td>반갑습니다</td>
<td>김갑수</td>
<td>2021-07-06</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--
※ 박스(태그)의 유형은 블록형과 인라인-블록형, 인라인형으로 나뉜다.
ⓐ블록형 박스: 대부분의 태그는 블록형 박스이다. 박스의 너비값이 100%이며, 줄바꿈을 한다. 레이아웃에 관련된 스타일시트(width, height, margin, padding 등)가 잘 적용된다.
ⓑ인라인-블록형 박스:<img>가 해당된다. 박스의 너비값이 콘텐츠의 너비값과 동일하다. 박스의 배치가 좌에서 우로 배치(박스와 박스 사이에 여백이 발생)된다. 레이아웃에 관련된 스타일시트가 적용된다.
ⓒ인라인형 박스: <strong>, <em>, <mark>, <sup>, <sub>, <address>, <a>, <span> 등은 너비값이 웹 콘텐츠의 너비값과 동일하며, 박스의 배치는 좌에서 우로 배치된다. 레이아웃 관련 스타일시트가 잘 적용되지 않는다.
단 display 속성을 이용하여 박스유형을 바꿀 수 있다.
대부분의 <a>태그는 display: block 속성을 이용해 박스유형을 바꾼다. <span>은 박스유형을 거의 바꾸지않음.
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>공간 분할 태그</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;700&display=swap');
div { height: 100px; background: #fc0;}
span { height: 100px; background: #f00;}
p { font-family: 'Noto Sans KR', sans-serif; font-size:42px; font-weight: 100;}
.h { display:inline; font-weight: 700; background: #fff;}
article {width: 300px; height: 450px; background: #fffcce;}
article h3 { font-size: 30px; color: rgb(158, 77, 29); text-align: center; padding-top: 20px;}
.shiba {background: burlywood;}
article div { width: 90%; height:300px; margin: 0 auto; background: none;}
article div img { width: 100%;}
article div p { font-size: 16px;}
article div p span { color: rgb(126, 61, 35); }
article a {display:block; width:50%; margin:0 auto;padding: 10px; color: white; text-align: center; background: brown;}
</style>
</head>
<body>
<!--
공간 분할 태그: div(블락형), span(인라인형)
과거에는 웹페이지의 공간을 분할하지 않았지만, HTML5에서는 레이아웃을 배치할 때 테이블 태그를 사용하지 못하도록 지침했기 때문에 레이아웃을 구성할 때 다른 방법이 필요했다. 공간을 분할해야 레이아웃을 구성할 수 있기 때문에 웹페이지는 공간 분할 태그를 사용하여 웹페이지를 나눈다.
인라인형 박스는 블록형 박스로 감싸야 한다
.-->
<div>div 태그: 블록형 박스</div>
<span>span 태그: 인라인형 박스</span>
<p>Project <span class="h">HTML5</span></p>
<article>
<h3>강아지</h3>
<div>
<img src="./imgs/shiba.jpg" alt="시바">
<p><span class="shiba">시바</span>는 고집이 세고 <strong>귀엽다</strong>.</p>
</div>
<a href="#">자세히 보기</a>
</article>
</body>
</html>
'Coding' 카테고리의 다른 글
| html 선수학습(6) (0) | 2021.07.08 |
|---|---|
| html 선수학습(5) (0) | 2021.07.07 |
| html 선수학습(3) (0) | 2021.07.05 |
| html 선수학습(2) (0) | 2021.07.01 |
| CSS 선수학습 (0) | 2021.06.30 |