css의 display는 block, inline, inline-block, flex 등 다양한 속성을 갖는다.
그중 오늘은 저 네 가지의 차이점을 정리해두려 한다.
[ block vs inline vs inline-block ]
간단하게 정리하자면 이렇다.
이렇게 말로만 정리하면 이해가 어려워 예시를 가져왔다.
<!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="style.css" /> -->
<style>
body {
height: 100vh;
width: 100vw;
margin: 10px;
background-color: rgb(255, 250, 240);
}
div {
background-color: pink;
width: 100px;
height: 100px;
color: rgb(255, 255, 255);
font-size: 20px;
border: 2px solid rgb(65, 65, 65);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
기본 html 코드이고 css의 경우 div의 display값만 바꿔주었다.
[ block ]
block의 경우 너비와 높이를 가져 각각 100px의 크기를 갖는 div이 생성되며
하나의 div옆에는 또 다른 div이 오지 못하고 사진과 같이 위아래로 배치가 된다.
[ inline ]
inline의 경우 너비와 높이를 가지지 못해 element의 크기에 맞게
즉 1, 2, 3 각자의 폰트 사이즈에 의해 결정되고 사진과 같이 옆으로 배치가 가능하다.
[ inline-block ]
사람들은 block과 같이 너비와 높이를 가지면서 inline과 같이 element끼리 한 줄에 놓고 싶어 졌고
그로 인해 나온 방법이 inline-block이다.
하지만 이 같은 경우엔 사진에 보이는 것처럼 요소 사이에 알 수 없는 공간이 생기는 문제점이 발생한다.
[ flex ]
앞서 나온 inline-block은 사람들의 바람대로 너비와 높이를 가지면서
옆으로 배치가 가능하나 element사이에 알 수 없는 공간이 발생한다는 문제 점이 발생하며
위치 조정의 경우 margin, padding을 통해 조절할 수 있으나
이러한 경우 디바이스의 스크린 크기에 따라 디자인이 깨져버리는 문제가 발생했다.
이를 해결하기 위해 나온 것이 flex 속성으로
flex는 위치를 조정하고 싶은 element의 부모로부터 컨트롤하여 위치를 조정한다.
즉 직속 부모 element가 자식 element들을 위치시킨다.
<!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="style.css" /> -->
<style>
body {
height: 100vh;
width: 100vw;
margin: 10px;
background-color: rgb(255, 250, 240);
}
.box {
height: 100vh;
width: 100vw;
display: flex;
}
.box div {
background-color: pink;
width: 100px;
height: 100px;
color: rgb(255, 255, 255);
font-size: 20px;
border: 2px solid rgb(65, 65, 65);
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
작성한 코드이며 이전의 코드와 달리 숫자가 담긴 자식 div가 clsss명이 box인 부모 div안에 배치되어있다.
그리고 class명이 box인 div의 속성을 보면 display이가 flex이며 자식 div의 display는 변경하지 않았다.
하지만 우리가 원했던 block의 특징과 inline의 특징을 모두 표현한 걸 볼 수 있다.
flex를 사용하면 다양한 방법을 통해 element들의 위치를 바꿀 수 있다.
이에 대한 내용은 아래 링크를 참고해보자
'CSS' 카테고리의 다른 글
[ CSS ] Grid border 만들기 (0) | 2023.04.06 |
---|---|
[ CSS ] Grid 사용하기 , element 위치설정, content와 grid 위치설정 (0) | 2023.04.05 |
[ CSS ] nth-child, nth-of-type 가상선택자 정리 (0) | 2023.02.06 |
[ CSS ] input type="color" 디자인 변경하기 (0) | 2023.02.02 |
[ CSS ] flex 정리 (위치 조절, 요소간의 순서 변경 및 flex-grow, flex-shrink, flex-basis) (0) | 2022.12.18 |