728x90
박스가 화면의 표시되는 방식을 바꾸어준다.
inline속성의 박스를 block처럼 출력되게 할 수 있거나 그 반대로도 가능하다.
하지만 span태그를 block요소로 출력 방식을 바꿔주어도 inline요소인 span안에 block요소가 삽입될 수 있지는 않다.
(출력형식을 바꾸는거지 성질을 바꾸는것은 아님)
div{
display:block;
width:100px;
height:100px;
border:1px solid red;
}
block요소의 박스들은 서로 한줄씩을 차지하여 쌓이게 된다.
inline으로 출력한 박스들은 서로 내용물까지의 크기만 차지하게 된다.
inline-block으로 출력한 박스들은 block의 출력성질을 가지지만 줄을 차지하지 않아서 옆으로 쌓이게 된다.
.test{
display:none;
width:100px;
height:100px;
border:1px solid red;
}
.test4 {
height:100px;
width:100px;
border:1px solid red;
}
test4번 상자만 출력하고 나머지는 none으로 출력
기존에 있던 상자 자리를 채우게 된다.
만약 또다른 출력속성인 visibility: hidden;을 사용하면 본래 자리는 차지하면서 출력만 보이지 않게된다.
'Front > CSS' 카테고리의 다른 글
[CSS] 블럭요소의 가로배치 레이아웃 (Layout - float, clear) (0) | 2021.01.21 |
---|---|
[CSS] 배경 (Backgrounds color, image, repaeat) (0) | 2021.01.19 |
[CSS] 블록요소의 CSS 패딩과 마진, (블록의 여백/Padding, Margin) (0) | 2021.01.17 |
[CSS] 마진상쇄현상(Margin Collapse) (0) | 2021.01.17 |
[CSS]박스 모델 (Box Model, box-sizing) (0) | 2021.01.17 |