선

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

· 2025-08-16 (토) 10:10:56 · 1161 · 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개

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

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

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 25-12-27 조회 830
CSS 25-12-17 조회 612
CSS 25-12-07 조회 736
CSS 25-11-20 조회 659
CSS 25-11-15 조회 741
기타 25-09-21 조회 851
CSS 25-09-09 조회 1,122
CSS 25-09-05 조회 1,121
CSS 25-08-16 조회 1,162
기타 25-07-23 조회 1,002
CSS 25-07-17 조회 1,339
CSS 25-06-27 조회 1,265
CSS 25-06-12 조회 1,302
CSS 25-06-09 조회 1,239
CSS 25-06-07 조회 1,040
25-01-30 조회 1,209
HTML 25-01-23 조회 1,462
CSS 24-10-21 조회 1,367
23-12-10 조회 1,856
HTML 24-02-12 조회 1,309
CSS 24-02-11 조회 1,607
CSS 24-01-28 조회 1,549
HTML 23-11-05 조회 2,307
기타 23-10-21 조회 1,549
CSS 23-09-04 조회 2,130
HTML 23-07-13 조회 1,953
CSS 23-06-14 조회 1,849
23-05-04 조회 4,255
23-05-03 조회 6,022
23-06-01 조회 2,266