HTML, CSS 단골손님 dispaly 속성에 대해 파헤쳐보자.
Display 속성이란 요소들을 어떻게 배치하고 보여줄 것인지를 결정한다.
자주 사용하는 속성은 크게 none, block, inline, inline-block이 있다.
각각의 차이점은 무엇일까?
먼저 예제코드와 실행결과 화면을 보며 유추해보자.
<예제코드>
<head>
<style>
.wrap div{
border:4px solid palevioletred;
}
#none {
display:none;
}
#block-1 {
display:block;
}
#block-2 {
display:block;
width: 200px;
height: 50px;
}
#inline-1 {
display:inline;
}
#inline-2 {
display:inline;
width: 400px;
height: 100px;
}
#inline-block-1{
display: inline-block;
}
#inline-block-2{
display : inline-block;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="none">none</div>
<div id="block-1">block-1</div>
<div id="block-2">block-2</div>
<div id="inline-1">inline-1</div>
<div id="inline-2">inline-2</div>
<div id="inline-block-1">inline-block-1</div>
<div id="inline-block-2">inline-block-2</div>
<div id="block-1">block-1</div>
<div id="inline-block-2">inline-block-2</div>
</div>
</body>
<실행 결과 화면>
어느정도 감이오는가?!?!
1. display:none
UI 화면상에 보이지 않도록 숨기는 것이다.
어떠한 영역을 가지지도 않고 완전히 삭제된 것처럼 보이게 한다.
(visibility:hidden, disabled=true 와 다르게 공간까지 모두 사라짐)
2. display:block
화면 (ex. 웹브라우저, 스마트폰)의 가로 너비 기준으로 전체의 한 영역을 차지한다.
width, height을 통해 사이즈를 조절할 수 있으며,
지정하지 않으면 디폴트로 width는 화면 가로너비(100%) / height은 컨텐츠 만큼의 크기를 가진다.
3. display:inline
컨텐츠 만큼의 크기를 가지며 줄바꿈이 되지 않는다.
width, height을 지정할 수 없다. 예시의 #inline-2 처럼 크기를 지정해도 적용되지 않는 것을 볼 수있다.
margin은 상,하에 적용되지 않으며, padding은 시각적으로는 추가되지만 공간을 차지하지는 않는다.(각 요소간 겹칠 수 있다는 것을 의미)
4. display:inline-block
block과 inline의 특징을 모두 섞은 속성값이다.
컨텐츠 만큼의 크기를 가지며 줄바꿈이 되지 않는다.
width, height을 통해 사이즈를 조절할 수 있다.
* display block과 inline의 차이점?
가장 큰 차이점은 줄바꿈의 차이다.
block은 아예 하나의 공간을 자신이 모두 차지하고,
inline은 기존에 요소가 있으면 같은 라인의 뒤에 자리한다.
*display inline과 inline-block의 차이점?
둘다 모두 줄바꿈이 없이 영역을 공유하며 사용한다.
가장 큰 차이점은 width, height을 통해 명시적으로 크기를 설정할 수 있는지이다.
inline은 오로지 컨텐츠 영역만큼만의 크기만 가질 수 있으나, inline-block은 크기를 명시적으로 지정할 수 있다.
'프로그래밍 > HTML+CSS+JavaScript' 카테고리의 다른 글
| [CSS] 뷰포트란? 미디어 쿼리란? - 반응형 웹 | 화면 크기 제어 (0) | 2022.11.21 |
|---|---|
| [JavaScript] 자바스크립트에서 변수 안에 함수를 넣는 이유는? - 브라우저 공용 scope에 관하여 (0) | 2021.01.17 |
| [JS] javaScript의 use strict 선언이란? (0) | 2020.08.27 |