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

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

· 3개월 전 · 460 · 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개

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

게시판 목록

퍼블리셔팁

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