난 평생 FLEX하지 못할거같다.

춤추는망고·2020년 3월 26일
1

정리 전 블로그 글들

목록 보기
32/40
post-thumbnail

WeCode 7기로 수업을 받고있는 슈퍼개발자,

춤추는망고입니다.

( 춤 안춥니다. )





- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.

( 코딩나라에서 살아남기 정도로 보시면 됩니다. )













WeCode 의 넷째날인 오늘,

제가 정리할 내용은 !





웹개발이라는 된장국의 간을 맞추는 방법인,

CSS 입니다.







이번 글에선,

지난 글까지 CSS 의 기초를 배운 뉴비가

'뭐야? 이거 쓸모없는거 아니야?'

라는 말도 안되는 생각을 갖고있을때,
응 아니야~ 라고 말하는 CSS 의 Flexbox 라는 녀석을 소개합니다.






지난글에서 인테리어의 이론을 배웠다면,






이번글은 인테리어 실전이라는 느낌입니다.

( 실기시험 기출문제 같은겁니다 )






이번 글은 '이 구역 대빵이 나야!' 에 대한 내용입니다.
-> 어떤 구역에 대해서, 질서정리 잘하자는 말입니다
( 웹문서요. 웹문서. )
























서론이 길었네요.







CSS 의 flexbox 로 웹 문서의 구조를 다루게 되었다는 것은.

여러분이 정리왕 김정리가 된 것과 같다고 생각합니다.







기왕 정리왕이 된거, 더 잘하고싶다구요?












정리를 시작하려면, 규칙을 익히고, 하는법을 알아야 하는법.

내 구역을 정리할 때 너무나도 편리한 flexbox 의 법칙부터 알아야합니다.
( 개굴개굴 개구리~ 가 핵심입니다. )






flexbox 란?

  1. container, line, item 으로 구성
  2. 좌->우, 상->하 방향이 기본 ( 글쓰는거랑 비슷해요 ㅋ )
  3. display 속성에 inline flex 혹은 flex 값을 줘야함
    -> flex : block 처럼!
    -> inline flex : inline 처럼!

( 어제까지 배운건... 쓸모있었습니다! )






flexbox 의 구성요소

  1. conatainer : Flex 그 자체....
    -> 우리가 정리할 구역이라고 보시면 되요.
    --> 상자같은거에요.





  2. item : conatainer 의 자식요소
    -> 우리가 정리할 대상이라고 보시면 되요.
    --> 안에 들어있는 물건같은거에요.





  3. line : 기본적으로 하나씩 있는 정리기준선
    -> main axis ( 주축 ) : 좌~우 축
    -> cross axis ( 교차축 ) : 상~하 축
    -> 양 끝점인 start, end 와 direction 으로 이루어짐

이 글의 근원지에 있는 사진자료입니다...
https://static.bocoup.com/blog/flexbox%20diagram%202.jpg
( 그 대단하신분의 귀여운 발그림 ㅋ )









1. container 의 속성들

1-1. line 을 다루는 속성

line 이 예술이다. smart!

  1. flex-direction : 축 바꾸기~
    row : 평범쓰 ( 기본값 )
    column: 글을 썼는데, 좌우가 아니라 상하로?;
    (뒤에 -reverse 를 붙이면, start 랑 end 지점 뒤집기~)





  2. flex-wrap : line 이 여러개 ?!
    nowrap : 선은 하나만! ( 기본값 )
    wrap : line 에 공간이 부족하면 새로운 line 추가!
    (뒤에 -reverse 를 붙이면, 새 line 이 반대편에 생김~)





  3. 나? 둘 다!
    flex-flow: [flex-direction][flex-wrap]
    예 ) flex-flow: column nowrap;
    둘 다 한번에 설정할 수 있쥬? 개꿀이쥬?





  4. align-content : line 정리하기~
    이 친구는 item 을 다루는 속성과 비슷한 값들을 가진다구~
    ↓ 의 속성 정리함을 참고해!

