CSS FlexBox , Grid

이정우·2021년 11월 24일

CSS

목록 보기

4/4

flexbox 기본 모양

<div class = "contanier">
    <div class = "item">
  	    <이미지 등등..>
    </div>
	<div class = "item">
        <내용..>
    </div>
</div>

FlexBox

container로 큰 틀 잡음.

container의 css 속성들.

정렬 태그

dispaly : flex;
컬럼들을 자동으로 맞춰줌
flex-direction : column;
row가 기본 값. column 하면 column 기준으로 모음. 쉽게 열 기준으로 모으니깐 ㅡ자 모양으로 데이터들이 정렬 됨.
flex-direction : row-reverse;
오른쪽 부터 채워줌. colum-reverse도 가능.
flex-wrap : wrap
인터넷 창이 컬럼보다 작아지면 자동으로 밑으로 내려감. bootstrap 처럼 여러 인터페이스 별로 적용할 때 용이하게 사용 가능해 보임. wrap-reverse 도 가능.(순서가 이상하게 바뀜.)
justify-content : flex-strat;(기본 값)
justify-content는 ㅡ(열)로(좌, 우) 배열할 때 열 안에서 item들의 위치를 조정하는 속성 값.
flex-center, end 존재. item들을 중앙, 오른쪽 정렬 가능.
flex는 없애도 괜찮.
space-between item들끼리 사이 여백을 주고 놔둠.
space-around between과 비슷하나 좌우 여백을 다 갖음.
여백(item1) item1 여백(item1) 여백(item2) item2 여백(item 2)
align-items : stretch;기본 값. justify-content과는 반대로 ㅡ 기준 item의 위치를 (상, 하)ㅣ으로 나눔.
flex-start item들을 위로 붙임.
flex-center, end등이 사용 가능.
flex는 없애도 괜찮.
한 가운데 두고 싶다면 align-items와 justify-content 를 둘 다 center로 하면 가능.
align-content : flex-start
flex-wrap : wrap;이어야 사용 가능.
인터넷 창을 줄이면 위로 붙음.
center, end 사용 가능.
space-between, around도 똑같이 존재. 여백.

item의 속성들

flex는 신축성 있게 컨텐츠들을 늘리거나 줄임(여백을 없애면서.) 그렇기에 item 별로 flex를 적용하거나 적용하지 않으면 어떤 컨텐츠는 고정되고 어떤 컨텐츠는 화면을 늘리거나 죽이면 유동적으로 크기가 바뀌게 할 수 있음.

유동적인 화면 구성 flex

flex-grow : 1;
1을 자주 사용.
숫자는 비율로 해당 비율 만큼 컨텐츠들이 여백을 나눠서 갖음. 그러면 자연스럽게 화면을 꽉 채우게 됨.
.item : nth-child(1) {...} 자식들에게 css 적용 가능.
flex-basis : 0;
grow와 비슷한데 얘는 전체를 여백으로 인식하고 나눠줌. grow와 같이 쓰면 좋음. 기본 값은 auto이고(변화 x) 0을 주게 되면 전체를 여백으로 인식하게 되면서 컨텐츠 들을 전체 화면 기준 1:2:1 같은 비율로(grow에서 설정) 나눠줌.
flex-shrink : 1;
flex : 1; 로 줄여서 사용 가능.
grow와 비슷. grow는 basis를 0으로 줘야지 자연스러운데 flex는 1만 주면 자동으로 basis를 0으로 설정해서 자연스럽게 나눠줌.

item의 정렬

align-self : flex-start;
item 각각의 위치 정렬. aling이므로 상 하 정렬. center, flex-end 등 존재.

order : 1;
order의 숫자대로 배치 순서가 변함. 매우 유용!

Grid

container의 css로 사용.

fr : 크기 단위로써 유연한 크기. 남은 공간을 숫자 비율로 나눠 갖음.

container에서 display : grid; 로 사용!
grid-template-columns : 40% 60%;

