코딩독학) CSS display, position, flex

박스 사이즈를 조절하는 방법에 이어서 박스를 배치하는 방법에는 display와 position 이라는 개념을 알아야 한다.

 

Position

포지션의 속성값에는 아래와 같은 속성들이 있다.

 

static: 디폴트 값이며, 아무런 포지션 값을 변경하지 않은 상태.

absolute: 절대 값을 의미하며, 부모의 위치값이 지정되지 않았을 때는 웹페이지를 기준으로 위치값을 잡고, 부모의 위치값이 조정되었을 경우에는 부모 요소가 기준이 된다.

fixed: 고정되었다는 뜻이며, 스크롤을 내려도 위치가 변하지 않는다. 웹페이지를 기준으로 위치값을 잡는다.

relative: 상대 값을 의미하며, 부모 요소 혹은 부모 요소가 없을 경우 인접한 요소를 기준으로 위치값을 잡는다.

sticky: 지정된 오프셋 값에 스크롤이 움직이기 전까지는 relative 처럼 위치를 가지고 있다가 스크롤 위치가 지정된 위치에 오면 fixed 처럼 위치를 고정한다.

※ fixed와 sticky는 스크롤과 관련된 위치 값!!

 

예제 연습

위의 예제는 직접 만들어보고 스크롤을 내려보면 이해하는데 더 도움이 된다.

 

z-index

position이 적용된 아이템들은 상황에 따라 겹치기도 하는데 그동안 x축과 y축만 있었던 공간에서 z-depth 즉, 깊이가 생겨 아이템들이 보여지는 순서를 컨트롤할 필요성이 생기게 된다. 숫자가 작을 수록 아이템들의 순서가 뒤로 가고 클 수록 순서가 앞으로 온다.

 

예제 연습

Display

디스플레이, 말그대로 요소(element)들을 표시하는 방식에 대한 속성을 말한다.

디스플레이의 속성에는 여러가지가 있는데 자주 쓰이는 것들만 언급하고 나머지는 필요하신 분들만 찾아보시도록 링크를 남겨 놓겠다.

 

inline: 요소(element)를 인라인 요소 형식으로 표시하겠다는 뜻.

block: 요소(element)를 블록 요소 형식으로 표시하겠다는 뜻.

flex: 요소(element)를 플렉스 방식* 으로 표시하겠다는 뜻.

grid: 요소(element)를 그리드 방식* 으로 표시하겠다는 뜻.

inline-block: 요소(element)를 인라인이지만 블록 요소처럼 width와 height 값을 조절할 수 있도록 표시하겠다는 뜻.

none: 요소(element)를 없애겠다는 뜻. (delete) - visibility: hidden과 차이점은 숨김과 제거의 차이다.

CSS display property

여기서 주의깊게 들여봐야할 속성은 flex와 grid이다. grid는 최근에 나온 CSS 기술이라 아직 지원하지 않는 웹 브라우저가 많아서 상대적으로 덜 쓰이고, flex를 잘 다룰 줄 알면 웹페이지 레이아웃을 자유자재로 짤 수 있게 된다.

 

Display: flex;

우선 플렉스 방식이 무엇인지 알아야 한다. 레이아웃을 구성하기 위해 박스 모델에 대해 배웠고, 이러한 박스 모델은 블럭 요소로 구성이 되어있다는 것을 알았다. 블럭 요소는 한 줄을 전부 공간으로 차지하고 있기 때문에 박스들을 위에서부터 아래로 줄 세우기를 할 수 밖에 없었는데, 플렉스(유연하다는 뜻) 방식을 차용함으로써 자유자재로 블럭 요소들을 배치할 수 있게 되었다.

 

플렉스 방식을 적용하고 싶으면, 일단 내가 배치하고 싶은 요소들은 둘러싼 부모 요소에 display: flex; 를 적용해줘야 한다.

 

예제 연습

플렉스를 적용하기 전

플렉스를 적용한 후

 

플렉스를 적용하고 나면 세로로 배치되어있던 네모 박스들이 가로로 배치된 것을 볼 수 있다. 플렉스는 단순히 가로로 배치하는 것뿐만 아니라 다양한 속성들을 이용해 여러가지 방식으로 배치할 수 있도록 도와준다.

아래는 플렉스의 속성들이다.

 

flex-basis: 플렉스가 적용된 요소의 초기 길이값을 정하기 위해 사용. 초기 길이값이라고 명시하는 이유는 플렉스 방식을 적용하게 되면 화면 비율이 늘어나고 줄어듦에 따라 요소들의 크기도 변하기 때문이다.

flex-direction: 플렉스가 적용된 요소의 배열 방식을 정하기 위해 사용. 

flex-grow: 플렉스가 적용된 요소의 크기를 다른 요소의 상대적 비율에 의해 지정하기 위해 사용.

