끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩] 섹션5-1~3. flex_diplay 속성? flex-direction? flex-grow & shrink?? 본문

프로그래밍 언어/CSS 공부

[인프런/생활코딩] 섹션5-1~3. flex_diplay 속성? flex-direction? flex-grow & shrink??

쓰리별 2021. 3. 2. 20:12

5-1. flex : intro

: 주로 레이아웃을 잡을 때 사용하는 기능.

어떤 컨텐츠를 만들 때, 그 컨텐츠를 잘 정돈해서 구조화시킬 때 사용하는 것 = 레이아웃.

당연히 ‘레이아웃’은 디자인할 때 가장 중요한 주제.

 

우선 플렉스를 사용하기 위해선 태그가 두 단계가 필요하다.

ex) <li> 태그는 부모태그인 <ul> 이나 <ol> 태그가 필요한 것처럼.

정렬하고자 하는 각각의 item들은 부모 태그에 해당하는 container의 역할을 하는 태그가 필요하다.

(저런 태그는 없고, 저런 역할을 하는 태그를 활용한다는 의미)

대충 요런 애들이 있다.

위 그림과 같이 정렬의 대상이 되는 아이템들은 컨테이너에게 부여해야 하는 속성들이 있고 안쪽에 있는 아이템들에게 건네줘야 할 속성들이 있다.  그래서 우리는 그것을 구분해서 어떤 속성은 컨테이너 어떤 것은 아이템들에게 주는 ‘코딩’을 해야 한다.

 

5-2. flex : basic(display 속성과 flex-direction)

: 정렬을 하려면 2단 태그가 필요하다고 배웠다.

 

class의 속성값이 container란 녀석을 만들고 그 안쪽에 class의 속성값이 item이란 아이 5개를 만들어보겠다. 라고 한다면 ‘아톰’에서 이렇게 쓰면 된다.

.container>.item*5 그리고 그 각각의 태그에는 그 안에다가 숫자를 1씩 증가시킬 것이다. 라고 하면 .container>.item{$}*5

 

★ 중요한 점은 flex값을 주기 위해서 꼭 <div> 태그를 쓸 필요도 없고 class의 속성값을 container라고 줄 필요도 없다. 다만, 부모와 자식이 있어야 한다. 라는 것이다! ★ VS CODE에서 HTML 기본 형태 만드는 방법 : 느낌표 TAB 누르기.

 

다음과 같이 코드를 표현하자.

<!DOCTYPE html>

<html>

<head>

<style>

.container{

background-color: powderblue;

}

.item{

background-color: tomato;

color:white;

border:1px solid white;

}

</style>

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

</div>

</body>

</html>

 

이렇게 표현하면 각각의 item들이 한 줄씩 표현되는 이유는?

이렇게 표현됨. (당연히 flex값을 주지 않았을 때)

<div> 태그는 화면 전체를 쓴다는 특성.(블록레벨 태그)

 

이번 강의 목표 : 블록 레벨 엘리먼트들을 자유자재로 배치해보도록 하자.

★★ 이를 위해서 ‘flex’를 사용한다고 하면, 반드시 출발점은 바깥쪽 부모들 즉, 여기선 .container에게 display 속성값을 flex로 주는 게 시작이다 ★★

 

container에 display 값으로 flex 적용 후,

즉, flex 값을 주지 않았을 때, 자식들은 자신의 성격에 따라 블록이니까 화면 전체를 쓰는데 반해, 부모에게 flex 값을 주니까 달라진다. 이것이 flex의 기본. 이러한 flex는 속성이 다양하기에 까다롭다.

수많은 속성의 flex도 결국엔 이 각각의 태그들을 정렬시키는 방법을 말한다.

 

위의 상황에서 각각의 태그들을 반대편으로 정렬시키려면 부모 CSS 영역에 다음을 추가하면 된다. flex-direction:row-reverse; 이 flex-direction의 기본값은 ‘row’이기에 값을 지정하지 않으면 다시 원래 상태로 돌아온다. (포지션 기본값이 static / box-sizing의 기본값이 content-box인 것처럼) row라는 것은 행, 즉 행의 방향으로 정렬시키겠다는 의미.

 

