본문 바로가기
HTML & CSS

[211021] css 실습 2 (상단 메뉴, hover)

감자탈출기 2021. 10. 21. 22:34

 

<!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 class="tbl-1">
        <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>
    <hr>
    <table class="tbl-3">
        <tr>
            <th>Featured</th>
        </tr>
        <tr class="no-border">
            <td class="td-1">Special title treatment</td>
        </tr>
        <tr>
            <td class="td-2">With supporting text below as a natural lead-in to additional content</td>
        </tr>
        <tr>
            <td><button>Go somewhere</button></td>
        </tr>
    </table>
    <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>
    <hr><!--선생님거 하기-->
    <div class="card">
        <div class="card-title">
            <h2 class="card-head">Feature</h2>
        </div>
        <div class="card-content">
            <h3 class="card-sub-head">Special title treatment</h3>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <button class="card-button">Go somewhere</button>
        </div>
    </div>
    <hr>
    <table class="tbl-5">
        <tr>
            <th>Navbar</th>
            <td>Home</td>
            <td>Features</td>
            <td>Pricing</td>
            <td>Disabled</td>
            <td></td>
        </tr>
    </table>
    <hr>
    <div class="menu">
        <h3 class="menu-inline">Navber</h3>
        <div class="menu-inline">Home</div>
        <div class="menu-inline">Features</div>
        <div class="menu-inline">Pricing</div>
        <div class="menu-inline">Disabled</div>
    </div>
    <hr>
    <nav class="top-nav">
        <div class="nav-logo">Navber</div>
        <ul class="nav-list">
            <li class="nav-item active">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Features</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Pricing</a>
            </li>
            <li class="nav-item disable">
                <a href="#" class="nav-link">Disabled</a>
            </li>
        </ul>
    </nav>
</body>
</html>
.tbl-1 {
    border-collapse: collapse;
    width: 100%;
}
.tbl-1 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 지정해서 쉽게 구현*/

.tbl-1 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;
}

.tbl-3 {
    width: 100%;
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
}
.tbl-3 th {
    margin: 15px;
    padding: 15px;
}
.tbl-3 tr .td-1{
    padding: 20px 0 0 15px;
}
.tbl-3 tr .td-2{
    padding: 10px 0 20px 15px;
}
.tbl-3 th {
    background-color: #f8f6f6;
}
.tbl-3 tr:nth-child(2) {
    font-weight: bold;
}
.tbl-3 .no-border {
    border-bottom: none;
}
.tbl-3 tr button {
    padding: 10px;
    margin: 0 0 20px 15px;
}


/*선생님거 꼭하기*/
* {
    margin: 0; padding: 0;
}

.card {
    border: 1px solid rgb(223, 223, 223);
    margin: 24px;
    border-radius: 4px;
}

.card .card-title {
    border-bottom: 1px solid rgb(223, 223, 223);
    padding: 0.5em 1em;
    background-color: rgb(247, 247, 247);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.card-title .card-head {
    font-weight: 500;
}

.card .card-content {
    padding: 0.5em 1em;
}

.card-content .card-sub-head {
    font-weight: 500;
    margin: 0.5em 0;
}

.card-content .card-text {
    margin: 0 0 1em 0;
    color: rgb(70, 70, 70);
}

.card-content .card-button {
    margin: 0.5em 0;
    padding: 12px;
    font-size: 16px;
    background-color: rgb(13, 110, 253);
    color: white;
    border-style: none;
    border-radius: 4px;
}

.tbl-5 {
    margin: 0.5em;
    border-collapse: collapse;
    background-color: rgb(247, 247, 247);
}
.tbl-5 tr th {
    padding: 0.5em;
    padding-right: 1em;
    font-size: 20px;
}
.tbl-5 tr td {
    padding: 0.5em;
}
.tbl-5 tr :last-child {
    width: 100%;
}
.tbl-5 td:not(.tbl-5 tr :last-child):hover {
    background-color: #e6e6e6;
}

.menu {
    margin: 1em;
    background-color: rgb(247, 247, 247);
}
.menu :first-child {
    font-weight: bold;
    font-size: 20px;
}
.menu-inline {
    display: inline-block;
    padding: 1em;
}
.menu h3 {
    margin: 0;
    padding: 0 0.5em 0 0.5em;
}
.menu div:hover {
    background-color: #e6e6e6;
}
.menu div:nth-of-type(2) {
    color: rgb(80, 79, 79);
}
.menu div:nth-of-type(3) {
    color: gray;
}
.menu div:nth-of-type(4) {
    color: rgb(175, 172, 172);
}


.top-nav {
    width: 100%;
    background-color: rgb(247, 247, 247);
}
.top-nav .nav-logo {
    display: inline-block;
    margin: 0 1.5em; /*왼,오*/
}
.top-nav .nav-list {
    display: inline-block;
}
.top-nav .nav-item {
    display: inline-block;
}
.top-nav .nav-link {
    display: inline-block;
    color: rgb(80, 80, 80);
    text-decoration: none;
    padding: 1em 0.5em;
}
.top-nav .nav-item:not([class~=disable]) .nav-link:hover{
    background-color: rgb(223, 223, 223);
    cursor: pointer;
}

.top-nav .active .nav-link {
    color: rgb(32, 32, 32);
}
.top-nav [class~=disable] .nav-link{
    color: rgb(190, 190, 190);
}
.top-nav [class~=disable] .nav-link:hover{
    color: rgb(190, 190, 190);
    cursor: default;
    /* 커서 기본값 = 기본 화살표 */
}

 

결과

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

[211020] CSS 실습  (0) 2021.10.20
[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

티스토리툴바