본문 바로가기
HTML & CSS

[211020] CSS 실습

감자탈출기 2021. 10. 20. 21:58
[example1.html]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link type="text/css" rel="stylesheet" href="/static/css/ch04_1.css">
</head>
<body>
    <table>
        <colgroup>
            <col class="cell-100">
            <col class="cell-150">
            <col class="cell-200">
            <col class="cell-200">
        </colgroup>
        <thead>
            <tr>
                <th>#</th>
                <th>First</th>
                <th>Last</th>
                <th>Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry the Bird</td>
                <td></td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <table class="tbl-2">
        <tr>
            <td>An item</td>
        </tr>
        <tr>
            <td>A second item</td>
        </tr>
        <tr>
            <td>A third item</td>
        </tr>
    </table>
    <hr>
    <ul class="list-me">
        <li>An item</li>
        <li>A second item</li>
        <li>A third item</li>
    </ul>
    <hr>
    <ul class="list w-250"> <!--클래스는 여러개 지정 가능-->
        <li class="item">An item</li>
        <li class="item">A second item</li>
        <li class="item">A third item</li>
    </ul>
</body>
</html>
[ch04_1.css]

table {
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
    padding: 0.5em;
}
thead {
    border-bottom: 2px solid black;
}

/* table tr:hover {
    background-color: #e6e6e6;
} */

/* table tr:not(tr:first-child):hover {
    background-color: #e6e6e6;
} 복잡하므로 thead tbody 지정해서 쉽게 구현*/

tbody tr:hover {
    background-color: #e6e6e6;
}
.cell-100 {
    width: 100px;
}
.cell-150 {
    width: 150px;
}
.cell-200 {
    width: 200px;
}


.tbl-2 {
    width: 250px;
    border: 1px solid #e6e6e6;
}
.tbl-2 tr {
    padding-left: 9px;
}


.list-me {
    list-style-type: none;
    padding-inline-start: 0px;
}
.list-me li {
    padding: 8px;
    width: 200px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px;
}
.list-me :last-child {
    border-bottom: 1px solid #e6e6e6;
}
/* 마우스 올렸을 때 효과 */
.list-me :hover {
    background-color: #e6e6e6;
}


.list {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    list-style-type: none;
    padding-inline-start: 0px;
}
.list .item {
    border-bottom: 1px solid #e6e6e6;
    padding: 0.5em;
}
.list .item:last-child {
    border-style: none;
}
.list .item:hover {
    background-color: #e6e6e6;
}
.w-250 {
    width: 250px;
}

 

결과

'HTML & CSS' 카테고리의 다른 글

[211021] css 실습 2 (상단 메뉴, hover)  (0) 2021.10.21
[211019~20] CSS 텍스트 & 색상 & 레이아웃 스타일  (0) 2021.10.19
[211018] CSS 적용, CSS 선택자  (0) 2021.10.18
[211015] 폼 관련 태그 (Input)  (0) 2021.10.15
[211014] 표 & 영역 & 멀티미디어 & 하이퍼링크 태그  (0) 2021.10.14

'HTML & CSS' Related Articles

티스토리툴바