๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/HTML&CSS

[ex18] CSS(Box)

๋Œ€์žฅ์ฟต์•ผ 2023. 4. 16. 12:15

ex18

 

์ „์ฒด์ฝ”๋“œ

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>

        /* ๋ฐ‘ ํ…Œ์ด๋ธ”๋„ ์ ์šฉ : #list { > .table๋กœ ๋ณ€๊ฒฝ*/
        /* id > class๋กœ ๋ณ€๊ฒฝ */
        /* ใ„ด ๋•Œ๋ฌธ์— ๋ณดํ†ต ์œ ์ผํ•ด๋„ class ์„ ํ˜ธ */
        .table {
            border: 1px solid grey;
            /* border-collapse: separate; > ๊ธฐ๋ณธ๊ฐ’ */
            border-collapse: collapse; /* ํ…Œ๋‘๋ฆฌ ํ•ฉ์น˜๊ธฐ */
            width: 800px;
            margin-top: 10px;
        }

        /* #list th, td >> ๋ผ๊ณ  ์“ฐ๋ฉด ์•ˆ๋จ */
        .table th, table.table td {
            border: 1px solid grey;
            padding: 5px;
        }



        .table .cols1 { width: 50px; }
        .table .cols2 { width: 500px; }
        .table .cols3 { width: 100px; }
        .table .cols4 { width: 100px; }
        .table .cols5 { width: 50px; }

        .table th {
            background-color: #EEE;
        }

        h1, .table th, .table td {
            color: #444
        }

        /* ์ œ๋ชฉ๋งŒ ๊ฐ€์šด๋ฐ์ •๋ ฌ */
        /* ์ œ๋ชฉ ํŒจ๋”ฉ */
        .table .cell1 { text-align: center; } 
        .table .cell2 { 
            text-align: left; padding-left: 15px;
        }

        /* .table.blue td {
            color: blue;
        } */

        .table.striped {
            border-left: 0px;
            border-right: 0px;
        }
        .table.striped th, .table.striped td {
            border-left: 0px;
            border-right: 0px;
        }

        .table.dark {
            border-color: white;
            background-color: black;
            color: white;
        }
        
        .table.dark th, .table.dark td {
            border-color: white;
            background-color: #333;
            color: white;
        }

        .table.hovertable tr:hover td {
            background-color: yellow;
            color: #444; /* ๋ฐฐ๊ฒฝ ๋…ธ๋ž€์ƒ‰์ด๋ฉด ๊ธ€์ž๊ฐ€ ์•ˆ๋ณด์—ฌ์„œ ๊ธ€์ž๋„ ๊ฒ€์ •์ƒ‰์œผ๋กœ*/
        }

        h1 {
            /* ์ œ๋ชฉ ๋ฐ‘ ๋ฐ‘์ค„์•„๋‹˜ text-decoration: underline; */
            /* border-bottom ๋ฐ‘์ค„ ๋Œ€์‹ ์œผ๋กœ ์ž์ฃผ ์‚ฌ์šฉ */
            border-bottom: 1px dashed #777;
            width: 800px;
            padding-bottom: 5px;
        }

        h1 > span {
            color: cornflowerblue;
        }

    </style>
