728x90
테이블 스타일
표를 꾸밀때 사용
(id나 class를 이용해 수정도 가능)
속성
border 테이블의 경계선
border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부
-separate 이웃한 셀의 경계선을 합치지 않고 분리하여 표시한다(기본값)
width 테이블의 가로 길이
height 테이블의 세로 길이
border-spacing 테이블 셀 사이의 거리
empty-cells 공백 셀을 그릴 것인지 여부
table-align 테이블 셀의 정렬 설정
vertical-align 수직정렬 상(top) 중(middle) 하(bottom) 지정
nth-child
n번째 자식 선택자
:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
<옵션>
odd : 홀수 선택
even : 짝수 선택
2n :두번째 마다 선택
2n + 1 : 2번째마다 선택 첫번째 요소부터
-2n + 5 : 첫번째요소부터 5번째 요소까지 2개마다 선택
n + 5 : 5번째 부터 모두 선택
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소
nth-child 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1번 스타일 -->
<style type="text/css">
#list1{
font-family: "Trebuchet MS",sans-serif;
width: 100%;
}
#list1 td, #list th{
border:1px dotted gray;
text-align: center;
}
#list1 th{
background-color: blue;
color:white;
}
#list1 tr:nth-child(2n+1) {
background-color: yellow;
}
/* #list1 tr:nth-child(odd) {
background-color: yellow;
} */
</style>
<!--2번 스타일-->
<style type="text/css">
#list{
font-family: "Trebuchet MS",sans-serif;
width: 100%;
}
#list td, #list th{
border:1px dotted gray;
text-align: center;
}
#list th{
background-color: blue;
color:white;
}
#list tr.alt td{
background-color: yellow;
}
</style>
</head>
<!-- body태그는 동일 -->
<body>
<table id="list1">
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
<tr>
<td>홍길동</td>
<td>hong@google.com</td>
</tr>
<tr>
<td>김수진</td>
<td>sujin@google.com</td>
</tr>
</table>
</body>
</html>
nth-child 참고한 블로그 : https://lalacode.tistory.com/6
[CSS]css 가상 선택자 정리 및 비교 (nth-child, nth-of-type)
CSS 선택자 정리 :nth-child(N) = 부모안에 모든 요소 중 N번째 요소 A:nth-of-type(N) = 부모안에 A라는 요소 중 N번째 요소 :first-child = 부모안에 모든 요소 중 첫번째 요소 :last-child = 부모안에 모든 요소 중
lalacode.tistory.com
끝.
728x90
'프론트엔드(Frontend) > CSS' 카테고리의 다른 글
| CSS3 레이아웃 #2 (0) | 2023.01.09 |
|---|---|
| CSS3 레이아웃 #1 (0) | 2023.01.05 |
| CSS3 박스 모델과 응용 #2 (0) | 2023.01.04 |
| CSS3 박스 모델과 응용 #1 (0) | 2023.01.04 |
| CSS3 스타일 시트 기초 #2 (0) | 2023.01.03 |