CSS 5일차 - Flex, 미디어 쿼리
>다단 레이아웃
- 텍스트 단을 column 속성으로 다단으로 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
column-count :단의 개수를 설정
column-rule :단과 단 사이의 구분선, 구분의 모양, 두께 색상을 설정
column-gap :단과 단 사이의 여백을 설정
column-span :안의 포함된 요소에서 주면 해당 요소는 다단편집에서 해제
>플렉서블 레이아웃(flex)
- 대부분의 웹사이트는 수직 구성
- 레이아웃을 구성할 때 가장 많이 사용되는 요소들이 대부분 블록개념으로 표기
- 수직 구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음
- 과거에는 수평구성을 <table>, float속성, inline-block 형태로 구성했다.
- 좀 더 쉽게 수평구성을 구현하기 위해 나온것이 flex
display : flex
>flex-wrap
- 플랙스 라인에 더이상 여유가 없을 때 플렉스 요소의 위치를 다음줄로 넘길지 설정
nowrap :기본설정, 플렉스 요소가 다음줄로 넘어가지 않음.
요소의 넒이를 줄여 한 줄에 모두 배치
wrap :플렉스 요소가 여유 공간이 없으면 다음줄로 넘어감
wrap-reverse :플렉스 요소가 여유 공간이 없으면 다음줄로 넘어감
위쪽으로 넘어감.
>justify-content
- 플렉스 요소의 수평방향 정렬방식을 설정
flex-start : 기본설정, 앞쪽에서부터 배치됨
flex-end : 뒤쪽에서부터 배치됨
center : 가운데에 배치됨
space-between : 요소들 사이에 여유공간을 두고 배치됨(양쪽 끝은 X)
space-around : 요소들 앞 뒤에 여유공간을 두고 배치됨
(주변 여백들의 넓이를 똑같이 맞춰주는것)
space-evenly : 요소들 앞 뒤에 여유공간을 두고 배치됨(모든 여백들이 같은 크기)
>align-items
- 플렉스 요소의 수직방향 정렬방식을 설정
strech : 기본설정, 플랙스 요소의 높이가 컨테이너의 높이과 같게 변경된 후
연이어서 배치가 됨.
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됨
flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됨
center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됨
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선에 배치됨
(contents의 아랫선이 기준선이 된다.)
*더 많으나 다 다루기 어려우므로 찾아가면서 써야한다.
>align-self
- 플렉스 요소마다 서로 다른 align 속성값을 설정하고 싶을 때 사용
>order
- 배치되는 플렉스 요소들의 순서를 설정
>flex-grow
- 플렉스 컨테이너 안의 아이템들이 차지할 너비들에 대한 증가형 숫자를 지정
>flex-shrink
- 플렉스 컨테이너 안의 아이템들이 차지할 너비들에 대한 감소형 숫자를 지정
>flex-basis
- 플렉스 컨테이너 안의 아이템들의 기본 길이를 지정
ex) basis를 기본인0이 아니라 그 이상의 값을 주게 되면 그값을 제외한 남은부분을
정해둔 그로우(쉬링크) 비율만큼 주게 된다.
>flex
- flex의 속성을 한꺼번에 설정
flex : grow shrink basis
>미디어쿼리
- width, height, color,... 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위(디바이스의 범위)를 조절
- 반응형 개발
- 컨텐츠를 별도로 변경하지 않아도 웹 사이트에 접속하고 있는 기기에 따라 알맞는 형태로 스타일을 조절이 가능하다.
@media 매체유형 and (min-width/max-width :해상도){
스타일 지정
}
>>매체유형
all : 모든 매체
screen : 컴퓨터, 태블릿, 스마트폰, ...
print : 프린터 기기
speech : 스크린 리더
- 매체별 대략적 해상도
1) 핸드폰
(1) 구형폰: 320px
(2) 현재폰: 360px ~ 375px
2) 태플릿
768px ~~
3) 데스크탑
1024px ~ 1280px