13일. CSS(4) - display(inline vs block), display: flex, flex-grow(배수로 여백 나눠가지기), flex-shrink

*복습

큰 방

- height, 수치

- background-color

- min-height

 

두번째 방

- margin-left : auto 

 

세번째 방

- width 

- display : flex 

  -> 같은 줄에 나오게 됨

 

* diplay

크게 2개

- block 이냐 inline 이냐 

- block 

  같은 라인에 x 

  무조건 수직!으로 방을 만듦

- block에다가 스타일을 좀 준 애들이 list-item

- table은 약간 가변 크기를 갖는

  층들이 같은 column?을 갖도록 하는거 (table-cell)

- 너비너 높이를 줄 수 있는게 inline-block 

  주로 단일 태그들이 이렇다. ex) img, input 등 

  누구 감싸고 있는 애들이 아니라 자체 태그인 것들이 주로 이 형태. 

단일태그는? height는 안 먹음

아무리 너비 높이를 넣어도 안 먹는게 있음

-> 그래서 display 넣어봤더니 적용되더라~ 하는 예제였다. 

 

*소그룹에서 더 이해한 거* 

ex) 대표적인 블록! 태그 <h1>

-> <h1 style="background-color: red;"> 안녕하세요 </h1>

    <h2 style="background-color: yellow;"> 저는 </h2>

    를 적어서 스타일을 넣어주면

-> 안녕하세요, 저는 부분만 아니라 block이라서 쭈욱~ 색깔이 입혀지게 된다. 

-> 근데 display: inline을 해주게 되면 

-> 안녕하세요 저는 

    저렇게 올라가고! red, yellow 도 저 영역만 칠해지게 된다! 

 

So, 

이 개념을 가지고 위에 예제를 다시 이해해보면

-> html 태그에 아래를 넣었고 여기에 width:200px;를 주려고 했는데 적용이 되지 않았지.

 <a href="" style="background-color: blue;">test link</a>

   그 이유는 인라인태그는 컨텐츠지, 방이 아니기 때문. (width와 height는 방에만 적용 가능하지)

-> 그래서! 방을 만들어주는 display:inline-block을 해주고, width와 height를 준다는 예제였다. 

 

 

 

Q. 인라인 (방 만드는거 제외하고) vs 블록 (5  3 div section4) 구별해보자.

<home>? 

<br> -> 인라인

<video> -> 인라인 블록

 

cf) 블록

5개. 제목, 목록...

3개. head? main. footer

div (이도저도 아닌거)

4개. section, nav, aside, ... 

 

---

최근에 flex, grid가 포함됨 

 

* flex

과거. 뉴스 시대에는 이게 좋았지만...

요즘

어플 만드는 형식으로 많이 발전 (이게 css에도! 들어왔다는 것 - what WG(working group) 회사?에서 계속 연구 중)

 

 

 

* flex box 레이아웃

범용적으로 사용 가능

의미없다는 부분 놓침

인라인들 -> inline-flex

블록들 -> flex 

 

실습 

높이를 안줬으면 제대로 감쌌을텐데, 높이(여기서는 height:100px;)를 줘서 5가 회색 안에 들어가지 않음 

 

이렇게 하면 각 div가 아니라 박스 전체가 greenyellow인 것처럼 보임

그래서 class들을 각각 줘서 

색깔을 다르게 해보려 함 

쨘

그리고 display:flex를 맨 윗단 container에 줘서, 아래 div들도 영향을 주도록 해주면 

cf) #container>.box{$}*5하시면  컨테이너도 아이디 자동생성 됩니다. 안되는뎅?? 

 

(선생님거로 색깔을 바꾸고 다시)

이렇게 나온다. 

다양한 멋진 일을 할 수 있게 된다. (display? flex?) 

정렬, 수평, 수직 등등 

 

display:flex하면 크기가 줄어든다.

수직으로 쭉 배치되었다가 -> 온순하게 수평 방향으로 나열해줌

빈 여백이 생김

 

• flex-grow : 여백을 채우자

그러려면 커져야함. 

 

너비가 두 배는 아님! 

'남은' 여백을 더 가진 것 

이렇게 여백을! 더 가진 것~ 

 

flex-grow 자체도 넓이를 똑같이 나눠가지는게 아니라! 여백을 나눠가지는 것

 

전체 container>div 여기에 flex-grow 뒤에 1000을 넣어도 상관 없는건, "어차피 넓이를 같게 나눠가지기에"라고 말씀해주셨당. 

 

ㅡㅡㅡㅡㅡ

 

반응형 웹처럼 왔다갔다 함 지금은

-> 고정하고 싶음

or 1번만 고정하고 싶다. 

 

여백을 나눠갖는 건 box3만 설정해줬으니 다 여기 몰빵

-> 이게 다 줄어들고, 200px로 고정시키고 싶었던 얘도 줄어듦.

 

cf) 고정값을 3번으로 하면 어떻게 될까 싶었는데, 

    여백 준 1 값이 먼저! 줄어들고 그 다음 3이 줄어든다. 신기 

 

shrink 안할래! = 0 (안 줄어들래!)

난 왜 줄어들지 ㅠㅠ 

-> 안 줄어듦. 아래 스크롤바가 생긴걸 볼 수 있을 것

 

width는 flex-basis로 바꿀 수도 있다.  

flex-basis는 width 개념이 아님.

just 최소 이만큼은 확보하겠다~는 아이. 

---

diplay-flex를 꺼보면 -> 수직으로

display-flex를 끄면 flex 관련된 건 하나도 먹지 않는 듯 (당연한 소리?) (저거 column 지워도 결과 위에와 같음)

이게 예전에는 희귀?했다고 이해하면 쉬우려나... 

-> 색깔! 있는 div들이 지금 옆으로 쭉 - 나열되었으니 row! 

    아래는 아래로! 나열되었으니 column! 

flex-row : 수평 방향으로 나열하겠다.

flex-colum : 수직으로 나열하겠다.

- 이 아이들 때문에 width 대신에 flex-basis로

 

width, height - row, column 이해

 

무조건 row 밖에 안쓴다면 width로 써도 되지만,

column 쓰면 flex-basis로 해야! 

 

만약 width:200px로 하면 저렇게 결과 아니고 높이 똑같이만 나옴

 

질문 1) 왜 height 아니라 width지? (근데 height 써도 결과는 같음)

질문 2) flex-basis와 flex-shrink를 같이 써야만 저렇게 되던데... 

           -> 전체 container가 100px이기 때문임. 만약 shrink를 쓰지 않으면 100px로 줄어들게 되는거지. 

 

 

 

• flex-basis : row-reverse : 오른쪽부터 글씨 쓰게 하는 기능

 

 

어렵다기보다는 신기하고 재밌게 느끼셨으면 좋겠어요~~ 

 

 

 

 

heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드