whatisthis?
<PROJECT> Importance Of Planning-2. html 작성 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title> Importance Of Planning </title>
<style>
ul{
list-style: none;
}
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<h1> Importance <br> Of <br> Planning <h1>
<nav>
<ul>
<li><a href="21-8.html">AUGUST</a></li>
<li><a href="21-9.html">SEPTEMBER</a></li>
<li><a href="21-10.html">OCTOBER</a></li>
<li><a href="21-11.html">NOVEMBER</a></li>
<li><a href="21-12.html">DECEMBER</a></li>
</ul>
</nav>
</header>
<article>
<h1>2021 AUGUST</h1>
<table style="width:60%;">
<caption>08</caption>
<thead>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
<td>blank</td>
</tr>
<tr>
<td colspan="7">blank</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">COUNT</td>
<td colspan="5">___DAYS</td>
</tfoot>
</table>
</article>
<footer>
<div> thisisyjin mywebproject.tistory.com </div>
</footer>
</body>
</html>1차 작성한 코드.
1. h1태그에서 줄 띄기를 할때 <br>태그를 이용했다.
- <p>태그를 하는 순간 단락이 되고, 의미를 가진 덩어리가 되므로 여기서는 <br>로 단순하게 한줄을 띄었다.
2. 이 프로젝트에서는 웹사이트의 기본적인 레이아웃을 참조하여 작성했다.
<header> - <nav> - <article> - <footer> 태그를 사용했다.
3. nav태그가 오른쪽으로 가도록 하기 위해선 어떻게 해야할지 고민중이다.
html 문서에서는 header태그가 nav태그보다 먼저 나오는데,
지난번에 했던대로 grid를 사용했을때 어떤 결과가 나올지 .. CSS 작성시 제대로 알아보겠다.
4. nav 태그와 div 태그의 차이.
nav는 링크를 navigator부분으로 묶어주는 느낌. 그런데 block 단위로 구분을 안해줌.
nav를 사용해서 줄 띄기를 할 수 있을까? ->
nav를 이용한 것과 div - ul(또는 ol)을 이용한 것의 차이는?
header,nav,section,article 태그의 차이 - div태그가 '의미'를 가진 것임.
5. 간단한 css는 미리 몇개만 적어봤다.
- <ul>태그의 점 없애기 -> css적용시 list-style: none;
- table은 css를 적용 안하면 그냥 선이 그어져있지 않음.
table에 스타일 적용 방법 두가지1. <table border="1">2. <style> 태그 안에 선택자를 table, th, td로 하여 border:1px; 입력
| table, th, td{ border: 1px solid black; } |
6. 행과 열에 대해 헷갈리지 않도록 정리해보자.
행과 열 구분하기. 행은 row / 열은 column
행은 ㅡ (가로로) / 열은 세로로 읽음
ㅡ 1행 ㅣ ㅣ ㅣ
ㅡ 2행 A열 B열 C열
ㅡ 3행
7. <table>태그
기본 구조는 한줄에해당하는거 쭉 적고나서 tr(row,즉 행)으로 묶는다고 생각하면 된다.
<tr> - <td> <td> <td> - </tr>
<tr> - <td> <td> <td> - </tr>
이런식으로 작성하면 1행, 2행에 대한 내용이 작성된것.
td = data / tr = row(행) / th = header
table도 구조를 가질 수 있음
<thead> <tbody> <tfoot>
주로 thead에는 th가 포함됨
만약 table에 아무내용이 없다면
width, height를 지정해줘야 표의 형태로 나옴.
+) table의 column(열)들을 그룹지어줄수도 있는데,
<colgroup>태그 이용.
<col span="2"> -> col=column(열)이고, span은 폭, 길이 라는 뜻. 2개의 열을 묶어버림
앞에서부터 두개의 열이 묶임.
예 ->
| <tr> <th> one </th> <th> two </th> <th> three </th> </tr> |
이였다면, one과 two는 col span="2"에 의해 같은 그룹으로 묶인 것.
반면에 남은 하나는 그냥 <col> 만 입력하면 됨.
++) 열을 합치는 방법 = colspan
<td colspan="합칠 셀 개수"> 만약 th라면 td대신 th라 쓰면 된다.
반대로, 행을 합치려면
<td rowspan="합칠 셀 개수''>
+++) 테이블 왼쪽정렬 = float:left (또는 right)
가운데정렬시 table선택자의 margin-left와 margin-right를 auto로 설정
++++) padding설정시 th, td에 적용하기.
table 너비 설정시 table태그에 style="width:400px" 추가하기
<2차 코드 작성>
-테이블에 체크박스 추가
-테이블 너비 조정
-날짜가 달마다 달라지도록 -> 아마 js나 php중에 사용될 것 같다
'PROJECT > WEB' 카테고리의 다른 글
| Interior Sheets Project - Day 01 (0) | 2022.02.11 |
|---|---|
| Project) HTML Twitter Mark-up Challenge - (2) (0) | 2021.11.30 |
| Project) HTML Twitter Mark-up Challenge - (1) (0) | 2021.11.22 |
| <PROJECT> Importance Of Planning-2(2) css 개요 작성 + 자바스크립트 (0) | 2021.08.29 |
| <PROJECT> Importance Of Planning-1.개요 (2) | 2021.08.24 |
