CSS STEP 7 - BOX — Developer Story House

728x90

★ CSS 박스 모델, Box Model

모든 태그는 사각형으로 랜더링(출력) 된다.
태그가 화면에 출력 될 때 공통된 성질에 관련된 정책(모델)
1. border
2. width, height
3. padding
4. margin

■ 1. 테두리, border

모든 태그는 자신의 영역을 가진다.
영역이 항상 사각형이다. > 테두리
테두리 > 표현 O, 표현 X
border-style : solid, dashed, dotted를 자주사용함.

<style>
  #box2 {
            border-color: black; /* 선의 색상 */
            border-width: 5px; /* 선의 두께 */
            border-style: dashed; /* 선의 종류  solid, dashed, dotted, bubble, inset ...*/
  }
        
  /* 간단하게 작성 하면 */
  #box3 {
            border : 1px solid blue;
  }
  
  /* 4개의 테두리를 모두 다른 조건 */
  #box4 {
            border-top : 1px solid blue;
            border-right : 5px solid red;
            border-bottom : 10px solid yellow;
            border-left : 20px solid green;
  }
  
  /* 4개의 테두리 색을 다르게 하는 조건 */
  /* 가로 세로를 다르게 하려면, border-color : red yellow; */
  #box5 {
            border-width : 10px;
            border-style: solid;
            border-color: red yellow blue orange;
  }
  
  /* 텍스트 박스에 적용 */
  .txt {
        outline: none;
        border: 5px solid gray;
    }

    .txt:focus {
        background-color: yellow;
    }
        
        
</style>
<body>
    
    <h1>박스 모델</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    <hr>
    <div id="box4" class="box">상자4</div>
    <hr>
    <div id="box5" class="box">상자5</div>
    <hr>

    <input type="text" class="txt">

</body>

■ 2. width, height

너비, 높이를 지정
width : 개체의 너비
height : 개체의 높이
블럭 태그 : width/height 적용 가능
인라인 태그 : width/height 적용 불가능
width+height : 콘텐츠 영역의 크기(O), 상자의 크기(X)
min-height, min-width : 내용물이 많지 않으면, 그 사이즈를 유지하고, 오버플로우가 발생되면 오토로 자동으로 늘어남
max-height, max-width : 오버플로우가 발생되면, max사이즈만큼만 유지되고, 오버플로우 발생

<style>
    .box {
        border : 10px solid black;
    }

    #box2 {
        border-color: blue;
        /* width: 100%;
        height: auto; */
        width : 300px;
        height: 200px;
    }
     /*
        블럭태그
        - 너비 : 100%
        - 높이 : 내용물
        - width/height 적용 가능

        인라인태그
        - 너비 : 내용물
        - 높이 : 내용물
        - width/height 적용 불가능
    */
    #div1 {
        background-color: yellow;
        width : 200px;
        height: 200px;
    }

    #span1 {
        background-color: yellow;
        width : 200px;
        height: 200px;
    }
</style>
<body>
	<h1>블럭태그</h1>
    <div id="div1">블럭 태그</div>

    <h1>인라인태그</h1>
    <span id="span1">인라인 태그</span>

    <h1>박스 모델</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>

■ 3. padding, margin

padding : 테두리 > 안쪽 여백
margin : 테두리 > 바깥쪽 여백
블럭 태그 간격 조절 : <br> 태그 금지 > margin 사용
인라인 태그 간격 조절 : <br> 태그 사용
ex) padding을 주었을 경우

<style>
.box {
        border : 1px solid black;
        width : 200px;
        height : 150px;
    }

    #box2 {
        padding: 20px;
        /* 이런식으로 패딩의 방향을 따로 줄 수 있음
        padding-top : 0px;
        padding-right : 0px;
        padding-bottom : 0px;
        padding-left : 0px;
        */
        /* 간편하게 다 넣어도 방향대로 줄 수 있음  
        padding : 10px 20px 0px 20px; */
    }

</style>
<body>

    <h1>박스 모델</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

</body>

ex) margin을 넣었을 경우

<style>
#box2 {
    margin : 20px;
}

</style>

<body>

    <h1>박스 모델</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>

■ 테이블에 적용한 예

border-collapse : collapse; : 테두리를 합치는 것
hover : 마우스 커서가 갔을 때 색상이 변하도록 하는 것