column 기준으로 40%, 60%로 쪼개서 아이템들 배열.
%대신 4fr 6fr 도 가능. 이걸 %보다 많이 씀. 그 이유는 %를 쓰면 grap같은걸 같이 쓰면 빈 공간이 생기는 경우가 존재하는데 fr은 그렇지 않다.

repete(3, 1fr); 사용 가능. 1fr씩 나눠 갖는걸 3번 반복한다.
1fr 1fr 1fr 이렇게 하는거랑 같은 방식.
200px 1fr 이렇게 하면 첫 부분은 200px로 고정되고 2번째는 1fr 만큼 유동적으로 크기 할당.

grid-gap : 1rem;
컨텐츠 사이에 갭(빈 공간)을 만들어둠.
grid-auto-rows : 300px;
열 별로 해당 그리드의 높이를 지정해줌. 너무 낮게 지정해주면 데이터가 삐져나갈 수 있음.그럴 경우에는 minmax(200px, auto); 이러면 되는데 이건 기본 200px의 높이는 확보하고 컨텐츠 내용이 더 길다면 자동으로 늘려준다는 소리.여기서 px보단 em 사용이 더 좋음. em은 폰트 사이즈를 기준으로 몇 배 라는 소리. 10em 이면 폰트 사이즈로 10배. 더 자세하게는 em은 상위 요소의 배율이고 rem은 최상위 요소의 배율임.

item 에 사용.

justify-items : start;
각 열에서 정렬해줌.(좌 우)
end, center 사용 가능
alingn-item : start;
center, end등 사용 가능.
상 하로 정렬.
item:nth-child(숫자) {justify-self : start;}
center, end등 사용 가능. 해당 item에서만 쓸 경우.
align-self도 마찬가지로 start, end, center등 사용 가능.
grid-column:1/4;

여기서 사용하는 숫자들은 맨 첫 부분을 1로 하고 grid 나눈 칸 마다 2 3 4... 늘어남.
ㅣaㅣbㅣcㅣ이렇게 나눴다면 a 왼쪽을 1로 시작해서 a오른쪽이자 b의 왼쪽을 2 b의 오른쪽이자 c의 왼쪽을 3 c의 오른쪽이자 마지막을 4로 본다.

1번부터 4번까지 차지하겠다. 숫자는 grid에서 나눈 값에 따라 달라짐. 첫 줄은 하나의 컨텐츠가 차지하고 두 번째는 2개씩만 넣고 할 때 사용.
ㅡ로 차지함.

grid-row : 1/2;
ㅣ(상 하)기준으로 자리 차지하게 함. 위치가 이상해진다면 column과 같이 사용!
강제로 위치 조정해서 다른 컬럼들과 겹치게도 가능!

FlexBox와 Grid의 차이.

FlexBox는 1차원의 개념으로 수직 or 수평 하나만 정해서 사용 가능.(ㅡㅡㅡㅡ만 하거나 ㅣ만 하거나..)

하지만 grid는 2차원적으로 접근하여 수직 수평을 동시에 적용할 수 있다. (ㅡ와ㅣ를 섞어서 사용 가능.)

짜투리 class vs id

class : 여러 값을 넣을 수 있음(space를 통해서). 중복된 이름 사용 가능.
id : 값 1개만 사용 가능. 중복된 이름 사용 불가능.

짜투리 div vs span

div : block 속성. -> < div> </ div>를 여러 개 쓰면 자동으로 다음 줄로 넘어감. 박스 형태(a라는 글자가 존재한다면 해당 줄 전체가 div 영역. 즉 아무 글씨도 없는 공간도 div영역.)
span : inline 속성. -> < span> </ span> 을 여러 개 써도 자동으로 다음 줄로 넘어가지 않음. inline 형태. a라는 글씨가 존재한다면 a만 span 범위. div는 그 외 공백도 쭉 div 공간이지만 a는 데이터가 존재하는 범위까지만 범위로 인식.

출처 : 1분 코딩 자료. 1분 코딩 블로그 주소 : https://studiomeal.com/blog

이정우

프로그래밍 공부 중!

이전 포스트