css 표에 줄무늬 만들기

네 안녕하세요 이번 포스팅에서는 표에 줄무늬를 만들어보려 합니다.

표에 줄무늬를 만드는 이유는 표가 단색으로만 되어있으면 은근히 시인성이 떨어집니다.

그래서 시인성을 높이기 위해서 사용합니다.

그럼 지금부터 어떻게 사용하는지 알아보도록 하겠습니다.

그리고 해당 css를 적용시킬 표는 저의 이전 포스팅에 표 기본 템플릿이 있는데,

아래에 링크를 기재를 해둘테니 참고하여 주시면 감사하겠습니다.

2023.04.24 - [html, css, 자바스크립트/css] - css 표 꾸미기 프로퍼티에 대하여 알아보기

css 표 꾸미기 프로퍼티에 대하여 알아보기

css 표 꾸미기 프로퍼티에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 표를 꾸밀 때 쓰이는 프로퍼티에 대하여 알아보도록 하겠습니다. 우리가 웹 페이지를 볼 때 박스나 리스트 말고 또

funnycoderl.tistory.com

1. 표에 줄무늬 만들기 - 상속 이용

표에 줄무늬를 만드는 방법은 의외로 간단합니다.

바로 상속을 이용하면 됩니다.

이런 식으로 말이죠.

tr:nth-child(odd) {
    background : aliceblue;
}

이렇게 쓰게 되면 해당 표의 tr 태그 안에 있는 홀수 번째 줄들은 모두 색이 바뀌게 되면서 줄무늬처럼 보이게 됩니다.

반대로 짝수번째 행의 색을 바꾸고 싶으시다면 괄호 안에 even을 쓰시면 됩니다.

그럼 이제 이걸 html 코드에 적용시켜보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>표에 줄무늬 만들기</title>
    <style>
        tr:nth-child(odd) {
            background : aliceblue;
        }
    </style>
</head>
<body>
    <h3>2023 1학기 성적</h3>
    <hr>
    <table>
        <thead>
            <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
        </thead>
        <tfoot>
            <tr><th>합</th><th>175</th><th>169</th></tr>
        </tfoot>
        <tbody>
            <tr><td>최민수</td><td>80</td><td>70</td></tr>
            <tr><td>박보영</td><td>95</td><td>99</td></tr>
        </tbody>
    </table>
</body>
</html>

이렇게 작성을 해봤고,

이제 결과를 보도록 하겠습니다.

각각의 홀수 번째 tr 태그들이 모두 다른 색으로 적용이 된 것을 볼 수 있습니다.

다음 포스팅에서는 마우스가 올라갔을 때 셀의 배경색을 바꾸는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 폼 요소에 스타일 입히기 (0)	2023.05.08
css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기 (2)	2023.05.08
css 셀에 배경색과 테두리 효과, 글자 색 변경하기 (0)	2023.05.01
css padding, text-align 프로퍼티로 셀 여백 지정 및 정렬하기 (0)	2023.05.01
css width, height 프로퍼티로 표 크기 제어하기 (0)	2023.05.01

개발러 L의 뻔fun한 코딩

css 표에 줄무늬 만들기