</head>
<body>
    <!-- ex18_box.html -->

    <h1><span>๊ฒŒ</span>์‹œํŒ</h1>

    <!-- table>tr*20>td*5 -->

    <!-- table#list.table -->
    <table id="list" class="table hovertable">
        <!-- tr>th#cols$*5 -->
        <tr>
            <th class="cols1">๋ฒˆํ˜ธ</th>
            <th class="cols2">์ œ๋ชฉ</th>
            <th class="cols3">์ด๋ฆ„</th>
            <th class="cols4">๋‚ ์งœ</th>
            <th class="cols5">์ฝ์Œ</th>
        </tr>
        <!-- (tr>td.cell$*5)*20 -->

        <!-- (tr>(td.cell1{$$})+(td.cell2>lorem5)+(td.cell3>lorem1)+(td.cell4>{2023-04-$$})+(td.cell5{$$}))*20 -->
        <tr>
            <td class="cell1">01</td>
            <td class="cell2">Lorem ipsum dolor sit amet.</td>
            <td class="cell3">Lorem.</td>
            <td class="cell4">2023-04-01</td>
            <td class="cell5">01</td>
        </tr>
        <tr>
            <td class="cell1">02</td>
            <td class="cell2">Quod praesentium voluptates cum culpa!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Delectus officiis facere quibusdam! Iste.</td>
            <td class="cell3">Expedita.</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Illo magnam sit dolorem officiis?</td>
            <td class="cell3">Laudantium.</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Ad minus qui officiis dicta.</td>
            <td class="cell3">Eos!</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Neque accusamus nemo repellat ad?</td>
            <td class="cell3">At!</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Repellat beatae voluptatem porro blanditiis.</td>
            <td class="cell3">Voluptate?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Dignissimos magni possimus dolore culpa.</td>
            <td class="cell3">Maiores!</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Necessitatibus nemo suscipit dolore quae?</td>
            <td class="cell3">Eos?</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Nam, necessitatibus fuga? Ab, ratione?</td>
            <td class="cell3">Est?</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>

    </table>

    <h1>๊ฒŒ์‹œํŒ</h1>

    <table id="list2" class="table striped hovertable">
        <tr>
            <th class="cols1">๋ฒˆํ˜ธ</th>
            <th class="cols2">์ œ๋ชฉ</th>
            <th class="cols3">์ด๋ฆ„</th>
            <th class="cols4">๋‚ ์งœ</th>
            <th class="cols5">์ฝ์Œ</th>
        </tr>
        <tr>
            <td class="cell1">01</td>
            <td class="cell2">Lorem ipsum dolor sit amet.</td>
            <td class="cell3">Lorem.</td>
            <td class="cell4">2023-04-01</td>
            <td class="cell5">01</td>
        </tr>
        <tr>
            <td class="cell1">02</td>
            <td class="cell2">Quod praesentium voluptates cum culpa!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Delectus officiis facere quibusdam! Iste.</td>
            <td class="cell3">Expedita.</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Illo magnam sit dolorem officiis?</td>
            <td class="cell3">Laudantium.</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Ad minus qui officiis dicta.</td>
            <td class="cell3">Eos!</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Neque accusamus nemo repellat ad?</td>
            <td class="cell3">At!</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Repellat beatae voluptatem porro blanditiis.</td>
            <td class="cell3">Voluptate?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Dignissimos magni possimus dolore culpa.</td>
            <td class="cell3">Maiores!</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Necessitatibus nemo suscipit dolore quae?</td>
            <td class="cell3">Eos?</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Nam, necessitatibus fuga? Ab, ratione?</td>
            <td class="cell3">Est?</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>

    </table>

    <h1>๊ฒŒ์‹œํŒ</h1>

    <table id="list2" class="table dark hovertable">
        <tr>
            <th class="cols1">๋ฒˆํ˜ธ</th>
            <th class="cols2">์ œ๋ชฉ</th>
            <th class="cols3">์ด๋ฆ„</th>
            <th class="cols4">๋‚ ์งœ</th>
            <th class="cols5">์ฝ์Œ</th>
        </tr>
        <tr>
            <td class="cell1">01</td>
            <td class="cell2">Lorem ipsum dolor sit amet.</td>
            <td class="cell3">Lorem.</td>
            <td class="cell4">2023-04-01</td>
            <td class="cell5">01</td>
        </tr>
        <tr>
            <td class="cell1">02</td>
            <td class="cell2">Quod praesentium voluptates cum culpa!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Delectus officiis facere quibusdam! Iste.</td>
            <td class="cell3">Expedita.</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Illo magnam sit dolorem officiis?</td>
            <td class="cell3">Laudantium.</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Ad minus qui officiis dicta.</td>
            <td class="cell3">Eos!</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Neque accusamus nemo repellat ad?</td>
            <td class="cell3">At!</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Repellat beatae voluptatem porro blanditiis.</td>
            <td class="cell3">Voluptate?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Dignissimos magni possimus dolore culpa.</td>
            <td class="cell3">Maiores!</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Necessitatibus nemo suscipit dolore quae?</td>
            <td class="cell3">Eos?</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Nam, necessitatibus fuga? Ab, ratione?</td>
            <td class="cell3">Est?</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>

    </table>



