CSS/ [CSS] DISPLAY 를 활용한 테이블 만들기
2023-03-02 21:07:45

display

주로 div 태그와 같이 사용하며 css를 사용하면서 가장 많이 쓰는 속성 중 하나가 아닐까 생각이 들 정도로 자주 쓰인다고 한다.

display 속성은 화면 레이아웃을 편하게 나누거나 정렬 할 수 있게 해 주기 때문에 중요한 속성이라고 할 수 있다.

 

display 자주 쓰는 속성

div 태그의 기본 display 속성은 block으로 되어 있으며 자주 쓰는 속성으로는 none, block, inline, inline-block, flex 가 있다.

간단한 실습을 통해 어떻게 동작하는지 알아보자.

 

display : block

  • display : block -> 가로폭을 전부 차지하기 때문에 줄바꿈이 된다. width, height, margin, padding을 사용하여 크기나 위치를 지정해 줄 수 있다.

 

더보기

소스 코드

 

  <!-- CSS -->
  <style>
    .frame {
      width: 330px;
      height: 330px;
      border: 1px solid;
    }
    .dp {
      width: 100px;
      height: 100px;
      border: 1px solid;
      margin: 5px;
    }
  </style>

<!-- html -->
<body>

  <div class="frame">
    <div class="dp dp1"></div>
    <div class="dp dp2"></div>
    <div class="dp dp3"></div>
  </div>
  
</body>

 

결과

 

줄바꿈이 자동으로 된 것을 볼 수 있다.

 

display : none

  • display : none -> 해당 내용을 화면에 표시하지 않는다.

 

더보기

소스 코드

 

  <!-- CSS -->
  <style>
    .frame {
      width: 330px;
      height: 330px;
      border: 1px solid;
    }
    .dp {
      width: 100px;
      height: 100px;
      border: 1px solid;
      margin: 5px;
    }
    .dp3 {
      display: none;
    }
  </style>

<!-- html -->
<body>

  <div class="frame">
    <div class="dp dp1"></div>
    <div class="dp dp2"></div>
    <div class="dp dp3"></div>
  </div>
  
</body>

 

결과

 

div 1개가 사라진 걸 볼 수 있다.

 

display : inline

  • display : inline -> 사용된 만큼만 공간을 차지하기 때문에 줄 바꿈이 되지 않고 가로, 세로 폭을 지정해 줄 수 없으며 margin과 padding은 좌우만 적용된다. 위치 지정이 불가능하며 text-align로 정렬은 가능하다.

 

더보기

소스 코드

 

 <!-- CSS -->
  <style>
    .frame {
      width: 330px;
      height: 330px;
      border: 1px solid;
    }
    .dp {
      width: 100px;
      height: 100px;
      border: 1px solid;
      margin: 5px;
      display: inline;
    }
  </style>

<!-- html -->
<body>

  <div class="frame">
    <div class="dp dp1">으악</div>
    <div class="dp dp2">으악</div>
    <div class="dp dp3">으악</div>
  </div>
  
</body>

 

결과

 

으악이라고 써진 텍스트 만큼만 공간을 차지하고 옆으로 나열 된 것을 볼 수 있다.

 

display : inline-block

  • display : inline-block -> inline 속성과 비슷하지만 가로, 세로의 폭을 설정 할 수 있고 margin과 padding은 상하만 적용된다.

 

더보기

소스 코드

 

 <!-- CSS -->
  <style>
    .frame {
      width: 330px;
      height: 330px;
      border: 1px solid;
    }
    .dp {
      width: 100px;
      height: 100px;
      border: 1px solid;
      margin: 5px;
      display: inline-block;
    }
  </style>

<!-- html -->
<body>

  <div class="frame">
    <div class="dp dp1">으악</div>
    <div class="dp dp2">으악</div>
    <div class="dp dp3">으악</div>
  </div>
  
</body>

 

결과

 

inline과 다르게 width, height 값이 적용된 것을 볼 수 있다.

 

display : flex

  • display : flex -> 가장 많이 사용 하는 속성으로 자식 태그의 넓이가 부모 태그의 넓이보다 넓을 때 자식 태그의 크기를 줄여주기도 하는 등 동적인 레이아웃을 유연하게 배치할 수 있게 해 준다.

 

