본문 바로가기
클라이언트/CSS
CSS 속성 - 박스모델
Hana_h 2023. 3. 5. 22:09

// 박스모델, Boxmodel

//content 영역

    - 요소의 실제 내용을 포함하는 영역
    - 블럭 태그에만 적용된다.

  • width
    - 기본 값 : 0
    - 요소의 가로 크기를 지정하는 속성
    - 인라인 레벨 요소를 제외한 모든 요소에 적용됨.
    ~ length: 고정값으로 지정(px, em ...)
    ~ percent: 부모 요소의 width에 상대적인 크기 지정
    ~ auto: 브라우저에 의해 계산된 값 적용.

  • height
    - 기본 값 : 0
    - 요소의 세로 크기를 지정하는 속성
    - 인라인 레벨 요소를 제외한 모든 요소에 적용됨.
    ~ length: 고정값으로 지정(px, em ...)
    ~ percent: 부모 요소의 height에 상대적인 크기 지정
    ~ auto: 브라우저에 의해 계산된 값 적용.
  • min-weight, min-height: 최소를 지정하고, 이를 초과하면 상자도 늘어난다.
  • max-weight, max-height: 최소를 지정하고, 이를 초과하면 overflow
  • overflow: overflow를 통제한다.
        ~ visible
        ~ hidden
        ~ auto

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>content</title>
  <style>
    .parent{
      width: 400px;
      height: 200px;
      padding: 5px;
      border: 5px solid blue;
    }
    .child{
      width: 300px;
      height: 100px;
      padding: 20px;
      border: 5px dotted red;
    }
  </style>
</head>
<body>
    <div class="parent">
      <div class="child">
        Content 영역
      </div>
    </div>
</body>
</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>

        .box {
            border: 10px solid black
        }

        #box1 {
            border-color: black;
        }

        #box2 {
            border-color: blue;
            width: 300px;
            max-height: 200px;
        }

        #div1 {
            background-color: orange;
            width: 200px;
            height: 200px;
        }

        #span1 {
            background-color: orange;
        }

        p > span {
            background-color: rgb(255, 230, 0);
            width: 200px;
            height: 300px;
        }

    </style>
</head>
<body>

    <h1>블럭 태그</h1>
    <div id="div1">블럭 태그</div>

    <h1>인라인 태그</h1>
    <span id="span1">인라인 태그</span>
    
    <h1>박스 모델</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2</div>
    <div id="box3" class="box">상자3</div>

    <br>
    <hr>
    <br>

    <p>안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. <span>홍길동님.</span> 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. 안녕하세요. 홍길동님. </p>

</body>
</html>

- overflow

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

        #box {
            border: 1px solid black;
            width: 200px;
            height: 200px;

            overflow: visible;
            /* overflow: hidden; */
            /* overflow: auto; */
        }

    </style>
</head>
<body>
    
    <div id="box">상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.
    </div>

</body>
</html>

//border 영역

    - content 영역을 감싸는 테두리 선

  • border-width
    - 기본 값 : medium
    - 선의 굵기를 지정하는 속성
    - top, right, bottom, left를 이용하여 상화좌우 선의 굵기 다르게 표현 가능
    ~ 키워드: thin, medium, thick
    ~ 단위: px, em. rem... (정수 단위, % 사용 불가)

  • border-style
    - 기본 값 : none
    - 선의 모양을 지정하는 속성
    - top, right, bottom, left를 이용하여 상화좌우 선의 모양 다르게 표현 가능
    ~ none: 표시 X
    ~ solid: 실선 모양으로 나타냄.
    ~ double: 이중 실선 모양으로 나타냄.
    ~ dotted: 점선 모양으로 나타냄

  • border-color
    - 기본 값 : currentColor
    - 선의 모양을 지정하는 속성
    - top, right, bottom, left를 이용하여 상화좌우 선의 색상 다르게 표현 가능
