Programming/HTML, CSS
[HTML/CSS]inline, block, inline-block 개념 비교
중성자
2021. 11. 17. 16:28
728x90
display
CSS의 display 속성은 웹페이지를 어떻게 사용자에게 보여줄지를 결정한다.
주요 속성값으로 inline, block, inline-block, none 이 있다.
1. inline
width와 height을 지정할 수 없고, 오직 내용(contents)만 포함하는 개념이다.
줄 바꿈이 일어나지 않는다.
대표적으로 span, b, a tag 등이 있다.
2. block
가로 크기만큼의 영역을 모두 차지하고, 줄 바꿈이 일어난다.
width와 height의 크기를 지정할 수 있다.
대표적으로 div, p, h tag 등이 있다.
3. inline-block
inline과 block의 속성을 가지고 있다.
줄 바꿈이 일어나지 않지만, width와 height 크기 조절이 가능하다.
4. Code
//HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="block_div">block</div>
<div class="inline_div">inline</div>
<div class="inline-block_div">inline-block</div>
</body>
</html>// CSS
body div {
font-size: large;
margin-bottom: 50px;
}
.block_div {
display: block;
background-color: aqua;
}
.inline_div {
display: inline;
width: 500px;
/* inline 속성의 특징으로 위 속성값은 적용되지 않는다. */
background-color: chartreuse;
}
.inline-block_div {
display: inline-block;
width: 500px;
background-color: gold;
}Result
반응형