1. Flex 레이아웃
- 수평정렬을 하기 위한 속성
display: flex
flex-wrap
flex-wrap : 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
nowrap : 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
wrap : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
wrap-reverse : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김)
flex-direction
flex-direction : 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
row : 기본값. 가로로 배치되는
row-reverse : 가로로 배치(반대로)
column : 세로로 배치
column-reverse : 세로로 배치(반대로)
flex-flow
flex-flow : flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성
예) flex-flow : row nowrap;
justify-content
justify-content : 플렉스 요소의 수평방향 정렬방식을 설정
flex-start : 기본값. 앞쪽에서부터 배치
flex-end : 뒤쪽에서붵 배치
center : 가운데 배치
space-between : 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around : 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
align-items
align-items : 플렉스 요소의 수직방향 정렬 방식을 설정
stretch : 기본값. 아이템들이 수직축 방향으로 늘어남
flex-start : 요소들이 시작점으로 정렬
flex-end : 요소들이 끝으로 정렬
center : 요소들이 가운데로 정렬
baseline : 요ㅗㅅ들이 텍스트 베이스라인 기준으로 정렬
align-self 과 order
align-self : 플렉스 요소에 수직축으로 align 속성값을 설정
order : 플렉스 요소의 순서를 설정
align-content
align-content : 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을때 수직방향 정렬방식을 설정
(flex-wrap의 값을 wrap으로 설정해야 함)
stretch : 기본값. 위 아래로 늘어남
flex-start : 요소들이 시작점으로 정렬
flex-end : 요소들이 끝으로 정렬
center : 요소들이 가운데로 정렬
space-between : 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around : 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
2. 미디어 쿼리(Media Query)
반응형웹
하나의 웹사이트에서 px, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법
@media 매체유형 and (속성에 대한 조건) {
CSS 코드
...
}
✓ 매체유형
all : 모든 매체
screen : 컴퓨터, 태블릿, 스마트폰 ...
print : 프린터
speech : 스크린 리더
✓ em과 rem
상대적인 크기를 정하는 단위
em : 부모 요소 크기의 몇 배 인지를 단위로 설정
pc의 일반 텍스트 크기 : 16px(브라우저 기본값) = 1em
모바일의 일반 텍스트 크기 : 12px(브라우저 기본값) = 1em
PC의 예)
HTML
<div id='hello'>
<div>안녕하세요</div> <!-- 1em = 32px -->
</div>
CSS
#hello {font-size: 2em;}
rem : 문서의 최상위 요소(html)의 몇 배인지를 크기로 설정
PC의 예)
html {font-size: 2rem;}
<html>
<body> <!-- 글자 크기가 모두 2rem = 32px로 적용 -->
<div>...</div>
</body>
</html>'Study > CSS' 카테고리의 다른 글
| [CSS] Day5 (0) | 2023.10.17 |
|---|---|
| [CSS] Day3 (0) | 2023.10.11 |
| [CSS] Day2 (0) | 2023.10.11 |
| [CSS] Day1-1 (1) | 2023.10.10 |
| [CSS] Day1 (2) | 2023.10.10 |