<!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 {
            border : 1px solid gray;
            border-collapse: collapse;
            width : 800px;
            margin-top : 10px;
        }

        #list th, td {
            border : 1px solid gray;
            padding : 5px;
        }

        #list #cols1 { width: 50px;}
        #list #cols2 { width: 500px;}
        #list #cols3 { width: 100px;}
        #list #cols4 { width: 100px;}
        #list #cols5 { width: 50px;}

        #list th {
            background-color: #EEE;
        }

        h1, #list th, #list td {
            color : #444;
        }

        #list td { text-align: center;}
        #list .cell2 {text-align: left; padding-left: 15px;}

    </style>
</head>
<body>
    
    <h1>게시판</h1>

    <!-- table>tr*20>td*5 -->
    <!-- table#list.table -->
    <table id="list" class="table">

        <!-- tr>td#cols$*5 -->
        <tr>
            <th id="cols1">번호</th>
            <th id="cols2">제목</th>
            <th id="cols3">이름</th>
            <th id="cols4">날짜</th>
            <th id="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">Aut sit alias cumque minima.</td>
            <td class="cell3">Totam.</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Ipsum repudiandae assumenda repellendus provident?</td>
            <td class="cell3">Quas?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Molestias nobis voluptatem cumque quasi!</td>
            <td class="cell3">Culpa!</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Incidunt culpa tenetur rerum tempore.</td>
            <td class="cell3">Odio.</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Sed dicta sapiente placeat soluta.</td>
            <td class="cell3">Ducimus?</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Quibusdam nam quasi sed saepe.</td>
            <td class="cell3">Magni.</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Fugit facilis odit molestias minus?</td>
            <td class="cell3">Delectus!</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Iste reiciendis aut eos molestiae.</td>
            <td class="cell3">Beatae.</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Nostrum dolores rem eveniet similique.</td>
            <td class="cell3">Vero?</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>
    </table>
</html>

전체 소스코드

