div를 예쁘게 3-4개씩 가로로 정렬하고 또 그다음 div들은 그 아래로 예쁘게 쌓아나가고 싶었는데, 해결이 나지 않았다.
그래서 열심히 또 구글리리링
일단 블록타입 과 인라인 타입 에 대해 먼저 알아야 한다.
1. 블록타입 (Block Type, Block Level Elements)
줄바꿈이 일어나는 형태
하나의 요소가 웹페이지 영역 내에서 좌측끝에서 우측 끝까지 전체 너비만큼 차지
Width(가로)와 Height(세로) 영역을 설정할 수 있으며, 완벽한 여백과 주변요소와의 간격을 조정
대표적으로 해당하는 요소들 ----->>>>> H1~H6요소, P요소, div 등
2. 인라인타입(Inline Type, Inline Elements)
줄바꿈이 일어나지 않는 형태
요소와 요소가 기본적으로 좌에서 우로 자연스럽게 배치된다.
Height(높이) 지정은 불가.
예외적으로 img 및 input 태그는 height 설정이 가능하지만, 상하 여백과 주변 요소와의 상하 간격에 관련한 조정이 불가
대표적으로 해당하는 요소들 ----->>>>> a, img, input, strong, span 요소 등
그럼 내가 만든 쓰고있는 태그는 <div> 태그 니깐, 블록타입에 해당한다!!
그렇다면 블록타입 얘내들을 어떻게 예쁘게 정리할까??
분명 방법은 있다.
찾다보니 flexbox 라는걸 발견했다.
이에대해 전혀 몰랐던 나는 여러 글들을 읽어가며 정리했는데, 기록차원에서 올림
flex (=flexbox)
페이지의 레이아웃을 잡는데 있어서 이전에는 display, float, position 같은 속성으로 구현.
이렇게 하면 굉장히 복잡해지는데 css3로 바뀌며 flexbox 라는 속성이 추가.
이 속성은 요소의 크기와 순서를 유연하게 배치 할 수 있어 많이 쓴다.
그런데 일단 이 flex속성을 쓰려면 먼저 선언해 줘야만 한다.
Flex-container 라는 것을 생성 및 선언 해줘야 하는데, display값을 flex혹은 inline-flex로 설정해 줘야 한다.
display : flex
flexbox를 이용하려면 먼저 이해해야 하는데 flex item / flex container 라는 개념이 있다.
그러니까 쉽게 말하면, 여러 <div> 들을 이용할때에 부모<div>(=상위<div>)가 있고, 자식<div>(=하위<div>)가 있다.
부모<div>(=상위<div>) = flex container <<--- 전체적인 정렬과 흐름에 대한 속성을 정의한다.
자식<div>(=하위<div>) = flex item <<--- 크기나 세세한 순서에 관련된 속성들을 정의한다.
그 다음 flex-direction을 설정해야 한다.
row로 설정하게 된다면 가로방향으로 흐른다. --> flex-direction : row;
column 은 세로 방향으로 흐른다. --> flex-direction : column;
그다음 flex 속성들에 대해 살펴보자.
flex container 속성
flex-direction, flex-wrap, justify-content, align-items, align-center
flex item 속성
flex, flex-grow, flex-shrink, flex-basis, order
와우 엄청 많다...일단 하나하나 한번 쓱 볼까...?
먼저 flex item 속성들부터 살펴보자.
1.Flex-shrink 속성
flex-shrink:0;
--> flex container의 크기가 작어져도, flex item 의 크기가 줄어들지 않고 원래 크기 유지.
한마디로 겉크기가 작아져도, 속 내용물 크기는 원래크기 그대로~~
flex-shrink:1 혹은 그 이상;
--> flex container의 크기가 flex item 의 크기보다 작아질 때 그 크기가 flex container의 크기에 맞게 줄어든다.
한마디로 겉크기가 작아지면, 속 내용물 크기도 겉 크기에 맞게 같이 줄어듬.
2. flex-basis 속성
flex-grow나 shrink로 늘어나거나 줄어들기 전 flex item 의 기본 크기를 설정하는 속성이다.
Px, %, em, rem 등 모든 단위를 속성값에 사용할 수 있다.
flex-basis : auto;
--->> flex item은 상대적이 되어 내용이 길면 컨텐츠의 크기가 길어지고, 내용이 짧으면 짧아진다.
flex-direction이 row라면 basis는 가로 flex-direction이 column라면 basis는 세로를 의미!! 한다고 아까 위에서 말햇던 내용이 바로 이걸 말한거!!!
3. Flex-grow
flex item 요소가 flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언하는 속성.(음수는 선언 불가)
한마디로 flex-container 안에서 몇의 비율로 flex item을 설정할 것인지 선언함.
만약 flex- item 요소들이 같은 값을 가진다면, flex container 에서 똑같은 크기로 공간을 할당받음.
근데 만약 flex grow 값으로 각각의 flex item 요소들을 다르게 지정한다면, 그에 따라 다르게 공간을 할당받음.
Flex-grow와 flex-shirnk의 차이는 flex-grow는 부모 div에서 남는 공간을 항목들에게 분배하는 방법이고, flex-shirnk는 부모 div의 공간이 부족할 때에 각 항목의 사이즈를 줄이는 방법이다.
보통은 flex-grow 를 사용하게 된다면, flex shrink와 flex basis 속성을 같이 사용하게 된다.
그리고 이렇게 같이 사용하게 된다면, 축약형을 사용하게 되는데
flex 의 축약형
flex:auto;
--> flex-grow:1; flex-shrink:1; flex-basis:auto;
--> flex container의 크기에 맞추어 flex item의 크기가 커지거나 작아짐.
flex:none;
--> flex-grow:0; flex-shrink:0; flex-basis:auto;
--> flex container의 크기에 영향을 받지 않고, flex item의 원래 크기를 유지.
flex:initial;
--> flex-grow:0; flex-shrink:1; flex-basis:auto;
--> flex container의 크기가 작아지면 flex item의 크기가 작아지지만, flex container의 크기가 커져도 flex item의 크기는 커지지 않는다.
flex:숫자;
--> flex-grow:입력되는 해당 숫자; flex-shrink:1; flex-basis:0;
--> flex container를 일정한 비율로 나눠 가지면서 flex container의 크기에 따라 flex item의 크기가 커지거나 작아진다.