FE-4주차 (0406)

그리드 헷갈리니까 여러번 공부하기!

📂 크기

크기를 지정하는 단위

1. px
   화소단위
   디바이스 해상도에 따라서 상대적인 크기를 가짐

2. %
   요소에 지정된 사이즈(상속된 사이즈, 디폴트 사이즈)에 비례하는 상대 단위

3. viewport
   디스플레이에 표시되는 영역
   요즘 많이 쓰임
   -vw (viewport width) : 뷰포트의 너비에 상대적 크기 반환
   -vh (viewport height): 부포트의 높이에 사앧적 크기 반환
   vw와 vh는 뷰포트의 너비값과 높이값 가각의 1/100 단위

4. em
   상대크기(1이 max), 해당 요소의 폰트 크기에 비례한 상대 단위
   -vmin: 가로 세로 기준 더 짧은 걸 기준으로 삼음
   -vmax: 가로 세로 기준으로 더 긴 걸 기준으로 삼음

5. calc()
   연산자를 사용한 단위
   주의사항! 나누기 연산자는 사용할 수 없음(/), 사용할 때 공백 필요

6. px
   %등을 복합적으로 쓸 수 있음

• em vs rem
  -em: 해당 요소에 지정된 폰트 크기를 기준으로
  -rem: 최상위 요소의 폰트 크기를 기준으로
  rem은 기준이 되는 fontsize가 고정되어 있지만
  em은 같은 요소가 다수 존재한다면 기준이 바뀔 수 있기 때문에 복잡한 코드일수록 변환될 크기를 예측하기 어려움.
  ✅ 본인이 원하는 대로 세팅할 수 있도록 연습하기

📂 margin

요소 주변 여백
<시계방향으로 적용됨>
margin을 div로 상하 (헷갈리니까 주의!)
block 요소의 상하 마진은 다른 블락 요소 마진과 상쇄됨

📂 padding

컨텐츠와 테두리 사이의 여백
<시계방향으로 적용됨>

📂 box-sizing

박스 크기를 정하는 것
요소의 전체 너비와 높이에 padding과 border를 포함할 수 있음

• content-box: 컨텐츠 영역을 바탕으로 기준으로 크기를 정함
• border-box: 테두리를 기준으로(패딩 기준) 크기를 정함
• border-radius: 테두리를 둥글게 만드는 속성

📂 display 속성의 종류

1. block

2. inline

3. none, hidden

4. flex container 에 플렉스 속성을 지정, 컨테이너 안에 플렉스 아이템들을 정렬

5. flex-direction: flex에서 정렬의 기준이 되는 메인축을 지정.
   메인축 = 아이템이 배치되는 방향
   row: 가로로 배치
   row-reverse: 가로로 역배치
   column: 세로로 배치
   coloum-reverse:

6. justify-content: 메인축 기준의 정렬 방식 지정
   space around : 각 요소 둘레에 균일한 간격만큼 배치
   space between: 각 요소 사이만 균일한 간격으로 배치
   📍이 둘의 차이를 알길..

7. align-items

8. align-contents

9. inline-flex: 부모 요소인 컨테이너에 사용하는 스타일 속성

10. flex-wrap: 줄바꿈 방식 지정