</body>
</html>

 

ํ™”๋ฉด

๋”๋ณด๊ธฐ
Document

๊ฒŒ์‹œํŒ

๋ฒˆํ˜ธ ์ œ๋ชฉ ์ด๋ฆ„ ๋‚ ์งœ ์ฝ์Œ
01 Lorem ipsum dolor sit amet. Lorem. 2023-04-01 01
02 Quod praesentium voluptates cum culpa! Atque? 2023-04-02 02
03 Delectus officiis facere quibusdam! Iste. Expedita. 2023-04-03 03
04 Illo magnam sit dolorem officiis? Laudantium. 2023-04-04 04
05 Ad minus qui officiis dicta. Eos! 2023-04-05 05
06 Neque accusamus nemo repellat ad? At! 2023-04-06 06
07 Repellat beatae voluptatem porro blanditiis. Voluptate? 2023-04-07 07
08 Dignissimos magni possimus dolore culpa. Maiores! 2023-04-08 08
09 Necessitatibus nemo suscipit dolore quae? Eos? 2023-04-09 09
10 Nam, necessitatibus fuga? Ab, ratione? Est? 2023-04-10 10

๊ฒŒ์‹œํŒ

๋ฒˆํ˜ธ ์ œ๋ชฉ ์ด๋ฆ„ ๋‚ ์งœ ์ฝ์Œ
01 Lorem ipsum dolor sit amet. Lorem. 2023-04-01 01
02 Quod praesentium voluptates cum culpa! Atque? 2023-04-02 02
03 Delectus officiis facere quibusdam! Iste. Expedita. 2023-04-03 03
04 Illo magnam sit dolorem officiis? Laudantium. 2023-04-04 04
05 Ad minus qui officiis dicta. Eos! 2023-04-05 05
06 Neque accusamus nemo repellat ad? At! 2023-04-06 06
07 Repellat beatae voluptatem porro blanditiis. Voluptate? 2023-04-07 07
08 Dignissimos magni possimus dolore culpa. Maiores! 2023-04-08 08
09 Necessitatibus nemo suscipit dolore quae? Eos? 2023-04-09 09
10 Nam, necessitatibus fuga? Ab, ratione? Est? 2023-04-10 10

๊ฒŒ์‹œํŒ

๋ฒˆํ˜ธ ์ œ๋ชฉ ์ด๋ฆ„ ๋‚ ์งœ ์ฝ์Œ
01 Lorem ipsum dolor sit amet. Lorem. 2023-04-01 01
02 Quod praesentium voluptates cum culpa! Atque? 2023-04-02 02
03 Delectus officiis facere quibusdam! Iste. Expedita. 2023-04-03 03
04 Illo magnam sit dolorem officiis? Laudantium. 2023-04-04 04
05 Ad minus qui officiis dicta. Eos! 2023-04-05 05
06 Neque accusamus nemo repellat ad? At! 2023-04-06 06
07 Repellat beatae voluptatem porro blanditiis. Voluptate? 2023-04-07 07
08 Dignissimos magni possimus dolore culpa. Maiores! 2023-04-08 08
09 Necessitatibus nemo suscipit dolore quae? Eos? 2023-04-09 09
10 Nam, necessitatibus fuga? Ab, ratione? Est? 2023-04-10 10

'ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€ > HTML&CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ex24] CSS(์ดˆ๊ธฐ๊ฐ’ ์ดˆ๊ธฐํ™”)  (0) 2023.04.17
[ex21~23] CSS(display, float)  (0) 2023.04.17
[ex15~17] CSS(box)  (2) 2023.04.14
[ex14] CSS(text)  (0) 2023.04.14
[ex12~13] CSS(background)  (0) 2023.04.13

'ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€/HTML&CSS' Related Articles

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”