HTML&CSS 6(list, table)

Kyungoh Kang·2020년 11월 23일
0

wecode15

목록 보기
6/20

List, Table

HTML에서 리스트 만드는법(list 태그)
<ul>
<li> 내용
</ul>
li태그에 내용을 입력하고 ul태그로 감싼다.
cf) ul = unordered list 나는 이렇게 알아놓으니까 안헷갈렷다.
ul로 감싸면 태그 이름과 같이 정렬이 안된? 리스트가 만들어진다. 정렬된 리스트도 만들 수 있다.
<ol>
<li> 내용
</ol>

리스트 스타일을 없애고 보더를 이용해 디자인할수도 있다.

  • list-style: none;
위와같은 코드를 쓰면 리스트 앞의 숫자나 점이 없어진다. 그후 border-left를 쓰고 마진과 패딩 값을 조절 하게되면 이렇게 만들 수 있다.


## Table
<th><td><tr><tbody><table><thead>전부 테이블 관련 태그들이다. 이름을 알면 무슨 기능을 하는지 알기 쉬운데 th = table header, td = table data, tr = table row 등이다. 재미있는 것은 테이블 태그중 열(column)관련 태그가 없는데 이것은 테이블을 만들 때 행을 만들고 거기에 내용을 채워넣는 식으로 테이블이 만들어져서 굳이 필요가 없는 것 같다.
테이블 예시)
<table> <tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
&kt;td>Row 2, column 2</td>
</tr>
</table>

Row 1, column 1 Row 1, column 2
Row 2, column 1 Row 2, column 2

여기서 각 행의 첫번째 열을 <th>를 이용해 헤더로 만들 수 있다. 테이블 헤더는 가운데 정렬이 되고 글씨가 두꺼워진다.
Row 1, column 1 Row 1, column 2
Row 2, column 1 Row 2, column 2

만약 테이블의 선이 맘에 들지 않는다면 css에서 border를 이용해 선 스타일, 두께, 색깔을 바꿀 수 있다. 또한 rowspan, colspan을 이용하면 행과 열의 병합도 가능하다.

0개의 댓글