CSS display 속성: block, inline, flex (+) vh 단위

block, inline

block: 옆에 아무것도 올 수 없다. 혼자 한 줄을 차지. <div>, <p>, <h1> 등.

inline: 높이(height)와 너비(weight)가 없음. 옆에 다른 요소가 올 수 있다. <span>, <link>, <image> 등. 

 

display 속성값 변경

display: block;
display: inline;
display: inline-block;

inline-block: 박스 모양이지만 inline

등으로 속성값 변경 가능.

 

block의 대표적인 특징 3가지

1. margin
2. padding
3. border

 

margin

box의 border(경계)의 바깥에 있는 공간.

주황색 부분이 margin.

 

inline 은 위, 아래 margin을 가질 수 없다. 높이와 너비가 없기 때문.

(padding은 사방으로 가질 수 O)

∴ margin을 가지기 위해서는 inline요소들을 block으로 바꿔야 한다.

/* 마진이 사라진다 */
margin: 0px;

 

/* 사방에 다 적용 */
margin: 20px;

/* 위, 아래는 20px, 좌, 우는 50px 적용 */
margin: 20px 50px;

/* 위쪽, 오른쪽, 아래쪽, 왼쪽 뜻(시계방향) */
margin: 20px 5px 10px 15px;

 

collapsing margin

body의 경계가 보라색의 box와 같다면 이 두 마진을 하나로 친다.

아무리 body의 위, 아래 마진을 바꿔도 적용이 안된다,, → 이럴 땐 padding 이용!

위, 아래쪽에만 이 현상이 일어남.

 

padding

margin의 정반대 개념.

box의 border(경계)의 안쪽에 있는 공간.

 

flexbox

 

body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
}

 

• justify-content: main axis 위에서 움직임
• align-items: cross axis 위에서 움직임.
• flex-wrap: default값은 nowrap. 부모 넓이보다 요소들의 총 넓이가 크다면 강제 축소되지만, wrap 속성을 통해 축소되지 않고 원래 크기 유지 가능.

수평, 수직 X. 왜냐하면 축은 바뀔 수 있기 때문이다.

flex-direction: column;

수평과 수직이 바뀜. (main axis가 수직이 됨.)

default 값은 row.

 

vh 란?

vh = viewport height = screen height

height: 100vh;

 

화면 높이의 100%를 뜻함.

이 단위를 사용하면 화면크기에 따라 상대적인 위치를 보여준다.