코드 설명은 ⓐ 부터 시작합니다.

반응형

미디어쿼리 사용하기

반응형 부분입니다. 노드나 spa를 사용하지 않는 환경에서는 미디어쿼리를 사용 시 별도의 파일을 따로 만들어서 Link로 걸거나 하단에 미디어쿼리 부분을 따로 만드는 경우가 있는데 이럴경우, 중복된 선택자가 발생하게 됩니다.

예시 코드에서는 단 두번밖에 없지만 선택자가 많을 수록 배 이상으로 라인이 생겨나고 선택자도 구분하기가 어려워집니다.

.wrap {
  width: 1200px;
}
.wrap .container {
  width: 800px;
}
 
@media (max-width: 767px) {
	// ⓐ - 중복되는 선택자가 발생하는 부분
  .wrap {
    width: 100%;
  }
  .wrap .container {
    width: 30%;
    background: #ccc;
  }
}

여기에 mixin을 이용한다면

위의 코드와는 다르게 중복되는 선택자도 제거되고, 모바일일시의 속성도 같이 볼수 있게됩니다.

$admin-mobile : 767;
// 모바일
@mixin media-mo($type : 'vertical') {
// ⓒ - $type으로 모바일 가로 모드 구분이 가능합니다
  @if ($type == 'landscape') {
    @media (max-width: $admin-mobile+'px') and (orientation: landscape) {
      // ⓑ - 이부분에 아래의 ⓐ 부분이 그대로 들어갑니다.
      @content;
    }
  }
  @else {
    @media (max-width: $admin-mobile+'px') {
      @content;
    }
  }
}

// 사용
.wrap {
	width: 1200px;
	@include media-mo {
		// ⓐ - 이부분에 선언 된 곳은 위의 ⓑ 부분에서 그대로 들어갑니다. 
		width: 100%;
	}
	.container {
		width: 800px;
		@include media-mo {
			width: 30%;
			background: #ccc;
		}
	}
}

단순히 미디어쿼리를 mixin에 넣는것 만으로도 custom-media와 같이 특정 해상도에서 깨지는 부분을 처리할수있고, only-pc와 같이 오직 pc의 해상도에서만 적용되게 하는 mixin을 만들수 있습니다.

// 커스텀 해상도
@mixin custom-media($start-resolution, $end-resolution, $landscape : false) {
  @if ($landscape==true) {
    @media (min-width: $start-resolution+'px') and (max-width: $end-resolution+'px') and (orientation: landscape) {
      @content;
    }
  }
 
  @else {
    @media (min-width: $start-resolution+'px') and (max-width: $end-resolution+'px') {
      @content;
    }
  }
}
// ⓐ - 커스텀 해상도 사용
.wrap1 {
@include custom-media(640px, 700px){
  width: 100%;
}
 
// pc에서만
@mixin only-pc {
  @media (min-width: $breakpoints-tablet + 'px') {
    @content;
  }
}
 

  @include custom-media(640px, 720px){
  	width: 30%;
  }
}

vw를 px로 변환

화면을 줄였을때 레이아웃이 깨지지 않는 방법에는 미디어쿼리말고도 vw라는 단위를 사용하여 가로 해상도에 맞게 줄어드는 방법도 있습니다. 이 방법은 매번 계산을 해야되는 불편함등이 있어서 그 계산식을 사스를 이용하여 구현해봤습니다.