Sass(SCSS) 사용하기 : 글로벌 유틸리티

스타일링을 하다보면 곳곳에서 다양하게 쓰이는 글로벌한 스타일링 코드가 있다.
화면에서 어떤 컨텐츠는 안보이게 한다던가, 특정 너비의 화면에서만 보이거나 보이지 않게 하는 것들 말이다.
그런 스타일링을 쉽게 적용할 수 있도록 미리 클래스를 만드는 방법을 알아보도록 하자.

 

---

sr-only 혹은 visually-hidden

웹 사용자 중에는 시각적으로 정보를 획득할 수 없는 사용자도 있다. 그 사용자들을 스크린리더 라는 도구를 사용해 웹을 사용하기도 한다.

그런데 아이콘만으로 스타일링 해놓은 경우 스크린리더는 그 뜻을 읽을 수 없는데, 이럴 때 우리 눈에는 보이지 않지만 스크린리더기에만 읽히게 특수 처리를 할 수 있다.

보통 sr-only라는 클래스로 처리를 하는데 부트스트랩에서 새롭게 visually-hidden 으로 이름이 바뀌었다.

부트스트랩 깃허브에는 위처럼 mixin으로 선언되어 있지만, 아래처럼 클래스로 만들어 쓸 수도 있다.

.visually-hidden {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;

  &:not(caption) {
    position: absolute !important;
  }
}

참고로 스타일 값 뒤의 !important는 뒤에 같은 스타일에 다른 값으로 덮이더라도 신경쓰지 않고 무조건 이 값을 적용하겠다는 뜻이다.

 

예시

visually-hidden의 예시는 다음과 같다.

문의사항의 정보를 표시하는 부분에서 구매, 상품, 미답변 같은 텍스트만 읽어주기 보다는
visually-hidden으로 좀 더 명확하게 정보를 알려줄 수 있다.

<header class="inquiry-card-header">
	<h3 class="🔸visually-hidden">지*님이 남기신 문의</h3>

	<dl class="detail">
		<dt class="🔸visually-hidden">구매 여부</dt>
		<dd>구매</dd>
		<dt class="🔸visually-hidden">문의 유형</dt>
		<dd>상품</dd>
		<dt class="🔸visually-hidden">답변 여부</dt>
		<dd>미답변</dd>
	</dl>

	<div class="misc">
		<strong>지*</strong>
		<time datetime="2021-01-01 12:34">
			2021년 1월 1일 12시 34분
		</time>
	</div>
</header>

 

---

반응형에 따른 스타일링 클래스

반응형 웹을 만들다 보면 모바일 화면에서는 존재하는 버튼이 데스크탑에서는 존재하지 않거나,
레이아웃 자체가 바뀔 수 있다.

그럴 때 특정 너비 안에서 보여지거나 안보이도록 스타일링 클래스를 만들어 놓을 수 있다.

// 특정 너비에서만 보이도록
.sm-only {
  @media screen and (min-width: $md-breakpoint) {
    display: none !important;
  }
}
.md-only {
  @media screen and (max-width: $md-breakpoint - 1) {
    display: none !important;
  }
  @media screen and (min-width: $lg-breakpoint) {
    display: none !important;
  }
}
.lg-only {
  @media screen and (max-width: $lg-breakpoint - 1) {
    display: none !important;
  }
}


// 특정 너비에서 안보이도록
.sm-hidden {
  @media screen and (max-width: $md-breakpoint - 1) {
    display: none !important;
  }
}
.md-hidden {
  @media screen and (min-width: $md-breakpoint) and (max-width: $lg-breakpoint - 1) {
    display: none !important;
  }
}
.lg-hidden {
  @media screen and (min-width: $lg-breakpoint) {
    display: none !important;
  }
}

 

예시

모바일에서만 보이도록 사이드바 버튼을 만들어보자.
버튼 태그의 클래스에 sm-only 를 적용하면 태블릿이나 데스크탑에서는 안보이게 된다.

<button
	type="button"
	class="gnb-icon-button is-menu 🔸sm-only"
	aria-label="메뉴 열기 버튼"
>
	<i class="ic-menu"></i>
</button>