[SCSS] 🚀 SCSS를 이용한 반응형 웹 개발하기.

목차

CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다.

 

하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자.

---

SCSS를 이용한 반응형 웹 개발.

SCSS에서 반응형 사이즈 사용법.

우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다.

SCSS

$pc2000: 2000px;
$pc1560: 1560px;
$pc1420: 1420px;
$pc1280: 1280px;
$pc1200: 1200px;
$pc1024: 1024px;
$mobile767: 767px;
$mobile480: 480px;

//respond mixin
@mixin respond($size) {
    @media screen and (max-width:$size) {
        @content;
    }
}

위의 코드를 사용하는 예제는 다음과 같다.

SCSS

body {
    background-color: #f6f5ef;
    @include respond($mobile767) {
        font-size: 12px;
    }
}

---

SCSS에서 position 사용법.

일반적인 CSS에서 position 함수를 사용하려면 top, right, bottom, left를 지정하여 위치를 지정해야 한다. 그러나 SCSS에서 position 함수를 사용할 때 다음과 같이 @mixin을 이용하면 쉽게 사용이 가능하다.

 

우선 기본 position을 absolute로 설정하고 top, right, bottom, left를 작성할 파라미터를 만들면 된다.

SCSS

//position mixin
@mixin pos($p:absolute, $top:null, $right:null, $bottom:null, $left:null) {
    position: $p;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

위의 코드를 사용하려면 밑의 식과 같이 원하는 position을 입력하고 top, right, bottom, left를 작성하면 사용할 수 있다.

SCSS

.video-container {
    @include pos($p: relative, $top: 0, $right: 0, $bottom: 0, $left: 0);
    padding: {
        top: 0;
        bottom: 34.1%;
    };
    height: 0;
    z-index: 1;
    overflow: hidden;
    @include respond($pc2000) {
        display: none;
    }
    video {
        @include pos($p:absolute, $top: -18%, $right: 0, $bottom: 0, $left: 0);
        opacity: 1;
        width: 100%;
        height: 46.4vw;
        transform: scale(1.05);
    }
}

---

📁 예제 파일

더 많은 예제를 보고싶다면, 저의 github 프로젝트에서 확인하실 수 있습니다.

GitHub - light9639/StarBucks: ☕ StarBucks 프로젝트 소개 페이지입니다.