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

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

· 2개월 전 · 435 · 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개월 전

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

게시글 목록

번호 제목
3349
3346
3345
3343
3342
3341
3329
3321
3319
3318
3317
3316
3315
3314
3313
3312
3311
3310
3306
3305
3304
3303
3302
3301
3300
3299
3298
3297
3296
3294