/* 축약형 */
border: 10px solid #000; /*단축 속성*/
border: 6px solid red; /*보더 왼쪽*/
border: 6px; /*보더 두께*/
border: 6px 3px; /*보더 상하, 좌우 두께*/
border: 6px 3px 4px; /*보더 상, 우(좌), 하 두께*/
border: 6px 3px 4px 1px ; /*보더 상, 우, 하, 좌 두께*/

 

  • border-radius: px, %
     - 모서리 둥글기를 지정하는 속성
     - width와 height 중 더 짧은 쪽의 길이의 절반이 최댓값이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>border</title>
  <style>
    div {      
      border-width: thick;
      border-style: dotted;
      border-color: #0206fd;      
    }
  </style>
</head>
<body>
  <br>
    <div> css border 속성 실습 </div>
</body>
</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>

        /*border*/

        #box1 {
            background-color: orange;
        }

        #box2 {
            border-color: black; 
            border-width: 1px;
            border-style: solid;
        }

        #box3 {
            border: 1px solid red;
        }

        #box4 {
            border-top: 1px solid blue;
            border-right: 5px solid green;
            border-bottom: 10px solid red;
            
            border-left: 20px solid pink;

        }

        #box5 {
            border-width: 10px;
            border-style: solid;
            /* border-color: red orange blue purple; */
            /* border-color: red orange blue; */
            /* border-color: pink purple; */
            border-color: pink;
        }
        
        .txt {
            outline: none;
            border: 1px solid #999;
        }

        .txt:focus {
            background-color: rgb(255, 232, 198);
        }


    </style>
</head>
<body>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <br>
    <br>

    <div id="box4" class="box">상자4</div>
    
    <br>
    <br>
    
    <div id="box5" class="box">상자5</div>

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

</body>
</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>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <style>
        
        #box {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            border-radius: 20px;
            padding: 20px;
        }
        
        #bar-search::after {
            content:'';
            display: block;
            clear: left;
            
        }
        
        #txt-search, #btn-search {
            float: left;
            margin: 0;
            padding: 0;
            border: 0;
            background-color: white;
            outline: none;
        }
        
        #txt-search {
            border: 5px solid #19CE60;
            font-size: 1.5rem;
            padding: 5px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-right: 0;
        }
        
        #btn-search {
            background-color: #19CE60;
            width: 50px;
            height: 47.5px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        #btn-search span {
            color: white;
            font-size: 32px;
            text-shadow: 1px 1px 2px darkgreen;
        }
                
    </style>
</head>
<body>
    
    <img src="images/dog01.jpg" style="border-radius: 50%;">
    
    <h1>검색</h1>
    <div id="bar-search">
        <input type="text" id="txt-search">
        <button id="btn-search">
            <span class="material-symbols-outlined">search</span>
        </button>
    </div>
    
    <hr>
    <br>
    
    <div id="box">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui eius odit soluta eum expedita, asperiores placeat ut repellat optio ipsa quam minus reiciendis repudiandae quaerat? Debitis magnam architecto doloremque repellat! Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
    </div>
    
    
</body>
</html>

※ border vs outline

* border
    - 다른 것들의 영역을 침범한다.(밀어낸다.)

* outline
    - 상하좌우로 나타난다.
    - 다른 것들과 겹쳐져서 출력 가능하다.    
        > 테두리를 표현하고 싶은데, 주변의 영역을 침범하고 싶지 않을 떄 주료 사용!

<!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>
        
        .box {
            width: 200px;
            height: 150px;
        }
        
        #box1 {
            /* border: 10px solid tomato; */
            background-color: tomato;
        }
        
        #box2 {
            /* border: 10px solid gold; */
            /* outline: 10px solid gold; */
            background-color: gold;
        }
        
        #box3 {
            /* border: 10px solid cornflowerblue; */
            background-color: cornflowerblue;
        }
        
        #box2:hover {
            /* border: 10px solid black; */
            outline: 10px solid black;
        }
        
    </style>
</head>
<body>
    
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
    
</body>
</html>

//padding 영역

    - content 영역과 테두리 사이의 여백

    - 기본값: 0
    - 음수 값 적용 불가능
    - top, right, bottom, left 를 이용하여 영역의 상우하좌 여백 지정 가능
    ~ length: 고정값으로 지정(px, em ...)
    ~ percent: 요소의 width에 상대적인 크기 지정

