3일차에는 표를 만드는 table 태그, pseudo-class 중 nth-child와 nth-of-type에 대해서 배웠고, css 속성 중 float에 대해서 배웠다.
table
옛날에는 구조를 잡을 때 table 태그를 사용했는데, 지금은 구조를 잡을 때 잘 사용하지는 않는다. 표를 만들 때 사용하고, 웹 접근성을 위해서 작성해야 되는 태그들이 있다.
<table>
<caption>
테이크아웃커피 비교대상 제품
</caption>
<thead>
<tr>
<th scope=col colspan=2>분류</th>
<th scope=col>브랜드명</th>
<th scope=col>기본 사이즈</th>
<th scope=col>제품명</th>
<th scope=col>가격(원)</th>
</tr>
</thead>
<tfoot>
<!-- 이곳에는 tfoot을 쓸 일이 없었음 -->
</tfoot>
<tbody>
<tr>
<th scope=col rowspan=2>해외커피브랜드</th>
<th scope=row>미국</th>
<td>스타벅스커피</td>
<td>Tall</td>
<td>아메리카노</td>
<td>3,900</td>
</tr>
<tr>
<th scope=row>캐나다</th>
<td>팀홀튼</td>
<td>small</td>
<td>아메리카노</td>
<td>1,400</td>
</tr>
<tr>
<th scope= row colspan=2 rowspan=4>
국내 커피 브랜드
</th>
<td>엔제리너스 커피</td>
<td>small</td>
<td>아메리카노</td>
<td>3,600</td>
</tr>
<tr>
<td>이디야 커피</td>
<td>One size</td>
<td>아메리카노</td>
<td>2,500</td>
</tr>
<tr>
<td>카페베네</td>
<td>Regular</td>
<td>아메리카노</td>
<td>3,800~4,500</td>
</tr>
<tr>
<td>탐앤탐스 커피</td>
<td>Tall</td>
<td>아메리카노</td>
<td>3,600</td>
</tr>
</tbody>
</table>- 웹 접근성을 위해서
<caption>태그를 이용해서 표의 제목을 달아준다. - 구조를 구분할 수 있는 표라면
thead, tbody, tfoot태그를 이용해서 구분해준다. (tbody만 있는 표는 생략이 가능하다) <th>태그에는 scope 속성을 이용해서 읽어주는 방향을 설정해줘야 된다.tfoot태그는thead태그 밑에 적어도 브라우저에서는tbody아래에 위치하게 된다.colspan,rowspan은 셀을 합치는 속성rowspan=n: n개의 행을 합치는 것 (행을 합치는 것이기 때문에 세로 방향으로 늘어난다)colspan=n: n개의 열을 합치는 것 (열을 합치는 것이기 때문에 가로 방향으로 늘어난다)
- table에는 css 속성으로
border-collapse: seperate;가 기본값이기 때문에 border 사이에 간격이 생긴다. - 간격을 없애주기 위해서는 table 태그에
border-collapse: collapse;를 적용해야 된다.
table {
border-collapse: collapse;
}
th {
border: 1px solid #000;
}
td {
border: 1px solid #000;
}
float
- 웹 요소를 문서 위에 떠있게 만든다. float를 시키면 위로 뜨기 때문에 아래에 있는 것들이 끌려 올라오게 된다.
- float를 지정하면 width 값은 콘텐츠를 표시할 때 필요한 만큼만 차지하고 다른 요소가 들어올 만큼의 공간을 비워둔다.
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>.box1 {
padding: 20px;
margin-right: 10px;
background: #ffd800;
}
.box2 {
background: #0094ff;
padding: 20px;
margin-right: 10px;
}
.box3 {
background: #00ff21;
padding: 20px;
}
.box4 {
background: #fff;
padding: 20px;
border: 1px solid #000;
}
.box1 {
padding: 20px;
margin-right: 10px;
background: #ffd800;
float: left;
}
.box2 {
background: #0094ff;
padding: 20px;
margin-right: 10px;
}
.box3 {
background: #00ff21;
padding: 20px;
}
.box4 {
background: #fff;
padding: 20px;
border: 1px solid #000;
}
- float를 적용하면 이렇게 아래에 있는 box2 요소가 끌려 올라가게 된다.
clear: both;속성을 이용하면 끌려 올라가지 않게 만들 수 있다.
.box1 {
padding: 20px;
margin-right: 10px;
background: #ffd800;
float: left;
}
.box2 {
background: #0094ff;
padding: 20px;
margin-right: 10px;
clear: both;
}
.box3 {
background: #00ff21;
padding: 20px;
}
.box4 {
background: #fff;
padding: 20px;
border: 1px solid #000;
}
- 자식 요소가 모두 float 되었을 경우, 부모 요소의 height 값이 지정되어 있지 않을 경우, height 값은 0이 되기 때문에 형제 요소가 끌려 올라오게 된다.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="bro">형제요소</div>li {
list-style: none;
}
li:nth-child(1) {
background-color: red;
}
li:nth-child(2) {
background-color: blue;
}
li:nth-child(3) {
background-color: yellow;
}
li:nth-child(4) {
background-color: green;
}
.bro {
background-color: orange;
}
li {
list-style: none;
}
li:nth-child(1) {
background-color: red;
float: left;
}
li:nth-child(2) {
background-color: blue;
float: left;
}
li:nth-child(3) {
background-color: yellow;
float: left;
}
li:nth-child(4) {
background-color: green;
float: left;
}
.bro {
background-color: orange;
}
- li가 float 되었고, ul에는 height 값이 따로 지정되어 있지 않기 때문에 형제 요소인 div가 끌려 올라왔다.
- ul에 height 값을 줄 경우에는 끌려 올라오지 않는다.
li {
list-style: none;
}
ul {
height: 30px;
}
li:nth-child(1) {
background-color: red;
float: left;
}
li:nth-child(2) {
background-color: blue;
float: left;
}
li:nth-child(3) {
background-color: yellow;
float:left;
}
li:nth-child(4) {
background-color: green;
float: left;
}
.bro {
background-color: orange;
}
처음에는 colspan, rowspan이 col방향 row 방향으로 합쳐지는 것이라고 생각했었다. 그래서 "왜 rowspan인데 세로 방향으로 합쳐지는거지?"라고 생각했는데, 알고 보니 행과 행을 합치는 것이라서 세로 방향으로 늘어나는 것을 알게 됐고, 이해할 수 있게 됐다.
그리고 float를 배우면서 찾아보니, float를 현재는 많이 사용하지 않고, flex나 grid를 사용한다고 하는데... 음... 배워보니 왜 float를 많이 사용하지 않는지 알겠다. float 속성을 적용하기 위해서는 부모 요소의 값을 지정해줘야 되고, 끌려 올라가지 않게 clear를 줘야 되고, overflow라든가, clearfix 클래스를 만들어서 사용하거나 등등 너무 복잡한 것 같다. 그래서 그런가... float를 이해하는 게 너무 어려웠다.
경험한 것을 기록