더보기

소스 코드

 

 <!-- CSS -->
  <style>
    .frame {
      width: 350px;
      height: 350px;
      border: 1px solid;
      display: flex;
    }
    .dp {
      width: 100px;
      height: 100px;
      border: 1px solid;
      margin: 5px;
    }
  </style>

<!-- html -->
<body>

  <div class="frame">
    <div class="dp dp1"></div>
    <div class="dp dp2"></div>
    <div class="dp dp3"></div>
    <div class="dp dp4"></div>
    <div class="dp dp5"></div>
    <div class="dp dp6"></div>
    <div class="dp dp7"></div>
    <div class="dp dp8"></div>
    <div class="dp dp9"></div>
  </div>
  
</body>

 

 

결과

 

자식 태그의 width가 100px이지만 부모 width의 350을 넘지 못하기에 자식 태그의 div의 width 값이 줄어든 것을 볼 수 있다.

 

display를 활용한 게시판 레이아웃 만들기

 

소스 코드

 

<!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>게시판</title>

  <style>
    .boardtitle {
      width: 1000px;
      text-align: center;
    }

    .main {
      width: 1000px;
      height: 50px;
      border-top: 1px solid;
      border-bottom: 1px solid rgba(0,0,0,0.5);
      display: flex;
    }

    .num {
      width: 50px;
      height: 50px;
    }
    .title {
      width: 700px;
      height: 50px;
    }
    .userid {
      width: 110px;
      height: 50px;
    }
    .date {
      width: 80px;
      height: 50px;
    }
    .cnt {
      width: 60px;
      height: 50px;
    }
    
    .main p {
      text-align: center;
    }

    .sub {
      width: 1000px;
      height: 50px;
      border-bottom: 1px solid rgba(0,0,0,0.2);
      display: flex;
    }

    .sub p {
      text-align: center;
    }
    
    .sub .title p {
      text-align: left;
      margin-left: 10px;
    }

  </style>


</head>
<body>
  
  <div class="boardtitle"> <h1>게시판</h1> </div>

  <div class="main">
    <div class="num"> <p>No</p> </div>
    <div class="title"> <p>제 목</p> </div>
    <div class="userid"> <p>작성자</p> </div>
    <div class="date"> <p>게시일</p> </div>
    <div class="cnt"> <p>조회수</p> </div>
  </div>

  <div class="sub">
    <div class="num"> <p>5</p> </div>
    <div class="title"> <p>참치김밥</p> </div>
    <div class="userid"> <p>동복이</p> </div>
    <div class="date"> <p>2023.03.02</p> </div>
    <div class="cnt"> <p>666</p> </div>
  </div>

  <div class="sub">
    <div class="num"> <p>4</p> </div>
    <div class="title"> <p>제육볶음</p> </div>
    <div class="userid"> <p>동복이</p> </div>
    <div class="date"> <p>2023.03.02</p> </div>
    <div class="cnt"> <p>777</p> </div>
  </div>

  <div class="sub">
    <div class="num"> <p>3</p> </div>
    <div class="title"> <p>해물볶음짜장</p> </div>
    <div class="userid"> <p>동복이</p> </div>
    <div class="date"> <p>2023.03.02</p> </div>
    <div class="cnt"> <p>888</p> </div>
  </div>

  <div class="sub">
    <div class="num"> <p>2</p> </div>
    <div class="title"> <p>치킨마요덮밥</p> </div>
    <div class="userid"> <p>동복이</p> </div>
    <div class="date"> <p>2023.03.02</p> </div>
    <div class="cnt"> <p>999</p> </div>
  </div>

  <div class="sub">
    <div class="num"> <p>1</p> </div>
    <div class="title"> <p>안녕하세요</p> </div>
    <div class="userid"> <p>동복이</p> </div>
    <div class="date"> <p>2023.03.02</p> </div>
    <div class="cnt"> <p>1,000</p> </div>
  </div>


</body>
</html>

 

결과

 

728x90

'CSS' 카테고리의 다른 글

[CSS] POSITION 속성 이해하기  (0) 2023.03.03
[CSS] CSS 이해하기  (0) 2023.03.02

티스토리툴바