/* 축악형 */
padding: 0 10px 20px 30px; /* 상, 우, 하, 좌 다름 */
padding: 0 10px 20px;      /* 좌, 우 같음 */
padding: 0 10px;           /* 상, 하 같음 & 좌, 우 같음 */
padding: 0;                /* 상, 우, 하, 좌 모두 같음 */

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>padding</title>
  <style>
    div {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 40px;
      padding-left: 30px;

      border: 10px solid #000;
      
    }
  </style>
</head>
<body>
  <br>
    <div> css padding 속성 실습 </div>
</body>
</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>

        /* padding, margin */

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

        #box2 {
            
            border-width: 10px;
            padding: 20px; 
            /* padding-top: 20px;
            padding-right: 20px;            
            padding-bottom: 20px;
            padding-left: 20px; */

            width: 140px;
            height: 92px;

        }

        .txt {
            padding: 10px 20px 0px 20px; /*top right bottom left*/
        }

    </style>
</head>
<body>
    
    <h1>박스 모델</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <br>
    <hr>
    <br>

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


</body>
</html>

//margin 영역

    - border 바깥쪽의 영역

    - 기본값: 0
    - 음수 값 적용 가능
    - top, right, bottom, left 를 이용하여 영역의 상우하좌 여백 지정 가능
    ~ length: 고정값으로 지정(px, em ...)
    ~ percent: 요소의 width에 상대적인 크기 지정
    ~ auto: 브라우저에 의해 계산된 값 적용.
        - 대부분의 경우 0(기본값) 또는 요소의 해당 측면에서 사용 가능한 공간과 같은 값을 가진다.
        - 이를 활용하여 수평 중앙 정렬을 할 수 있다.

/* 축악형 */
margin: 0 10px 20px 30px; /* 상, 우, 하, 좌 다름 */
margin: 0 10px 20px;      /* 좌, 우 같음 */
margin: 0 10px;           /* 상, 하 같음 & 좌, 우 같음 */
margin: 0;                /* 상, 우, 하, 좌 모두 같음 */

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>margin</title>
  <style>
    div {
      margin-top: 100px;
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 40px;

      padding: 20px;
      border: 10px solid #000;
    }
  </style>
</head>
<body>
    <div> css margin 속성 실습 </div>
</body>
</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>

        /* padding, margin */

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

        #box2 {
            
            border-width: 10px;
            margin: 30px 0px;
            /* margin-top: 30px;
            margin-right: 0px;
            margin-bottom: 30px;
            margin-left: 0px; */

            width: 140px;
            height: 92px;

        }

    </style>
</head>
<body>
    
    <h1>박스 모델</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <br>
    <hr>
    <br>

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


</body>
</html>

- padding + margin 게시판

