CSS(Sass)에서 모바일 초기 셋팅을 위해 62.5%를 기준으로 폰트 크기와 관련된 믹스인과 함수를 설정할 수 있습니다. 이렇게 하면 rem 단위를 더 직관적으로 사용할 수 있게 됩니다. 예를 들어, 1rem이 10px로 설정되어 계산이 간편해집니다. 여기서는 기본 설정과 함께 유용한 믹스인 및 함수를 정의해 보겠습니다.
반응형
1. 기본 설정
먼저, html 태그의 폰트 크기를 62.5%로 설정합니다. 이렇게 하면 기본 폰트 크기가 16px에서 10px로 변경됩니다.
html {
font-size: 62.5%; // 1rem = 10px
}
body {
font-size: 1.6rem; // 16px
margin: 0;
padding: 0;
}
2. 폰트 크기 믹스인
폰트 크기를 쉽게 설정하기 위한 믹스인을 작성합니다.
@mixin font-size($size) {
font-size: $size / 10 * 1rem;
}
3. 미디어 쿼리 믹스인
반응형 디자인을 위한 미디어 쿼리 믹스인을 작성합니다.
@mixin respond-to($breakpoint) {
@if $breakpoint == small {
@media (max-width: 600px) { @content; }
} @else if $breakpoint == medium {
@media (max-width: 900px) { @content; }
} @else if $breakpoint == large {
@media (max-width: 1200px) { @content; }
}
}
4. 패딩 및 마진 믹스인
패딩과 마진을 쉽게 설정하기 위한 믹스인을 작성합니다.
@mixin spacing($property, $size) {
#{$property}: $size / 10 * 1rem;
}
5. 예시 사용법
위에서 정의한 믹스인들을 사용하여 스타일을 설정하는 예시입니다.
.header {
@include font-size(20); // 20px -> 2rem
@include spacing(margin-bottom, 20); // 20px -> 2rem
@include respond-to(small) {
@include font-size(18); // 18px -> 1.8rem
}
}
.container {
@include spacing(padding, 15); // 15px -> 1.5rem
@include respond-to(medium) {
@include spacing(padding, 10); // 10px -> 1rem
}
}
이제, 이 설정을 사용하여 SCSS 파일을 구성하면 모바일 환경에 맞춰 반응형으로 스타일을 쉽게 설정할 수 있습니다. 필요한 경우 각종 설정과 믹스인을 추가하여 더욱 세부적으로 조정할 수 있습니다.
728x90