list
list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 요소</title>
<style>
/*
※대부분의 태그들은 기본 속성을 가지고 태어남.
태그의 목적마다 조금씩 다른 스타일을 가지고 있지만 대표적으로 여백요소는
대부분이 가지고 있는 스타일.
이 기본 스타일들은 레이아웃을 설정할 때 방해요인이 될 수도 있기 때문에
아예 없애고 시작하는게 레이아웃 설정이 쉬워짐.
(reset.css 주워서 사용하기. )
*/
html, body, p, div, ul , ol, li{
margin: 0px;
padding: 0px;
/*화면 밖에 블랙기호 숨어있음. */
}
ul, ol {
list-style: none;
margin: 0px 20px;
}
</style>
</head>
<body>
<!--
큰 주제 안에 여러개의 목록들이 존재 할 때 사용하는 태그.
리스트의 종류
-순서를 요구하는 목록을 작성할 때 orderlist(ol)
-순서를 요구하지 않는 목록을 작성할 때 unoderlist(ul)
ol과 ul의 자식요소에는 반드시 list item(li)만 올 수 있음.
그 외 태그는 li안에서만 작성할 수 있음.
ol과 ul에는 반드시 두개 이상의 li가 있어야 함.
하나의 내용을 정의하는 태그 : descriptionlist(dl)
dl자식요소로는
dt(description term)와
dd(description detail) 그리고
div만 올 수 있음.
다만 div는 dt와 dd 형제요소로는 올 수 없음.
div는 dt, dd를 감쌀 수 있음.
dd가 dt의 앞에 올 수는 없음.
-->
<ol>
<li>목록1번</li>
<li>목록2번</li>
<li>목록3번</li>
<li>목록4번</li>
</ol>
<ul>
<li>목록1번</li>
<li>목록2번</li>
<li>목록3번</li>
<li>목록4번</li>
</ul>
<dl>
<dt>unorderlist list</dt>
<dd>순서를 갖지 않는 목록 태그</dd>
<dd>반드시 자식요소는 li만 올 수 있음</dd>
</dl>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, numquam aut? Natus harum reprehenderit impedit excepturi distinctio ipsum fugit aliquid laborum nihil, quasi dolorem? Laudantium quaerat nulla incidunt amet sequi?</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, numquam aut? Natus harum reprehenderit impedit excepturi distinctio ipsum fugit aliquid laborum nihil, quasi dolorem? Laudantium quaerat nulla incidunt amet sequi?</p>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ducimus est veritatis tenetur aliquid sequi blanditiis accusantium odit eveniet sed veniam neque consequatur earum ab, magni ipsum, delectus nam? Fugit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ducimus est veritatis tenetur aliquid sequi blanditiis accusantium odit eveniet sed veniam neque consequatur earum ab, magni ipsum, delectus nam? Fugit.</div>
<!--p태그는 행간 존재. -->
</body>
</html>리스트 연습
practice.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습</title>
<style>
div.div1{
background-color: coral;
padding: 20px;
font-size: 0px;
/* font마다 margin 값이 있기에, 초기화 해주기 */
}
div ul li{
background-color: pink;
display: inline-block;
width: 150px;
height: 150px;
list-style: none;
/* inline-block 적용 시 list-style이 사라짐. 따라서 list-style:none 구문은 없어도 무방. */
font-size: 16px;
/* 여기서 font size 지정해주기 */
}
dd{
align-items: center;
}
dt{
font-weight: 700;
}
</style>
</head>
<body>
<div class = "div1">
<ul>
<li>
<dt>box1
<dd>
description detail1
</dd>
</dt>
</li>
<li>
<dt>box2
<dd>
description detail2
</dd>
</dt>
</li>
<li>
<dt>box3
<dd>
description detail3
</dd>
</dt>
</li>
</ul>
</div>
</body>
</html>테이블
basic.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 태그</title>
<style>
table{
border-spacing: 0px;
/*td와 th는 테이블 요소간의 여백이 생기게 됨
없애주는 resetcss요소. */
/* border-collapse: collapse인 경우
border-spacing은 0px이므로 없어도 되는 구문 */
border-collapse: collapse;
/*table의 외곽선을 한줄로 표시하는 css
기본은 seperate*/
}
table, th, td{
/*tr에 border넣지 않음. 셀에 넣어야 함*/
border:solid 2px black;
/*border
컨텐츠의 영역 외곽에 외곽선을 표시하는 css
style, weight, color를 top, left, right, bottom 에 표시하며,
그룹속성을 보통 사용.
border : style weight color
*/
}
th, td{
width: 100px;
}
</style>
</head>
<body>
<!--
테이블 태그
사이트에서 정보들을 행과 열로 이루어진 표로 구성하여 제공하는 태그
옛날에는 레이아웃을 설정하는 용도로 사용도 했지만 더 이상
레이아웃을 사용하지 않고 게시판 형태와 같은 곳에
많이 사용하고 있음.
-table : 하나의 테이브을 구성하는 container역할
-caption : 해당 태이블의 제목이나 설명
제목요소이기 때문에 가운데 정렬을 기본으로 함.
-tr : 가로열 행(tr안에는 th나 td만 올 수 있으며,
반드시 하나 이상 있어야 함. )
-td : 셀의 한 종류로서 일반 내용을 담을 때 사용.
-th : 셀의 한 종류로서 제목을 담음.
제목요소이기 때문에 가운데 정렬을 기본으로 함.
html5 새로 추가된 태그
thead = 테이블의 제목들을 묶어주는 태그
tbody = table의 일반 내용들을 묶어주는 태그
tfoot = 테이블의 마지막부분(결과물 도출)을 묶어주는 태그
위의 태그들을 사용하지 않아도 웹표준에 어긋나지 않음.
복잡한 테이블에서 레이아웃을 묶는 영도로 사용하면 되는 선택사항.
-->
<table>
<caption>점심메뉴</caption>
<tr>
<th rowspan="6">한식</th>
</tr>
<tr>
<td>간장게장</td>
<td>감자탕</td>
<td>닭갈비</td>
<td>지코바치킨</td>
</tr>
<tr>
<th colspan="4">중식</th>
</tr>
<tr>
<td>깐풍기</td>
<td>탕수육</td>
<td>짬뽕</td>
<td>우육면</td>
</tr>
<tr>
<th colspan="4">양식</th>
</tr>
<tr>
<td>파스타</td>
<td>뇨끼</td>
<td>리조또</td>
<td>피자</td>
</tr>
</table>
<div>여백</div>
<table>
<tr>
<th rowspan="2">한식</th>
<td>메뉴1</td>
<td>메뉴2</td>
</tr>
<tr>
<td>메뉴3</td>
<td>메뉴4</td>
</tr>
</table>
</body>
</html>게시판 만들기
board.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블로 게시판 만들기</title>
<style>
html, body, table, tr, th, td{
margin: 0px;
padding: 0px;
}
table{
border-spacing: 0px;
border-collapse: collapse;
}
table.freeBoard{
width: 1200px;
margin: 100px auto;
/*margin : 0px auto
컨텐츠 가운데 가로 정렬하는 가장 기본적인 방법
영역값을 제외한 나머지 값을 좌 우 margin으로 대신 해주는 방법
*반드시 영역값이 있어야 함.
*/
}
caption{
text-align: left;
font-size: 30px;
margin-bottom: 30px;
}
tr{
border-bottom: solid 1px #dddddd;
border-top: solid 1px black;
height: 50px;
/* 적용순서 : 아래쪽 tr부터 적용 */
}
td{
text-align: center;
}
.number{
width: 100px;
}
.title{
width: 700px;
}
.name{
width: 100px;
}
.date{
width: 100px;
}
.view{
width: 100px;
}
td.title{
text-align: left;
}
</style>
</head>
<body>
<table class="freeBoard">
<caption>자유게시판</caption>
<tr>
<th class = "number">No</th>
<th class = "title">제목</th>
<th class = "name">글쓴이</th>
<th class="time">작성시간</th>
<th class = "view">좋아요</th>
</tr>
<tr>
<td class = "number">1</td>
<td class = "title">테이블 영역 연습하기</td>
<td class = "name">그린컴퓨터</td>
<td class = "time">22-07-14</td>
<td class = "view">10</td>
</tr>
<tr>
<td class = "number">2</td>
<td class = "title">테이블 영역 연습하기</td>
<td class = "name">그린컴퓨터</td>
<td class = "time">22-07-14</td>
<td class = "view">10</td>
</tr>
<!-- <tr>
<td class = "number">3</td>
<td class = "title">테이블 영역 연습하기</td>
<td class = "name">그린컴퓨터</td>
<td class = "time">22-07-14</td>
<td class = "view">10</td>
</tr>
<tr>
<td class = "number">4</td>
<td class = "title">테이블 영역 연습하기</td>
<td class = "name">그린컴퓨터</td>
<td class = "time">22-07-14</td>
<td class = "view">10</td>
</tr> -->
</table>
</body>
</html>
가보자고