css -table 꾸미기

css로 table을 꾸미는 6가지 방법

1. 테두리

border 속성은 기본적으로 상속되지 않습니다. 따라서 table, tr, th td 중 어디에 테두리를 만들지 전략을 짜고 각 태그에 테두리를 달리 적용한다. 그리고 table 태그에 border-collapse: collapse 속성 값이 있어야 tr, th 태그의 border속성 디자인이 제대로 적용되기 때문에 tr, th 태그에 border 속성이 있다면 필수적으로 넣어야 한다.html5에서는 유일하게 a태그안에 블록요소가 들어가면 a태그는 자동으로 블록요소가 됩니다.

2. 배경색

교차로 색상을 바뀌게 만들어 주고 싶으면 홀수 행과 짝수 행을 각각 따로 선택하는 가상선택자를 사용하면 됩니다. tr 태그에 tr:nth-child(odd)와 tr:nth-child(even)가상 선택자를 추가하여 서로 다른 color값을 넣어주면 각 행의 색을 교대로 다르게 만들어 줍니다.

3. 마우스 커서가 셀 위에 올라가 있을 때 셀의 색상이나 커서의 모양을 바꾸기

:hover 가상 선택자를 추가해주면 됩니다. 마우스 오버 상태에서의 color가 기존의 table의 background-color와 시각적으로 어울리게끔 만들어줘 합니다. 마우스 커서의 모양을 바꾸는 것은 cursor속성을 사용하면 됩니다.

tr:hover {
    background-color: #ffc452;
    cursor: pointer;
}

4. 폰트 크기 조절 및 테두리와 텍스트간의 간격 조절

font-size를 조절을 해주고 padding을 td selector에 추가하여 여백의 미를 만들어 준다. (레이아웃 깨지지 않게 조심)

5. 테두리 둥글게 만들기

표의 겉 테두리를 둥글게 만들어주기 위해서 table태그를 div태그로 감쌉니다. table태그에 직접 둥근 테두리를 적용시키는 것은 매우 번거롭습니다. 여기에 box-shadow 속성까지 더해주어 좀더 선명한 테두리르 만들어 줍니다.

div {
    border: 1px solid #000;
    background-color: #000;
    border-radius: 16px;
    bax-shadow: inset 0 0 8px #deb13a;
    width: 160px; height: 160px;
}

6. 그립자 넣기

위에서 한 것처럼 box-shadow 속성을 사용합니다 inset을 사용해서 셀 안쪽에 그림자를 만들어도 되고, default 설정인 셀 바깥쪽에 그림자를 만들어도 된다.