inline-block의 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body {
margin: 20px;
}
div {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>기본적으로 div 태그는 block 요소이다. 따라서 위와 같은 코드를 작성하면 아래와 같이 표현된다.
만약 div의 display 속성값을 inline으로 바꾸게되면 화면상에는 아무것도 보이지 않게된다. 그 이유는 inline 요소는 height와 width를 가질 수 없기 때문이다. 만약 inline요소이면서 block처럼 width와 height을 가지게 만들고 싶다면 다음과 같이 HTML 코드를 작성하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body {
margin: 20px;
}
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>display 속성의 값으로 inline-block을 주었다. 그 결과는 아래와 같다.
inline-block의 경우 block과 같이 height과 width를 가질 수 있으며 사방에 margin을 주는 것도 가능하다. 또한 inline처럼 바로 옆에 다른 요소가 오게끔 할수도 있다.
inline-block의 문제점
하지만 inline-block에는 문제가 있다. 위의 이미지에서 보이는 것처럼 각 div 태그 사이에 지정하지 않은 공백이 들어가는 것이다. 또한 반응형 디자인을 지원하지 않는다. 때문에 한 줄에 모든 것을 표시하는 형태로 div태그를 지정해둔 상태로 화면의 크기가 줄어들면 모든 것이 한 줄에 있다가도 여러 줄로 변형이 되는 등의 문제가 발생한다.
위의 이미지는 같은 크기의 div 태그를 inline-block으로 배치한 후 화면의 크기를 줄여본 모습이다. 같은 height과 width를 가지고있음에도 불구하고 화면의 크기에 따라 두고자했던 위치에서 벗어나버리는 모습을 볼 수 있다. 창 크기에 영향을 많이 받는 것이다.
이러한 문제점을 개선하기 위해 나온 것이 바로 flex이다. 다음 글에서는 flex에 대해 알아볼 예정이다.
'TIL > CSS' 카테고리의 다른 글
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
|---|---|
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css 개념 정리 (0) | 2023.07.19 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
댓글