만약, 열의 방향으로 정렬시키고 싶다면? ‘column’ 속성값을 부여하면 된다.

근데 맨 처음 만든 코드와 지금 display값에 flex를 주고 flex-direction에 column 값을 부여한 결과값이 처음에 background-color만 있는 것과 차이가 없다. 그럼 무슨 차이가 있냐?? container에 height 값을 주면 다른 게 보인다.

( ★ 110px 이상은 줘야 여백이 보인다.)

 

즉, flex를 하기 위해선 바깥쪽에 해당하는 container에 display 값을 flex로 주어야 하고,

flex-direction값을 지정하지 않으면, 기본값 row가 지정된다. 라고 생각.

기본적으로 flex는 각각의 태그가 그 방향의 화면 전체를 차지한다.

 

5-3. flex-grow & shrink

 

이번에 배울 속성들은 item에게 주는 속성들이다.

일단 다음과 같이 코드를 만들자.

<!DOCTYPE html>

<html>

 

<head>

<style>

.container {

background-color: powderblue;

display: flex;

flex-direction: row;

height: 200px;

}

 

.item {

background-color: tomato;

color: white;

border: 1px solid white;

}

</style>

</head>

 

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

</div>

</body>

</html>

 

여기서 2 번째 아이템에 대해서 크기를 주고 싶은 경우, 우째?

style 영역에 .item:nth-child(2)라고 준다. 무슨 의미냐면, class 값이 item인 엘리먼트 중 2번째 등장하는 것에 CSS효과를 주고자 한다. 라는 의미를 가진 선택자.

이 구역에 flex-basis: 200px; 값을 주면, 크기가 변한다. basis는 기본이라는 뜻. 기본 크기가 200픽셀이 된다. 다음은 결과 값이다. flex-direction:row;

 

.item:nth-child(2){flex-basis: 200px;}

여기서 부모인 컨테이너의 flex-direction의 값을 column으로 바꿔주면, 2번째 엘리먼트의 수직으로서의 크기가 200px이 된다는 의미.

.container{flex-direction:column; 로 변경한다면,}

 

즉, flex-basis는 엘리먼트의 크기를 지정한다.

일단, flex-basis는 주석처리하고,

 

이제 flex-grow에 대해 배워보자! (★ 어렵다)

 

여기서 왜 아이템들 옆에 파우더블루 색이 있는 걸까?

그 이유는 컨테이너란 클래스 값을 가진 엘리먼트에 백그라운드 컬러를 파우더 블루로 주었기 때문이고, 나머지 item 엘리먼트들의 부피가 저만하기 때문에 나머진 여백으로 표시되는 것이다.

 

이 아이템들을 컨테이너에 여백없이 다 채우고 싶을 때, 어떻게 해야 할까?

class 속성값을 item이라 갖고 있는 애들에게 flex-grow 속성값을 부여하면 된다.

flex-grow 값을 0은 기본값이기에 0으로 설정하면 당연히 변화가 없으나, 1로 설정하면 다음 그림과 같이 변한다.

.item{flex-grow:1;}

즉, flex-grow라는 속성은 각각의 item 엘리먼트들에게 container 영역을 1/n 엔빵! 시키는 것과 같다. 라고 생각하자.

 

이 상태에서 2번째 엘리먼트의 크기를 더 늘리고 싶으면 이놈 영역에 flex-grow:2;처럼 설정하면 된다. 다음과 같이 말이다.

.item:nth-child(2){

flex-grow: 2;

/* flex-basis: 200px; */

}

즉, 아이템 엘리먼트 1, 3, 4, 5는 1/6의 영역을 가져가지만, 2번째 엘리먼트는 2/6만큼의 여백을 가져갔음을 알 수가 있다. flex-grow의 값이 커질수록 당연히 갖는 영역도 커진다.

 

