CSS display 속성
display 속성값은 요소에 적용되는 방식에 따라 display-outside와 display-inside으로 나뉩니다.
| display-outside | 요소를 둘러싼 레이아웃에서 해당요소가 어떻게 위치하는가와 관련됩니다. block, inline, inline-block 등이 있습니다. |
| display-inside | 요소 내부의 자식요소들을 정렬하는 방법을 설정합니다. flex, grid, table 등이 있습니다. |
display-inside는 자식요소를 어떻게 정렬하는지 결정하는 속성입니다. 여기에 flex나 grid등의 값을 설정해서 요소들을 정렬할 수 있습니다.
flex, grid 레이아웃 시스템에 관한 내용은 이 글에서는 다루지 않고 여기서는 display-outside 속성들을 살펴보도록 하겠습니다. flex, grid레이아웃에 관한 포스팅은 아래 글을 참고해주세요.
2023.12.28 - [HTML, CSS] flexbox(display: flex) 총정리
[HTML, CSS] flexbox(display: flex) 총정리
flex는 grid만큼 다양한 기능을 가지고 있지는 않지만, 대부분의 레이아웃은 flexbox의 조합만으로도 충분히 구현이 가능합니다. grid layout에 관해서는 아래 깔끔하게 잘 정리된 글을 링크로 남깁니
codingbroker.tistory.com
display-outside 속성
display: inline | block | inline-block | none
HTML 요소들은 각각 그 성격에 맞는 display 속성값을 가지고 있습니다.
이 값에 따라서 어떤 요소의 넓이는 화면에서 한 줄 전체를 차지하기도 하고, 어떤 요소들은 최소한의 크기만 차지하기도 합니다. 또한 요소에 width 속성으로 넓이를 설정했을 때 이 display 속성에 따라서 넓이가 적용이 되는 요소도 있고, 그렇지 않은 요소도 있습니다.
1. 기본값이 block인 요소들
block 요소는 항상 새로운 줄에 생성됩니다. 또한 width 속성이 주어지지 않으면 해당요소는 왼쪽 끝부터 오른쪽 끝까지의 공간을 모두 차지합니다.
다음과 같은 요소들이 block 값을 가지고 있습니다.
- header
- div
- h1-h6
- section
- p
- form
- footer
<!DOCTYPE html>
<html>
<head>
<style>
header,
div,
h1,
section,
p,
form,
footer {
border: 1px solid black;
}
</style>
</head>
<body>
<header>header</header>
<div>div</div>
<h1>h1</h1>
<section>section</section>
<p>p</p>
<form>form</form>
<footer>footer</footer>
</body>
</html>
이미지에서와 같이 block요소들은 기본적으로 한 줄 전체를 차지합니다.
여기에 width 속성을 따로 설정하면 정해진 공간만 차지하도록 수정할 수 있습니다.
header,
div,
h1,
section,
p,
form,
footer {
border: 1px solid black;
width: 50px;
}
width 속성을 50px로 설정하니 그에 맞게 크기가 조절되었습니다.
2. 기본값이 inline인 요소들
block 요소들은 기본적으로 한 줄 전체를 차지하는 반면, inline 요소들은 새로운 줄을 생성하지 않고 선언된 위치에서 최소한의 넓이만을 차지하며 나타납니다. 최소한의 넓이는 이 요소가 가진 내부 콘텐츠의 크기를 의미합니다.
다음 요소들이 inline에 해당됩니다.
- span
- a
- img
<!DOCTYPE html>
<html>
<head>
<style>
span,
a,
img {
border: 1px solid black;
}
</style>
</head>
<body>
<span>span</span>
<a>a</a>
<img alt="img" />
</body>
</html>
요소들이 줄 바꿈을 하지 않고 한 줄에 배치되었습니다.
inline 요소에는 width나 height 속성을 설정해도 그 값이 무시됩니다.
(img 태그는 이미지 src가 올바르게 설정된 경우 이미지 파일의 크기로 지정됩니다)
span,
a,
img {
border: 1px solid black;
width: 999px;
height: 999px;
}
width와 height 속성을 999px로 설정해도 변화가 없는 모습입니다.
3. display 속성을 변경
각 요소에 기본값으로 설정된 display 속성을 변경할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline;
border: 1px solid black;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
display 속성의 기본값이 block인 div에서 속성값을 inline으로 변경한 모습입니다.
4. inline-block
inline-block 값은 요소에 inline이 가지는 특성과 block이 가지는 특성이 모두 필요할 때 사용합니다.
어떤 경우가 있는지 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid black;
}
span {
border: 2px solid red;
}
</style>
</head>
<body>
<div>안녕하세요 웹 개발자<span>JW</span>입니다</div>
</body>
</html>
위처럼 div 요소 안에서 특정 부분만(JW) 원하는 스타일을 적용하고자 할 때 중간에 span 태그를 활용할 수 있습니다. 이때 span의 길이를 특정한 값으로 설정하고 싶을 땐 어떻게 할까요?
위에서 살펴봤듯이 span 요소는 inline이기 때문에 width 속성이 적용되지 않습니다.
그렇다고 block으로 바꾸고 width를 설정하면 다음과 같이 줄이 넘어가버립니다.
이럴 때 inline-block을 사용하면 inline처럼 한 줄 안의 위치가 유지되면서도 block처럼 width를 설정할 수 있습니다.
div {
border: 1px solid black;
}
span {
border: 1px solid cyan;
width: 100px;
display: inline-block;
}'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, JAVASCRIPT] 요소가 화면에 들어왔는지 확인하는 방법, Intersection Observer API (1) | 2024.01.23 |
|---|---|
| [HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리 (1) | 2023.12.31 |
| [HTML, CSS] 하트 만드는 방법 - before, after (0) | 2023.12.28 |
| [HTML, CSS] transform, transition으로 요소 이동 및 변형시키는 방법 / 동적인 효과(애니메이션) (0) | 2023.12.28 |
| [HTML, CSS] flexbox(display: flex) 총정리 (0) | 2023.12.28 |