1-2. item 을 다루는 속성

  1. justify-content : 주축에서 item 정리하기~
    -> https://static.bocoup.com/blog/flex-pack.svg
  2. align-items : 교차축에서 item 정리하기~
    -> https://static.bocoup.com/blog/flex-align.svg



+----- 이 속성 정리함이 정리했으니, 안심하라구!-----+
|					   |
| - flex-start: 컨테이너의 start 에 정렬	   |
| - flex-end: 컨테이너의 end 에 정렬	   |
| - center: 가운데에 정렬			   |
| - space-between: 여러 줄들 사이에 동일한 간격   |
| - space-around: 여러 줄들 주위에 동일한 간격	   |
| - stretch: 여러 줄들을 컨테이너에 맞도록 늘림	   |
| - baseline : item 내용의 첫줄을 기준으로 정렬   |
|					   |
|  -> 어쨋든 들어갈 수 있는 속성값은 이게 다임	   |
|     한번씩 넣어보고 감을 잡는게 좋음		   |
+------------------------------------------+

2. item 의 속성들

item 의 속성을 알아보기전에, item 만의 특징부터 한번 봅시다!

  1. float 속성을 써도 container 안의 item 한테 아무영향 X !
  2. main ( 주축 ) 에 대한 size 와 cross ( 교차축 ) 에 대한 size 가 있음
    ( -> 이건 이번글 끝나고 직접 해보면서 느껴보시는게 좋아요 ㅎ )



2-1. line 을 다루는 속성

  1. order : +1 이나 -1 로 순서정해주깅





  2. margin : auto -> 완벽한 정가운데를 원한다면!
    예 ) margin-right : auto 처럼 입력하면, 나머지들을 한쪽으로 밀어버림





  3. align-self : align-items 속성을 다르게 주고싶은 item 에 쓰기
    - stretch 가 기본값이고, 내용은 align-items 랑 똑같음





  4. flex : 어떤 값이 오냐에따라 달라지는 flex ~
    -> 숫자 : 모든 숫자의 합으로 구역을 나누고, 숫자만큼 공간사용쓰 !
    -> initial : 일정크기 이상으로 커지지 않으면서 유동적
    -> auto : 주축 위에서 유동적
    -> none : 어떤 상황에서도 고정적







복잡하시죠?








ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
















이거로 복잡하시면, 앞으로는 ㅋ





오늘 내용은 직접 해보는게 중요합니다.

( 뭐든지 해보는게 중요하지만, 요건 진짜 쓸만해서 더 해봐야되욥 )






대충 ' 나중에는 이런거 써서 꾸미는구나...' 정도로만 생각하시구요.

연습하는 셈 치고, 아무거나 직접 해보세요. 꼭!















아 ㅋ 물론 귀찮으실걸요? ㅋ



























오늘은 부록에 선물있습니다.

( 김 둘리님이 주셨습니다 )





솔직히 말하자면, 정리한 내용 보는거보다 저게 더 좋은듯;;






내 것인것과, 내 것이 아닌것.






솔직히 ' 이거 외울바에는, 쓸때마다 그냥 찾는게 낫다. ' 생각합니다.

그래도 내가 언젠가 찾아볼때, 내거였던것은 더 잘 기억납니다.






flex~ 뽜끄! 를 내꺼로 만들라 이 말입니다!









고생하셨습니다.

실습용 개구리 게임이나 하십쇼. 귀여운 개굴띠 ㅇ_< ~*






감사합니다. ( _ _)












부록





인생은 실전이다링 개굴개구링~!

: https://flexboxfroggy.com/#ko

profile
지금까지 이런 망고는 없었다. 이것은 개발자인가 춤추는망고인가

2개의 댓글

comment-user-thumbnail
2020년 3월 26일

플렉스해버렸지뭐얌

1개의 답글