이 상태에서 모든 아이템에 대해서 flex-grow값을 0을 주면, 다음과 같이 변한다.

.item{flex-grow:0;} .item:nth-child(2){flex-grow:2;}

여기서 2번째 엘리먼트의 flex-grow값을 1로 바꿔도 변화는 없다. 왜냐? 당연히 모든 아이템 엘리먼트의 flex-grow 값에 대해서 0을 부여했는데 2번째 엘리먼트의 flex-grow 값을 1로 하든 2로 하든 갖는 여백 값은 혼자 독차지하겠다는 의미와 다를 바가 없기 때문이다! ★

 

이렇듯, grow라는 기능은 레이아웃을 짤 때, 아주 중요한 기능을 한다!

 

일단 다음 기능을 배우기에 앞서 다음과 같이 코드를 변경한다.

<!DOCTYPE html>

<html>

<head>

<style>

.container {

background-color: powderblue;

display: flex;

flex-direction: row;

height: 200px;

}

 

.item {

background-color: tomato;

color: white;

border: 1px solid white;

 

}

.item:nth-child(2){

flex-basis: 300px;

}

</style>

</head>

<body>

<div class="container">

<div class="item">1</div>

<div class="item">2</div>

<div class="item">3</div>

<div class="item">4</div>

<div class="item">5</div>

</div>

</body>

</html>

 

이 상태에서, 화면을 드래그하면서 여백의 공간을 줄여나가면 flex는 결국 컨테이너의 영역도 사라지면서 컨텐츠 그 자체의 크기(아이템들의 크기)도 작아지는 경향성을 갖고 있다. 이때, 1,3,4,5는 더는 컨텐츠를 제외한 나머지 영역이 없기에 작아지지만, 2는 우리가 flex-basis값으로 300px을 줬지만, 어쨌든 여백이 존재하기에 화면이 작아진다.

 

작아졌을 때의 그 크기를 2번이 고통 분담해서 자기의 부피에서 빼고 있다고 생각하면 쉽다.

이때, 2번이 고통 분담을 하지 않고 자기 거를 그대로 갖고 있게 하는 기능이

flex-grow의 ‘반대’ 기능인 flex-shrink이다!!! ★

flex-shrink 값을 0으로 주니 2번은 더는 고통 분담을 하지 않는다. 하지만, 1로 주면 그때부터 다시 고통 분담을 하게 된다. ★★★

 

.item:nth-child(1){

flex-basis: 150px;

flex-shrink: 1;

}

.item:nth-child(2){

flex-basis: 150px;

flex-shrink: 2;

}

 

위의 상황에서 shrink의 값이 총 3이다. 여기서 화면을 줄이면,

2가 1의 크기보다 훨씬 빨리 작아지는 것을 확인할 수가 있다. 머선 소리고?

즉, 2번은 2/3만큼 고통을 분담한다는 것이고 1은 1/3만큼 분담한다는 의미다.

 

근데, 문제가 있다. 어떤 브라우저로 들어가도 화면이 일정 부분에서 줄어들지가 않는다.

그래서 shrink 수업을 듣는 데 많은 제약이 따랐다. ( 컨텐츠 안에 내용이 없어서 줄어들지 않았던 것 같다. 내용을 좀 많이 채워넣으면 눈에 띌거 같다!)

 

저작자표시

'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글

[인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인  (0) 2021.03.04
[인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들?  (0) 2021.03.02
[인프런/생활코딩] 섹션4. 레이아웃 기본 (3) position-fixed?  (0) 2021.02.26
[인프런/생활코딩] 섹션4. 레이아웃 기본(2) position - relative VS static? absolute? (얘! 정신차리렴)  (0) 2021.02.26
[인프런/생활코딩] 섹션4. 레이아웃 기본 (1) in-line VS block-level? box model? box-sizing? margin collapsing?  (0) 2021.02.26
'프로그래밍 언어/CSS 공부' Related Articles more
Comments