반응형 웹

김서현·2025년 1월 20일

frontend

목록 보기

24/34

반응형 웹은 화면 크기에 따라 웹사이트가 자동으로 예쁘게 변하는 거야.
핸드폰에서는 글씨가 작아지고, 사진이 한 줄로 나오는 거지~

CSS 레이아웃
- 화면을 어떻게 나눌지 정하는 방법이야.
- Float, Flexbox, Grid를 사용해서 정렬하고 배치해.
미디어 쿼리
- 화면 크기에 따라 다른 스타일을 적용해.
- 예를 들어, 핸드폰 화면에서는 글씨를 크게 하고, 사진을 한 줄로 보여줘.
단위 사용법 (%, em, rem)
- %: 부모에 따라 비율로 크기를 정해.
- em, rem: 글씨나 요소 크기를 조절(상대적)
  
  em은 부모의 ~배. 가장 바깥친구는 기본으로 배정되는 16px 기준이다.
  
  rem은 최고 루트의 ~배. 기본 브라우저에 16px 기준. 만약 내가 따로 24px로 설정했다면 그것에 따라 정해짐. 부모와 상관 없음.
  
  %는 em 대신에 쓰일 수 있다. 부모의 ~ %니까.
  
  기본적으로 ~v***는 브라우저 너비 or 높이의 ~%를 쓰겠다.
  근데 이제 vmax는 너비와 높이 중에 큰 친구에 대한 값으로 쓰겠다.