완벽한 반응형 웹 만들기 - 특정 너비 이하부터 적용

화면 너비에 따라 요소들이 완벽하게 똑같은 비율로 늘고, 줄도록 만들고 싶을 때가 있죠!

그럴 때를 위해 제가 만든 유용한 sass 함수들을 소개시켜드리도록 하겠습니다

 

길이 단위 종류

우선 웹에서 사용하는 길이 단위의 종류에는 무엇이 있는지 살펴보겠습니다.

 

단위 종류	설명	절대적 / 상대적 길이 단위
px	픽셀 (1px = 1/96th of inch)	절대
em	글꼴 크기 / 부모의 x배를 나타냄	상대
rem	글꼴 크기 / html 크기의 x배를 나타냄	상대
vw	화면 너비의 x%만큼의 크기를 나타냄	상대
vh	화면 높이의 x%만큼의 크기를 나타냄	상대
%	부모의 x%만큼의 크기를 나타냄	상대

 

여기에서 우리는 화면 너비에 따라 크기가 변하도록 만들어야 하므로,

화면 너비와 관련이 있는 단위인 vw 를 사용해야 합니다.

하지만 우리에게 친숙한 단위는 px이고, 주로 사용하는 디자인 툴인 피그마도 px을 기본 단위로 사용합니다.

그럼! px을 vw로 바꿔주는 함수만 있으면 해결되겠죠!

 

 

px을 vw로 변환

기준으로 삼을 화면 너비 크기(vw-viewport)를 지정해주고 그에 대응하는 vw를 구합니다.

화면 너비 1000px 기준에 대한 100px의 vw 값을 구한다고 가정했을 때,

수식 구하고자 하는 길이 / 기준 너비 * 100 을 통해 기준 너비(1000px)에 대한 10px 의 비율을 구하면 10%가 나오게 됩니다.

이 값에 1vw를 곱하면 우리가 원하는 vw 값 (10vw) 을 구할 수 있습니다.

/* 기준 화면 너비 */
$vw-viewport: 1200;

/* pixel을 vw로 변환해주는 함수 */
@function get-vw($px){
    $vw-context: $vw-viewport * 0.01 * 1px;
  @return $px / $vw-context * 1vw;
}

 

특정 너비 이하일 때만 vw값을 사용하도록

프론트엔드 코드를 짜다 보면, 특정 너비 이하일 때만 줄어들어들도록 만들어야 하는 게 대다수입니다.

이를 위하여 특정 viewport일 때만 get-vw 함수를 이용하여 vw 단위로 변화시키는 함수를 사용해야 합니다.

 

이를 위해선 최대 화면 크기를 지정해주고,

기준점보다 화면 너비가 작을 때엔 get-vw 함수를 통하여 vw 크기로 설정하고,

기준점보다 화면 너비가 클 때엔 pixel 값을 설정할 수 있도록 지정합니다.

/* 최대 화면 크기 설정 */
$vw-viewport: 1200;

/* 반응형이 일어날 화면 설정 */
@mixin SCREEN{ @media (max-width: #{$vw-viewport}px){ @content; } }

/* 화면 크기에 따라 크기를 알맞게 설정해주는 함수 */
@mixin set-vw($property, $px){
    @include SCREEN {
        #{$property}: get-vw($px);
    }
    #{$property}: $px;
}

 

적용 예시

set-vw 함수에 차례로 설정해주려는 속성과 px값을 차례로 넣으면 적용됩니다.

img {
	@include set-vw(width, 300px);
	@include set-vw(height, 300px);
}

div {
	@include set-vw(font-size, 16px);
}

 

 

적용 예시 FULL

1200px을 기준으로, 그보다 더 작으면 완전 반응형으로 모든 요소들이 줄어들고,

그보다 더 크면 줄어들지 않도록 합니다.

 

Code Example

See the Pen Fully Responsive Web by Moonchaeyeon (@moonchaeyeon) on CodePen.

 

 

응용 : set-pair-vw

위의 코드에는 set-pair-vw 라는 함수가 추가되어 있는데요,

margin이나 padding 같이 상하, 좌우 세트로 길이를 지정할 수 있는 속성들의 코드량을 줄이고자 추가한 함수입니다.

@mixin set-pair-vw($property, $vertical, $horizontal){
    @include SCREEN {
        #{$property}: get-vw($vertical) get-vw($horizontal);
    }
    #{$property}: $vertical $horizontal;
}

 

기존 코드에서의 적용

padding top, left, right, bottom을 모두 따로 지정해주어야 하는 문제점이 있었습니다.

일일이 써주기 번거롭고 코드량이 많죠 😖

.example {
	@include set-vw(padding-top, 10px);
	@include set-vw(padding-bottom, 10px);
	@include set-vw(padding-left, 15px);
	@include set-vw(padding-right, 15px);
}

 

set-pair-vw 이용

set-pair-vw를 사용하면 코드가 훨씬 간편해집니다!

.example {
	@include set-pair-vw(padding, 10px, 15px);
}

 

 

 

특정 너비 이하에서만 반응형이 이루어지는 것은 실무에서 쓰임이 정말 많은 것 같습니다!

저도 만들어두고 자주 사용하고 있어요 😀

 

제 글이 도움이 되었길 바라며, 이만 마치겠습니다!! 🍅