flex-shrink: 플렉스가 적용된 요소의 크기를 다른 요소의 상대적 비율에 의해 얼마나 줄어드는지 지정하기 위해 사용.

flex-wrap: 화면 크기가 늘어나고 줄어들 때 요소들의 배치를 자연스럽게 변형되도록 하기 위해 사용.

※ flex-grow, flex-shrink, flex-wrap은 반응형 웹 페이지 제작을 위해 필요한 속성이다.

 

flex-basis

플렉스는 반응형 웹 작업에 최적화 되어있는 속성이다. 그래서 화면 비율이 변함에 따라 웹페이지도 같이 변형되고 반응하도록 되어있다. flex-basis는 flex가 설정된 방향, 즉 column이나 row에 상관없이 flex 아이템들이 배치된 방향의 아이템의 길이값을 설정해준다. basis는 기본이란 뜻으로, flex-basis로 기본값을 설정해준다. 기본값이라 함은 변할 수도 있다느 의미인데, flex가 적용된 아이템들은 웹 화면 비율이 늘어나고 줄어듦에 따라 크기가 변한다.

 

예제 연습

두번째 아이템의 flex-basis가 300px로 설정되어 있다.

 

flex-direction

플렉스가 적용된 요소의 배열방법을 선언해주는 속성이다. flex-direction의 속성값은 아래와 같다.

 

row: 디폴트 값이며, 줄 방향으로 아이템들이 배치된다.

row-reverse: 줄 방향으로 배치되지만 아이템의 순서가 역순서로 변한다.

column: 열 방향으로 아이템들이 배치된다.

column-reverse: 열 방향으로 배치되지만 아이템의 순서가 역순서로 변한다.

 

예제 연습

 

flex-grow / flex-shrink

flex-grow와 flex-shrink는 플렉스가 적용된 요소의 크기가 웹 화면이 커지고 줄어듦에 따라 상대적으로 얼마나 커지고 줄어드는 지를 설정하기 위한 것이다. 여기서 크기는 flex가 설정된 방향에 관한 것이고, 웹화면 전체의 크기를 가지고 나눈다.

flex-grow와 flex-shrink 모두 기본 값은 1이며, flex-grow는 숫자가 커질 수록 크기도 커지고, flex-shrink는 숫자가 커질 수록 크기가 작아진다.

 

예제 연습

화면의 가로길이가 넓을 때

화면의 가로길이가 좁을 때

 

위의 예제를 보면 flex-direction이 row방향으로 되어있다. 화면 크기를 row방향으로 늘렸다가 줄였다가 해보면 

flex-grow에서 3이 적용된 짝수 즉, 2번 박스가 가장 크게 늘어났다가 화면 크기가 줄어들 수록 어느 순간 나머지 박스들과 크기가 동일해져 줄어드는 것을 볼 수 있다.

flex-shrink에서 처음엔 박스 크기가 동일했다가 어느 순간부터 3이 적용된 홀수 즉, 1번과 3번 박스가 더 많이 줄어드는 것을 볼 수 있다.

flex-grow는 숫자가 커질 수록 화면이 늘어날 때 더 커지고!

flex-shrink는 숫자가 커질 수록 화면이 줄어들 때 더 작아지고!

 

flex-wrap

flex-wrap은 화면 크기가 줄어들 때 박스들을 자연스럽게 밑으로 내려서 배치해주는 속성이다.

flex-wrap의 속성은 아래와 같다.

 

nowrap: 디폴트 값으로 랩핑을 하지 않겠다는 뜻.

wrap: 플렉스가 적용된 요소들에 랩핑을 하겠다는 뜻.

wrap-reverse: 플렉스가 적용된 요소들에 역순서 방향으로 랩핑을 하겠다는 뜻.

 

예제 연습

화면 크기가 아이템들을 모두 배치할 만큼 클 때

화면 크기가 모든 아이템을 다 배치할 수 없을 때

화면 크기가 줄어들었을 때,

nowrap을 하면 아이템의 크기가 줄어들어버리고,

wrap을 하면 아이템의 원래 크기가 유지되고 다 담기지 못한 아이템들은 다음 줄로 내려와서 배치된다.

wrap-reverse를 하면 아이템이 역순서로 배치되고 다음 줄로 내려와서 배치된다.

 

flex-flow

flex-direction과 flex-wrap을 한 번에 쓸 수 있는 속성이다.

 

예제 연습

flex-direction: column;

flex-wrap: wrap

↓

flex-flow: column wrap;

 

 

<추신>

지금까지 CSS를 배우면서 제일 어려웠던 개념이 바로 이 flex 였다. flex 속성들을 잘 섞어서 요리조리 배치를 많이 해봐야 개념이 더 확실하게 자리잡을 것 같다.

flex 개념을 연습할 수 있는 게임이 있어서 남겨두려고 한다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

 

 

출처

https://www.w3schools.com/cssref/css3_pr_flex.asp

CSS flex property

https://youtu.be/pgFyqS4oCIc