ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • dsiplay: table
      웹/css 2021. 2. 8. 20:16
      반응형

      잡설

      오랜만에 글을 써본다 ㅎㅎ

      요즘 암것도 하기 싫어서 놀고 있었는데 이제 다시 쓰기 시작 해야지ㅎㅎ

       

       

      본론

      요즘에서야 display에도 여러 속성들이 있다는 것을 알게 되었다.

       

      요즘에 알게된 여러가지중에 table에 대해 먼저 알아보자

       

      뭐 긴말이 필요하겠는가?

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      <!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>Table</title>
        </head>
        <style>
            *{
                box-sizing: border-box;
            }
          body {
            margin: 0;
            padding: 0;
          }
          ul{
              max-width: 1440px;
              list-style: none;
              padding:0;
              display:flex;
          }
          li{
              margin:0 10px;
              font-size: 18px;
              transition: all 0.5s;
              cursor: pointer;
          }
          li:hover{
              background:white;
              color:black;
              font-weight: 700;
          }
          .menu1 {
            width: 100%;
            background: black;
            color:white;
            display:flex;
            justify-content: center;
            margin:0px auto;
          }
          .menu2 {
            margin:30px auto 0;
              width: 100%;
              background: black;
            color:white;
            display:flex;
            justify-content: center;
          }
          .ul{
              max-width: 1440px;
              width: 100%;
              display:table;
              table-layout: fixed;
          }
          .item{
              text-align: center;
              display:table-cell;
              vertical-align: middle;
              transition: all 0.5s;
              font-size: 18px;
              cursor: pointer;
          }
          .item:hover{
              background:white;
              color:black;
              font-weight: 700;
          }
        </style>
        <body>
          <div class="menu1">
              <ul>
                  <li>1번항목</li>
                  <li>2번항목</li>
                  <li>3번항목</li>
                  <li>4번항목</li>
                  <li>5번항목</li>
              </ul>
          </div>
       
          <div class="menu2">
              <div class="ul">
                  <div class="item">1번 항목</div>
                  <div class="item">2번 항목</div>
                  <div class="item">3번 항목</div>
                  <div class="item">4번 항목</div>
                  <div class="item">5번 항목</div>
              </div>
          </div>
        </body>
      </html>
       
      		 cs

       

       

      ul에 있는 

      display:table;//table 설정

      table-layout: fixed;  //아이템들 크기 고정

      menu에있는

      display:table-cell; 속성을 넣어야 작동함

       

       

      blog/table.html at master · famous0811/blog (github.com)

      반응형
      저작자표시 비영리 동일조건

      '웹 > css' 카테고리의 다른 글

      styled-components vs scss  (0) 2021.02.19
      css vs scss(sass) vs styled-componets  (0) 2020.04.29

      관련글 관련글 더보기

    독특하고 창의적인 개발자

    티스토리툴바