<!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 rgb(105, 105, 105);
            border-collapse: collapse;
            width: 800px;
            margin-top: 30px;
        }

        .table th, .table td {
            border: 1px solid rgb(105, 105, 105);
            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, .tablet th, .table td {
            color: #272727
        }

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

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

    <table id="list" class="table">

        <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">Doloremque, et. Dolores, inventore voluptatum?</td>
            <td class="cell3">Libero.</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Facere, architecto. Aperiam, a quis.</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Mollitia qui a unde sint.</td>
            <td class="cell3">Veritatis!</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Fuga libero repudiandae quisquam minima?</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">Odit quia fugiat voluptatibus. Earum!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Delectus quidem eveniet harum doloribus.</td>
            <td class="cell3">Vel?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Facilis obcaecati voluptatibus commodi explicabo.</td>
            <td class="cell3">Aut.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">A vero quibusdam sequi voluptas.</td>
            <td class="cell3">Amet.</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Fugiat adipisci quis a natus.</td>
            <td class="cell3">Similique!</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>
        
    </table>

</body>
</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 rgb(105, 105, 105);
            border-collapse: collapse;
            width: 800px;
            margin-top: 30px;
        }

        .table th, .table td {
            border: 1px solid rgb(105, 105, 105);
            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, .tablet th, .table td {
            color: #272727
        }

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

        .table.blue td {
            color: blue;
        }

        h1 {
            border-bottom: 1px dashed #777;
            width: 800px;
            padding-bottom: 5px;
        }

    </style>
</head>
<body>

    <h1>게시판</h1>

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

        <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">Doloremque, et. Dolores, inventore voluptatum?</td>
            <td class="cell3">Libero.</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Facere, architecto. Aperiam, a quis.</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Mollitia qui a unde sint.</td>
            <td class="cell3">Veritatis!</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Fuga libero repudiandae quisquam minima?</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">Odit quia fugiat voluptatibus. Earum!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Delectus quidem eveniet harum doloribus.</td>
            <td class="cell3">Vel?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Facilis obcaecati voluptatibus commodi explicabo.</td>
            <td class="cell3">Aut.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">A vero quibusdam sequi voluptas.</td>
            <td class="cell3">Amet.</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Fugiat adipisci quis a natus.</td>
            <td class="cell3">Similique!</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>

    </table>

</body>
</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 rgb(105, 105, 105);
            border-collapse: collapse;
            width: 800px;
            margin-top: 30px;
        }

        .table th, .table td {
            border: 1px solid rgb(105, 105, 105);
            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, .tablet th, .table td {
            color: #272727
        }

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

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

        .table.striped th,
        .table.striped td {
            border-left: 0px;
            border-right: 0px;
        }
        
        h1 {
            border-bottom: 1px dashed #777;
            width: 800px;
            padding-bottom: 5px;
        }

    </style>
</head>
<body>

    <h1>게시판</h1>

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

        <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">Doloremque, et. Dolores, inventore voluptatum?</td>
            <td class="cell3">Libero.</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Facere, architecto. Aperiam, a quis.</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Mollitia qui a unde sint.</td>
            <td class="cell3">Veritatis!</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Fuga libero repudiandae quisquam minima?</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">Odit quia fugiat voluptatibus. Earum!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Delectus quidem eveniet harum doloribus.</td>
            <td class="cell3">Vel?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Facilis obcaecati voluptatibus commodi explicabo.</td>
            <td class="cell3">Aut.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">A vero quibusdam sequi voluptas.</td>
            <td class="cell3">Amet.</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Fugiat adipisci quis a natus.</td>
            <td class="cell3">Similique!</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>

    </table>

</body>
</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 rgb(105, 105, 105);
            border-collapse: collapse;
            width: 800px;
            margin-top: 30px;
        }

        .table th, .table td {
            border: 1px solid rgb(105, 105, 105);
            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, .tablet th, .table td {
            color: #272727
        }

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

        h1 {
            border-bottom: 1px dashed #777;
            width: 800px;
            padding-bottom: 5px;
        }

        .table.dark {
            border-color: white;
            background-color: black;
            color: white;
        }

        .table.dark th, .table.dark td {
            border-color: white;
            background-color: #333;
            color: white;
        }
        
    </style>
</head>
<body>

    <h1>게시판</h1>

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

        <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">Doloremque, et. Dolores, inventore voluptatum?</td>
            <td class="cell3">Libero.</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Facere, architecto. Aperiam, a quis.</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Mollitia qui a unde sint.</td>
            <td class="cell3">Veritatis!</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Fuga libero repudiandae quisquam minima?</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">Odit quia fugiat voluptatibus. Earum!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Delectus quidem eveniet harum doloribus.</td>
            <td class="cell3">Vel?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Facilis obcaecati voluptatibus commodi explicabo.</td>
            <td class="cell3">Aut.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">A vero quibusdam sequi voluptas.</td>
            <td class="cell3">Amet.</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Fugiat adipisci quis a natus.</td>
            <td class="cell3">Similique!</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>

    </table>

</body>
</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 rgb(105, 105, 105);
            border-collapse: collapse;
            width: 800px;
            margin-top: 30px;
        }

        .table th, .table td {
            border: 1px solid rgb(105, 105, 105);
            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, .tablet th, .table td {
            color: #272727
        }

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

        .table.hovertable tr:hover{
            background-color: pink;
        }
        
        h1 {
            border-bottom: 1px dashed #777;
            width: 800px;
            padding-bottom: 5px;
        }

    </style>
</head>
<body>

    <h1>게시판</h1>

    <table id="list" class="table 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">Doloremque, et. Dolores, inventore voluptatum?</td>
            <td class="cell3">Libero.</td>
            <td class="cell4">2023-04-02</td>
            <td class="cell5">02</td>
        </tr>
        <tr>
            <td class="cell1">03</td>
            <td class="cell2">Facere, architecto. Aperiam, a quis.</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-03</td>
            <td class="cell5">03</td>
        </tr>
        <tr>
            <td class="cell1">04</td>
            <td class="cell2">Mollitia qui a unde sint.</td>
            <td class="cell3">Veritatis!</td>
            <td class="cell4">2023-04-04</td>
            <td class="cell5">04</td>
        </tr>
        <tr>
            <td class="cell1">05</td>
            <td class="cell2">Fuga libero repudiandae quisquam minima?</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">Odit quia fugiat voluptatibus. Earum!</td>
            <td class="cell3">Atque?</td>
            <td class="cell4">2023-04-06</td>
            <td class="cell5">06</td>
        </tr>
        <tr>
            <td class="cell1">07</td>
            <td class="cell2">Delectus quidem eveniet harum doloribus.</td>
            <td class="cell3">Vel?</td>
            <td class="cell4">2023-04-07</td>
            <td class="cell5">07</td>
        </tr>
        <tr>
            <td class="cell1">08</td>
            <td class="cell2">Facilis obcaecati voluptatibus commodi explicabo.</td>
            <td class="cell3">Aut.</td>
            <td class="cell4">2023-04-08</td>
            <td class="cell5">08</td>
        </tr>
        <tr>
            <td class="cell1">09</td>
            <td class="cell2">A vero quibusdam sequi voluptas.</td>
            <td class="cell3">Amet.</td>
            <td class="cell4">2023-04-09</td>
            <td class="cell5">09</td>
        </tr>
        <tr>
            <td class="cell1">10</td>
            <td class="cell2">Fugiat adipisci quis a natus.</td>
            <td class="cell3">Similique!</td>
            <td class="cell4">2023-04-10</td>
            <td class="cell5">10</td>
        </tr>
        
    </table>

</body>
</html>

// box-sizing
        - css3부터 새로 도입된 속성으로, 박스의 사이즈를 정의
        
        ~ content-box: 상자의 실제 크기 = 너비(높이) + 패딩 + 테두리 > 기존의 상자 크기
        ~ border-box: 상자의 실제 크기 = 너비(높이)

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

        .box {
            width: 150px;
            height: 150px;
        }

        #box1 { background-color: tomato; }
        #box2 { background-color: gold; }
        #box3 { background-color: cornflowerblue; }

        /* 사이즈 측정: 상자의 실제 크기 = 너비(높이) + 패딩 + 테두리 */
        #box1 {
            border: 10px solid;
            padding: 10px
        }

        /*========================↑css2까지========================*/

        #box3 {
            box-sizing: border-box;
            border: 10px solid;
            padding: 10px
        }


    </style>
</head>
<body>
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
</body>
</html>

//box-shadow

    ~ x y blur color

<!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>
        
        div:nth-child(2) {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            margin: 20px;
        }
        
        div:nth-child(2):hover {
            box-shadow: 5px 5px 3px #CCC;
        }
        
    </style>
</head>
<body>
    
    <div id="list">
        <div class="item">빨강</div>
        <div class="item">노랑</div>
        <div class="item">파랑</div>
    </div>
    
</body>
</html>

'클라이언트 > CSS' 카테고리의 다른 글

CSS 속성 - 텍스트  (0) 2023.04.19
CSS 속성 - 폰트  (0) 2023.04.18
CSS 속성 - 배경  (0) 2023.03.05
CSS 속성 - 색상  (0) 2023.03.05
CSS 속성 - 단위  (0) 2023.03.04

'클라이언트/CSS' Related Articles

티스토리툴바