AI교육과정 - CSS.3

• flex-wrap
  • 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
  • nowrap
    • 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
  • wrap
    • 플렉스 요소에 여유 공간이 없다면 다음줄로 넘김
  • wrap-reverce
    • 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김)
• flex-direction 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
  • row: 기본값. 가로로 배치
  • row-reverce: 가로로 배치(반대로)
  • column: 세로로 배치
  • column-reverce: 세로로 배치(반대로)

• flex-start: 기본값. 앞쪽에서부터 배치됨
• flex-end: 뒤쪽에서부터 배치됨
• center: 가운데 배치됨
• space-between: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 양쪽에 요소를 붙임)
• space-around: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 약간의 공간을 둠)

• stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
• flex-start: 요소들이 시작점으로 정렬됨
• flex-end: 요소들이 끝으로 정렬됨
• center: 요소들이 가운데로 정렬됨
• baseline: 요소들이 텍스트 베이스라인 기준으로 정렬됨

• stretch: 기본값. 위 아래로 늘어남
• flex-strat: 요소들이 시작점으로 정렬됨
• flex-end: 요소들이 끝으로 정렬됨
• center: 요소들이 가운데로 정렬됨
• space-between: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 양쪽에 요소를 붙임)
• space-around: 요소들 사이에 여유 공간을 두고 배치됨(앞뒤 약간의 공간을 둠)

• 플렉스 요소에 수직축으로 다른 align 속성값을 개별적으로 설정

• 플렉스 요소들의 순서를 설정

• flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 속성

1. flex-basis

   플렉스 요소의 기본 크기를 설정

   • break-word: 단어 기준으로 줄바꿈
   • 0 : 해당 줄에서 크기를 꽉 채움

2. flex-grow

   플렉스 요소를 flex-basis의 설정한 값보다 커질 수 있는지를 결정하는 속성 (비율로 설정됨)

   • 1: 컨테이너에 플렉스 요소를 채움
   • 2: 같은 컨테이너에 해당하는 요소의 2배

3. flex-shrink

   • 플렉스 요소를 flex-basis의 설정한 값보다 작아질 수 있는지를 결정하는 속성(flex-grow와 쌍)

특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도로 변경하지 않아도 알맞는 형태로 스타일을 조절

@media 매체유형 and(속성에 대한 조건){
	css코드
	...
}

😚 매체유형

all: 모든 매체

screen: 켬퓨터, 태블릿, 스마트폰, …

print: 프린터

speech: 스크린 리더

기종별 크기

• 구형폰: 320px
• 일반폰: 360px ~ 380px
• 태블릿: 768px
• 데스크탑: 1024px

#hello {font-size:2em}
<div id="hello"> /*2em - 32px*/
	<div>안녕하세요</div> /*1em - 32px*/
</div>