1. Flex 레이아웃
`display: flex`는 CSS의 속성 중 하나로, 요소의 자식 요소들을 수평 또는 수직으로 정렬하기 위한 레이아웃 방식입니다. 부모 요소에 `display: flex`를 적용하면 그 부모 요소는 "flex 컨테이너"가 되며 그 안의 자식 요소들은 "flex 아이템"이 됩니다. Flexbox 레이아웃은 아이템들을 자동으로 조절하여 화면에 맞게 배치하며, 레이아웃을 보다 쉽게 제어할 수 있게 합니다. 이를 통해 반응형 디자인 및 복잡한 레이아웃을 쉽게 구현할 수 있습니다.
flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김)
flex-direction: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
row: 기본값. 가로로 배치
row-reverse: 가로로 배치(반대로)
column: 세로로 배치
column-reverse: 세로로 배치(반대로)
flex-flow: flex-wrap과 flex-direction을 한꺼번에 지정할 수 있는 속성
예) flex-flow: row nowrap;
justify-content: 플렉스 요소의 수평방향 정렬방식을 설정
flex-start: 기본값. 앞쪽에서부터 배치
flex-end: 뒤쪽에서부터 배치
center: 가운데 배치
space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)
space-evenly: 요소들 사이에 동일한 여유 공간을 두고 배치(앞뒤에도 동일한 공간을 둠)
align-items: 플렉스 요소의 수직방향 정렬 방식을 설정
stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
baseline: 요소들이 텍스트 베이스라인 기준으로 정렬
align-self: self를 적용한 요소만 플렉스 요소에 수직축으로 다른 align 속성값을 설정가능
예) #box3 {align-self: flex-end;}
order: 플렉스 요소의 순서를 설정
예) #box1 {order: 4;}
#box2 {order: 1;}
#box3 {order: 5;}
#box4 {order: 3;}
#box5 {order: 2;}
align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄 이상 되었을 때 수직 방향 정렬 방식을 설정
(flex-wrap의 값을 wrap으로 설정해야 함)
stretch: 기본값. 위 아래 늘어남
flex-start: 요소들이 시작점으로 정렬
flex-end: 요소들이 끝으로 정렬
center: 요소들이 가운데로 정렬
space-between: 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙임)
space-around: 요소들 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)2. 미디어 쿼리(Media Queries)
미디어 쿼리는 CSS의 일부로, 스타일을 다양한 미디어 유형 및 장치 특성에 따라 다르게 적용하거나 조절하기 위한 도구입니다. 미디어 쿼리를 사용하면 화면 크기, 해상도, 장치 종류 및 방향 등과 같은 특정 미디어 특성을 기준으로 스타일을 설정할 수 있습니다. 이를 통해 반응형 웹 디자인을 구현하는 데 도움을 줍니다.
@media 매체유형 and (속성에 대한 조건) { CSS 코드 }
***반응형 웹 (Responsive Web Design)
반응형 웹은 웹 사이트 또는 웹 앱의 디자인과 레이아웃을 접속하는 디바이스 및 화면 크기에 맞게 최적화하는 디자인 접근 방식을 의미합니다.
✔ 매체유형
- all: 모든 매체
- screen: 컴퓨터, 태블릿, 스마트폰 ..
- print: 프린터
- speech: 스크린 리더
✔ em과 rem
em : 부모 요소 크기의 몇 배인지를 단위로 설정
pc의 일반 텍스트 크기: 16px(브라우저 기본값) = 1em
모바일의 일반 텍스트 크기: 12px(브라우저 기본값) = 1em
pc의 예)
HTML
<div id='hello'>
<div>안녕하세요
<p>반갑습니다</p>
</div>
</div>
CSS
#hello {font-size: 2em;}
>> 안녕하세요 32px로 출력
반갑습니다 64px로 출력
rem: 문서의 최상위 요소(html)의 몇 배인지를 크기로 설정
pc의 예)
html {font-size: 2rem}
<html>
<body> <!-- 글자 크기가 모두 2rem = 32px로 적용 -->
<div> ... </div>
</body>
</html>
'웹 > CSS' 카테고리의 다른 글
| CSS 애니메이션/우선순위/변수 (0) | 2023.10.16 |
|---|---|
| CSS 디스플레이, 포지션 (0) | 2023.10.15 |
| CSS 텍스트/배경 (0) | 2023.10.15 |
| CSS(Cascading Style Sheets) (1) | 2023.10.10 |
