( 춤 안춥니다. )
- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.
( 코딩나라에서 살아남기 정도로 보시면 됩니다. )
WeCode 의 넷째날인 오늘,
제가 정리할 내용은 !
이번 글에선,
지난 글까지 CSS 의 기초를 배운 뉴비가
'뭐야? 이거 쓸모없는거 아니야?'
라는 말도 안되는 생각을 갖고있을때,
응 아니야~ 라고 말하는 CSS 의 Flexbox 라는 녀석을 소개합니다.
( 실기시험 기출문제 같은겁니다 )
이번 글은 '이 구역 대빵이 나야!' 에 대한 내용입니다.
-> 어떤 구역에 대해서, 질서정리 잘하자는 말입니다
( 웹문서요. 웹문서. )
서론이 길었네요.
CSS 의 flexbox 로 웹 문서의 구조를 다루게 되었다는 것은.
기왕 정리왕이 된거, 더 잘하고싶다구요?
정리를 시작하려면, 규칙을 익히고, 하는법을 알아야 하는법.
내 구역을 정리할 때 너무나도 편리한 flexbox 의 법칙부터 알아야합니다.
( 개굴개굴 개구리~ 가 핵심입니다. )
- container, line, item 으로 구성
- 좌->우, 상->하 방향이 기본 ( 글쓰는거랑 비슷해요 ㅋ )
- display 속성에 inline flex 혹은 flex 값을 줘야함
-> flex : block 처럼!
-> inline flex : inline 처럼!
( 어제까지 배운건... 쓸모있었습니다! )
- conatainer : Flex 그 자체....
-> 우리가 정리할 구역이라고 보시면 되요.
--> 상자같은거에요.
- item : conatainer 의 자식요소
-> 우리가 정리할 대상이라고 보시면 되요.
--> 안에 들어있는 물건같은거에요.
- line : 기본적으로 하나씩 있는 정리기준선
-> main axis ( 주축 ) : 좌~우 축
-> cross axis ( 교차축 ) : 상~하 축
-> 양 끝점인 start, end 와 direction 으로 이루어짐
이 글의 근원지에 있는 사진자료입니다...
https://static.bocoup.com/blog/flexbox%20diagram%202.jpg
( 그 대단하신분의 귀여운 발그림 ㅋ )
line 이 예술이다. smart!
- flex-direction : 축 바꾸기~
row : 평범쓰 ( 기본값 )
column: 글을 썼는데, 좌우가 아니라 상하로?;
(뒤에 -reverse 를 붙이면, start 랑 end 지점 뒤집기~)
- flex-wrap : line 이 여러개 ?!
nowrap : 선은 하나만! ( 기본값 )
wrap : line 에 공간이 부족하면 새로운 line 추가!
(뒤에 -reverse 를 붙이면, 새 line 이 반대편에 생김~)
- 나? 둘 다!
flex-flow: [flex-direction][flex-wrap]
예 ) flex-flow: column nowrap;
둘 다 한번에 설정할 수 있쥬?개꿀이쥬?
- align-content : line 정리하기~
이 친구는 item 을 다루는 속성과 비슷한 값들을 가진다구~
↓ 의 속성 정리함을 참고해!
- justify-content : 주축에서 item 정리하기~
-> https://static.bocoup.com/blog/flex-pack.svg- 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 내용의 첫줄을 기준으로 정렬 |
| |
| -> 어쨋든 들어갈 수 있는 속성값은 이게 다임 |
| 한번씩 넣어보고 감을 잡는게 좋음 |
+------------------------------------------+
- float 속성을 써도 container 안의 item 한테 아무영향 X !
- main ( 주축 ) 에 대한 size 와 cross ( 교차축 ) 에 대한 size 가 있음
( -> 이건 이번글 끝나고 직접 해보면서 느껴보시는게 좋아요 ㅎ )
- order : +1 이나 -1 로 순서정해주깅
- margin : auto -> 완벽한 정가운데를 원한다면!
예 ) margin-right : auto 처럼 입력하면, 나머지들을 한쪽으로 밀어버림
- align-self : align-items 속성을 다르게 주고싶은 item 에 쓰기
- stretch 가 기본값이고, 내용은 align-items 랑 똑같음
- flex : 어떤 값이 오냐에따라 달라지는 flex ~
-> 숫자 : 모든 숫자의 합으로 구역을 나누고, 숫자만큼 공간사용쓰 !
-> initial : 일정크기 이상으로 커지지 않으면서 유동적
-> auto : 주축 위에서 유동적
-> none : 어떤 상황에서도 고정적
복잡하시죠?
이거로 복잡하시면, 앞으로는 ㅋ
( 뭐든지 해보는게 중요하지만, 요건 진짜 쓸만해서 더 해봐야되욥 )
대충 ' 나중에는 이런거 써서 꾸미는구나...' 정도로만 생각하시구요.
아 ㅋ 물론 귀찮으실걸요? ㅋ
( 김 둘리님이 주셨습니다 )
솔직히 말하자면, 정리한 내용 보는거보다 저게 더 좋은듯;;
솔직히 ' 이거 외울바에는, 쓸때마다 그냥 찾는게 낫다. ' 생각합니다.
그래도 내가 언젠가 찾아볼때, 내거였던것은 더 잘 기억납니다.
flex~ 뽜끄! 를 내꺼로 만들라 이 말입니다!
고생하셨습니다.
실습용 개구리 게임이나 하십쇼. 귀여운 개굴띠 ㅇ_< ~*
플렉스해버렸지뭐얌