테스트 사이트 - 개발 중인 베타 버전입니다

픽셀 단위 고정 대신 유연한 단위를 쓰자

· 2개월 전 · 434 · 1

html {
  font-size: 16px; /* 기준 rem 크기 */
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem); /* 최소, 중간, 최대 */
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.container {
  width: min(90%, 1200px); /* 화면 90% or 최대 1200px */
  margin: 0 auto;
}

img {
  max-width: 100%; /* 이미지 깨짐 방지 */
  height: auto;
}
 

px → rem, %, vw 로 변경
clamp()로 반응형 폰트 크기 설정
min()으로 가로폭 제어

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

2개월 전

저희도 근래는 픽셀 대신 사용하고 있네요. 정리 감사합니다!!! ^^

게시글 목록

번호 제목
3643
3631
3627
3621
3619
3617
3610
3609
3608
3607
3606
3603
3602
3601
3600
3595
3591
3587
3578
3567
3561
3560
3559
3557
3555
3554
3552
3551
3550
3537