<!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>

        .table {
            border: 1px solid grey;
            border-collapse: collapse;
            
            width: 800px;
            margin-top: 10px;
        }

        .table th,td{
            border: 1px solid grey;
            /* border를 두개를 써서 줄이 2개가 됐기 때문에 table에서 collaspe로 테이블 줄을 하나로 합친다 */
            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 td { 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 {
            background-color: yellow;
        }

    </style>
</head>
<body>
    
    <h1>게시판</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">Est blanditiis qui ad aliquid!</td>
            <td class="cell3">Sequi?</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Optio, modi. Quo, animi alias?</td>
            <td class="cell3">Cumque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Autem saepe repellat cum rem.</td>
            <td class="cell3">Consectetur?</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Illo doloribus quas ratione in.</td>
            <td class="cell3">Incidunt?</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Atque at esse incidunt eos.</td>
            <td class="cell3">Similique.</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Doloremque ipsa magni fugiat quibusdam!</td>
            <td class="cell3">Nihil!</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Dolorem molestias amet consequatur doloribus!</td>
            <td class="cell3">Dolores.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Consectetur saepe suscipit explicabo delectus?</td>
            <td class="cell3">Libero?</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Ea consequatur sit accusantium ad?</td>
            <td class="cell3">Officiis.</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>
        <tr>
            <td class="cell1">11</td>
            <td class="cell2">Quae rem vero debitis nemo.</td>
            <td class="cell3">Ipsam!</td>
            <td class="cell4">2023-04-11</td>
            <td class="cell5">11</td>
        </tr>
        <tr>
            <td class="cell1">12</td>
            <td class="cell2">Eveniet temporibus sunt culpa fugiat?</td>
            <td class="cell3">Enim.</td>
            <td class="cell4">2023-04-12</td>
            <td class="cell5">12</td>
        </tr>
        <tr>
            <td class="cell1">13</td>
            <td class="cell2">Adipisci at quasi omnis quia?</td>
            <td class="cell3">Provident.</td>
            <td class="cell4">2023-04-13</td>
            <td class="cell5">13</td>
        </tr>
        <tr>
            <td class="cell1">14</td>
            <td class="cell2">Architecto illum aliquam iure quae.</td>
            <td class="cell3">Sit.</td>
            <td class="cell4">2023-04-14</td>
            <td class="cell5">14</td>
        </tr>
        <tr>
            <td class="cell1">15</td>
            <td class="cell2">Et esse deleniti adipisci molestiae!</td>
            <td class="cell3">Praesentium?</td>
            <td class="cell4">2023-04-15</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">16</td>
            <td class="cell2">Aut sint non tempore eum.</td>
            <td class="cell3">Cupiditate.</td>
            <td class="cell4">2023-04-16</td>
            <td class="cell5">16</td>
        </tr>
        <tr>
            <td class="cell1">17</td>
            <td class="cell2">Quos dignissimos facere vitae aliquam?</td>
            <td class="cell3">Quos?</td>
            <td class="cell4">2023-04-17</td>
            <td class="cell5">17</td>
        </tr>
        <tr>
            <td class="cell1">18</td>
            <td class="cell2">Adipisci ipsum laboriosam quia eius?</td>
            <td class="cell3">Quia.</td>
            <td class="cell4">2023-04-18</td>
            <td class="cell5">18</td>
        </tr>
        <tr>
            <td class="cell1">19</td>
            <td class="cell2">Laboriosam, inventore iusto? Accusantium, quibusdam.</td>
            <td class="cell3">Eos.</td>
            <td class="cell4">2023-04-19</td>
            <td class="cell5">19</td>
        </tr>
        <tr>
            <td class="cell1">20</td>
            <td class="cell2">Sint modi neque a corrupti.</td>
            <td class="cell3">Reiciendis!</td>
            <td class="cell4">2023-04-20</td>
            <td class="cell5">20</td>
        </tr>


    </table>


    <h1>게시판</h1>

    <table id="list2" class="table striped">

        <!-- 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">Est blanditiis qui ad aliquid!</td>
            <td class="cell3">Sequi?</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Optio, modi. Quo, animi alias?</td>
            <td class="cell3">Cumque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Autem saepe repellat cum rem.</td>
            <td class="cell3">Consectetur?</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Illo doloribus quas ratione in.</td>
            <td class="cell3">Incidunt?</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Atque at esse incidunt eos.</td>
            <td class="cell3">Similique.</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Doloremque ipsa magni fugiat quibusdam!</td>
            <td class="cell3">Nihil!</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Dolorem molestias amet consequatur doloribus!</td>
            <td class="cell3">Dolores.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Consectetur saepe suscipit explicabo delectus?</td>
            <td class="cell3">Libero?</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Ea consequatur sit accusantium ad?</td>
            <td class="cell3">Officiis.</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>
        <tr>
            <td class="cell1">11</td>
            <td class="cell2">Quae rem vero debitis nemo.</td>
            <td class="cell3">Ipsam!</td>
            <td class="cell4">2023-04-11</td>
            <td class="cell5">11</td>
        </tr>
        <tr>
            <td class="cell1">12</td>
            <td class="cell2">Eveniet temporibus sunt culpa fugiat?</td>
            <td class="cell3">Enim.</td>
            <td class="cell4">2023-04-12</td>
            <td class="cell5">12</td>
        </tr>
        <tr>
            <td class="cell1">13</td>
            <td class="cell2">Adipisci at quasi omnis quia?</td>
            <td class="cell3">Provident.</td>
            <td class="cell4">2023-04-13</td>
            <td class="cell5">13</td>
        </tr>
        <tr>
            <td class="cell1">14</td>
            <td class="cell2">Architecto illum aliquam iure quae.</td>
            <td class="cell3">Sit.</td>
            <td class="cell4">2023-04-14</td>
            <td class="cell5">14</td>
        </tr>
        <tr>
            <td class="cell1">15</td>
            <td class="cell2">Et esse deleniti adipisci molestiae!</td>
            <td class="cell3">Praesentium?</td>
            <td class="cell4">2023-04-15</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">16</td>
            <td class="cell2">Aut sint non tempore eum.</td>
            <td class="cell3">Cupiditate.</td>
            <td class="cell4">2023-04-16</td>
            <td class="cell5">16</td>
        </tr>
        <tr>
            <td class="cell1">17</td>
            <td class="cell2">Quos dignissimos facere vitae aliquam?</td>
            <td class="cell3">Quos?</td>
            <td class="cell4">2023-04-17</td>
            <td class="cell5">17</td>
        </tr>
        <tr>
            <td class="cell1">18</td>
            <td class="cell2">Adipisci ipsum laboriosam quia eius?</td>
            <td class="cell3">Quia.</td>
            <td class="cell4">2023-04-18</td>
            <td class="cell5">18</td>
        </tr>
        <tr>
            <td class="cell1">19</td>
            <td class="cell2">Laboriosam, inventore iusto? Accusantium, quibusdam.</td>
            <td class="cell3">Eos.</td>
            <td class="cell4">2023-04-19</td>
            <td class="cell5">19</td>
        </tr>
        <tr>
            <td class="cell1">20</td>
            <td class="cell2">Sint modi neque a corrupti.</td>
            <td class="cell3">Reiciendis!</td>
            <td class="cell4">2023-04-20</td>
            <td class="cell5">20</td>
        </tr>


    </table>

    <h1>게시판</h1>

    <table id="list2" class="table dark">

        <!-- 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">Est blanditiis qui ad aliquid!</td>
            <td class="cell3">Sequi?</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Optio, modi. Quo, animi alias?</td>
            <td class="cell3">Cumque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Autem saepe repellat cum rem.</td>
            <td class="cell3">Consectetur?</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Illo doloribus quas ratione in.</td>
            <td class="cell3">Incidunt?</td>
            <td class="cell4">2023-04-05</td>
            <td class="cell5">05</td>
        </tr>
        <tr>
            <td class="cell1">06</td>
            <td class="cell2">Atque at esse incidunt eos.</td>
            <td class="cell3">Similique.</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Doloremque ipsa magni fugiat quibusdam!</td>
            <td class="cell3">Nihil!</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Dolorem molestias amet consequatur doloribus!</td>
            <td class="cell3">Dolores.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">Consectetur saepe suscipit explicabo delectus?</td>
            <td class="cell3">Libero?</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Ea consequatur sit accusantium ad?</td>
            <td class="cell3">Officiis.</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>
        <tr>
            <td class="cell1">11</td>
            <td class="cell2">Quae rem vero debitis nemo.</td>
            <td class="cell3">Ipsam!</td>
            <td class="cell4">2023-04-11</td>
            <td class="cell5">11</td>
        </tr>
        <tr>
            <td class="cell1">12</td>
            <td class="cell2">Eveniet temporibus sunt culpa fugiat?</td>
            <td class="cell3">Enim.</td>
            <td class="cell4">2023-04-12</td>
            <td class="cell5">12</td>
        </tr>
        <tr>
            <td class="cell1">13</td>
            <td class="cell2">Adipisci at quasi omnis quia?</td>
            <td class="cell3">Provident.</td>
            <td class="cell4">2023-04-13</td>
            <td class="cell5">13</td>
        </tr>
        <tr>
            <td class="cell1">14</td>
            <td class="cell2">Architecto illum aliquam iure quae.</td>
            <td class="cell3">Sit.</td>
            <td class="cell4">2023-04-14</td>
            <td class="cell5">14</td>
        </tr>
        <tr>
            <td class="cell1">15</td>
            <td class="cell2">Et esse deleniti adipisci molestiae!</td>
            <td class="cell3">Praesentium?</td>
            <td class="cell4">2023-04-15</td>
            <td class="cell5">15</td>
        </tr>
        <tr>
            <td class="cell1">16</td>
            <td class="cell2">Aut sint non tempore eum.</td>
            <td class="cell3">Cupiditate.</td>
            <td class="cell4">2023-04-16</td>
            <td class="cell5">16</td>
        </tr>
        <tr>
            <td class="cell1">17</td>
            <td class="cell2">Quos dignissimos facere vitae aliquam?</td>
            <td class="cell3">Quos?</td>
            <td class="cell4">2023-04-17</td>
            <td class="cell5">17</td>
        </tr>
        <tr>
            <td class="cell1">18</td>
            <td class="cell2">Adipisci ipsum laboriosam quia eius?</td>
            <td class="cell3">Quia.</td>
            <td class="cell4">2023-04-18</td>
            <td class="cell5">18</td>
        </tr>
        <tr>
            <td class="cell1">19</td>
            <td class="cell2">Laboriosam, inventore iusto? Accusantium, quibusdam.</td>
            <td class="cell3">Eos.</td>
            <td class="cell4">2023-04-19</td>
            <td class="cell5">19</td>
        </tr>
        <tr>
            <td class="cell1">20</td>
            <td class="cell2">Sint modi neque a corrupti.</td>
            <td class="cell3">Reiciendis!</td>
            <td class="cell4">2023-04-20</td>
            <td class="cell5">20</td>
        </tr>


    </table>

</body>
</html>

728x90

저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

CSS STEP 9 - 적용 예제 (0)	2023.04.14
CSS STEP 8 - OverFlow&Visibility (0)	2023.04.14
CSS STEP 6 - TEXT (0)	2023.04.14
CSS STEP 5 - BackGround (0)	2023.04.13
CSS STEP 4 - Emmet (0)	2023.04.13

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

CSS STEP 7 - BOX

'웹페이지' 카테고리의 다른 글

'웹페이지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역