css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기

네 안녕하세요, 이번 포스팅에서는 마우스 커서를 셀에 올렸을 때

셀의 색깔이 변경되게 하는 방법에 대하여 알아보도록 하겠습니다.

이 부분도 시인성 향상을 위해서 사용하는 방법입니다.

그럼 어떻게 쓰는지 바로 알아보도록 하겠습니다.

이 포스팅은 이전에 썼던 포스팅과 연계를 하여 작성하는 포스팅입니다.

아래에 이전에 작성했던 포스트를 기재를 해둘 테니, 참고해 주시면 감사하겠습니다.

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

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

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

funnycoderl.tistory.com

1. 표에 마우스 커서를 올리면 셀 색깔 변경되게 하기 - hover 속성 이용

마우스 커서가 올라가고 내려감에 따라서 작용하는 것은 이벤트 속성을 활용하는 것입니다.

그중에서 hover 속성을 이용해서 만들 수 있습니다.

사용 방법은 아래와 같습니다.

tr:hover {
    background : pink;
}

이렇게 쓰시면 되는데, 보통 우리는 머리나 발 부분은 색이 변하게 설정하지 않습니다.

그래서 몸통 부분만 색이 변하게 만들 건데,

그럴 경우에는 이렇게 쓰시면 됩니다.

tbody tr:hover {
    background : pink;
}

이렇게 쓰시게 되면 몸통 부분만 색이 바뀌게 됩니다.

그럼 이걸 직접 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>
    table { /* 이중 테두리 제거 */
        border-collapse : collapse;
    }
    td, th { /* 모든 셀에 적용 */
        text-align : left;
        padding : 5px;
        height : 15px;
        width : 100px;
    }
    thead, tfoot { /* <thead>의 모든 셀에 적용 */
        background : darkgray;
        color : yellow;
    }
    tbody tr:nth-child(even) { /* 짝수 <tr>에 적용*/
        background : aliceblue;
    }
    tbody tr:hover { /* 마우스가 올라오면 pink 배경 */
        background : pink;
    }
    </style></head>
    <body>
    <h3>1학기 성적</h3>
    <hr>
    <table>
        <thead>
            <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
        </thead>
        <tfoot>
            <tr><th>합</th><th>310</th><th>249</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>

이렇게 작성을 해봤습니다.

그럼 실행 결과를 보도록 하겠습니다.

이렇게 결과도 잘 나오는 것을 확인할 수 있습니다.

여기까지 표를 꾸미는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 폼을 꾸미는 방법에 대하여 알아보도록 하겠습니다.

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

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

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

css 폼 요소 테두리 꾸미기 (0)	2023.05.08
css 폼 요소에 스타일 입히기 (0)	2023.05.08
css 표에 줄무늬 만들기 (2)	2023.05.08
css 셀에 배경색과 테두리 효과, 글자 색 변경하기 (0)	2023.05.01
css padding, text-align 프로퍼티로 셀 여백 지정 및 정렬하기 (0)	2023.05.01

개발러 L의 뻔fun한 코딩

css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기