display: block, inline-block

HTML, CSS

by front-hyun 2024. 1. 21. 05:48

display: block은 한 행을 전부 차지

display: inline-block은 내 크기만큼을 차지

즉, display-block을 사용해서 두 개의 <div>를 가로 배치할 수 있다.

여기서 주의할 점은 inline-block을 사용하면 박스 사이에 공백 제거를 반드시 해야 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="header"></div>
      <div class="left-menu"></div><div class="right-menu"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

부모 태그의 font-size: 0px;로 주게 되면 두개의 <div> 태그 사이에 공백이 있어도 가로 정렬이 가능하다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container" style="font-size: 0px">
      <div class="header"></div>
      <div class="left-menu"></div>
      <div class="right-menu"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

.container {
  width: 800px;
}

.header {
  width: 100%;
  height: 100px;
  background: pink;
}
.left-menu {
  width: 20%;
  height: 400px;
  background: rebeccapurple;
  display: inline-block;
}
.right-menu {
  width: 80%;
  height: 400px;
  background: brown;
  display: inline-block;
}
.footer {
  width: 100%;
  height: 100px;
  background-color: blanchedalmond;
  clear: both;
}

'HTML, CSS' 카테고리의 다른 글

form 만들기 (0)	2024.01.21
블로그 페이지 만들기 (0)	2024.01.21
이미지와 div 가운데 정렬, float: left로 <div> 가로 정렬 (1)	2024.01.15
[CSS] transition, animation, flexbox, Tailwind CSS (0)	2023.03.29
[CSS] 기초(03/23) (2)	2023.03.25