๐ ์ด๋ก
Live Server : ๊ฒฐ๊ณผ ๋ด์ฉ์ ๋ฏธ๋ฆฌ(์ฆ์) ๋ณด์ฌ์ฃผ๋ ํ์ฅ ํ๋ก๊ทธ๋จ
Elm Emmet : ์ฝ๋๋ฅผ ๋น ๋ฅด๊ฒ ์ ๋ ฅํด์ฃผ๋ ํ์ฅ ํ๋ก๊ทธ๋จ
Auto Rename Tag : ์๋ค ํ๊ทธ๋ช ์ ๊ฐ๊ฒ ํด์ฃผ๋ ํ์ฅ ํ๋ก๊ทธ๋จ
inline / block
table , tr ์ค ๋ง๋ค๊ธฐ, td ์นธ ๋ง๋ค๊ธฐ
shift + art + ํ์ดํ : ์ค ๋ณต์ฌํ๊ธฐ
์ ํ์ ์ข ๋ฅ : id, class, name, tag, ๊ธฐํ ์ ๊ทผ์
# / id : ์ค๋ณต ์ฌ์ฉ ๋ถ๊ฐ ( ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ฌ์ฉ ๊ฐ๋ฅ)
# class ์ค๋ณต ์ฌ์ฉ ๊ฐ๋ฅ
dix.box : ํด๋์ค ์๋์์ฑ
ctrl + ์ฌ๋์ฌ : ์ฃผ์์ฒ๋ฆฌ
body {
width : 400px;
border : 1px solid red;
}
#table1{
width: inherit; /* 100 % */ ๋ถ๋ชจ์ ์๋์ 100%
background-color: antiquewhite;
}
๐table ์ค์ต
css
.wrap {
position: fixed;
width:480px;
height: 100%;
border: 1px solid red;
background: url("../img/59.PNG") no-repeat;
background-size: 100% 100%;
top : 0; left: 0
}
.wrap .box {
margin-top : 26%;
margin-left: 10%;
width: 81%; height: 70%;
background-color: rgb(255, 238, 238);
border-radius: 15px;
overflow: auto;
}
.table1{
width: 100%;
font-size: 15px;
}
td {
background-color: #fff;
width: 35%;
text-align: center;
border-bottom : 1px solid rgb(203, 109, 109);
padding: 10px;
}
.time {
width: 10%;
}
caption{
padding: 20px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: brown;
}
.gap{
width: 10%;
background-color: rgb(255, 255, 255);
}
.t-main > .time, .t-main > .cont {
background-color: rgb(255, 183, 183);
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์๊ฐ ๊ด๋ฆฌ</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="wrap">
<div class="box">
<table class="table1">
<caption> ๋์ ์๊ฐํ...</caption>
<tr class="t-main">
<td class="time">์๊ฐ</td>
<td class="cont">๋ด์ฉ</td>
<td class="gap">๐</td>
<td class="time">์๊ฐ</td>
<td class="cont">๋ด์ฉ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
<tr class="">
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
<td class="gap"></td>
<td class="time">AM 01:00</td>
<td class="cont">์ผ์ด๋๊ธฐ</td>
</tr>
</table>
</div>
</div>
</body>
</html>