간혹 처음 방문하는 페이지에 들어가면 아래처럼 가이드 영역이 보이는 경우가 있다.
필자는 심심할 때마다 위시캣을 자주 방문하는데, 종종 저런 화면이 뜨는 것을 볼 수 있었다.
과연 저런 가이드 영역은 어떻게 만들 수 있을까?
간단히 생각하면 HTML, CSS를 사용하여 특정 영역을 제외한 나머지 영역을 어둡게 처리하면 될 것이다.
위시캣은 tutorial-wrapper라는 반투명한 어두운 박스로 화면 위를 덮고, 강조하고자 하는 텍스트 영역을 하나 더 만들어서 해당 영역만 밝아보이는 것처럼 보여준다.
이 방법은 불필요한 DOM 요소가 추가되며, 중복된 텍스트 요소도 하나 더 생기는 단점이 있다.
CSS의 mix-blend-mode 속성을 사용하면 불필요한 요소 추가 없이도 가이드 영역을 만들수 있다.
mix-blend-mode란?
mix-blend-mode는 자식 요소의 배경이 부모 요소와 어떻게 겹쳐져서 보일지 지정할 수 있는 속성이다.
주로 이미지를 배경색이 있는 부모 요소로 감싸서 필터를 씌운 것처럼 사용하며, 이미지 위에 텍스트를 배치하는 경우에도 사용할 수 있다.
더 자세한 내용 및 예시는 MDN 문서에 나와 있다.
mix-blend-mode - CSS: Cascading Style Sheets | MDN
mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.
developer.mozilla.org
mix-blend-mode 속성은 다음과 같은 모드를 제공한다.
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
이 중에서 프론트엔드 화면 구현에 유용하게 사용할 수 있는 hard-light, difference 모드를 사용한 예시를 알아보자.
가이드 영역 만들기
위시캣 페이지처럼 딤드 영역 위에 구멍이 뚫린 것처럼 생긴 가이드 영역을 만들어 보자.
딤드(dimmed) 영역이란?
컨텐츠 아래에 있는 화면을 흐릿하게 하거나 어둡게 하는 영역
먼저, 바닥이 되는 컨텐츠 영역의 background-color를 지정한다.
배경색을 지정하지 않으면 mix-blend-mode 속성이 적용되지 않으므로, 마땅한 배경색이 없다면 흰색(#fff)이라도 주자.
.container {
padding: 40px 0;
background-color: #fff; // 배경색 지정
}
그 후, 딤드 영역에 mix-blend-mode: hard-light를 적용하고, 구멍을 뚫을 자식 영역의 background-color로 밝은 회색(#808080)을 설정한다.
// 1. 딤드 영역
.dim-box {
position: absolute;
background-color: #000000aa; // 딤드 영역을 어둡게 처리
mix-blend-mode: hard-light; // 반드시 추가
inset: 0;
}
// 2. 강조할 자식 영역
.empasis-box {
width: 800px;
height: 24px;
background-color: #808080; // 회색 배경 -> 해당 영역이 밝게 처리됨
position: absolute;
top: 40px;
left: 0;
right: 0;
margin: 0 auto;
}
마크업은 아래 코드처럼 컨텐츠 요소 위에(= 다음에) 딤드 영역이 올 수 있도록 배치한다.
<html>
<body>
<!-- 1. 컨텐츠 영역 -->
<div class="container">
<div class="text-box">
<p class="text">
생성형 AI와 툴 서비스는 사용자가 작업 목표를 쉽고 편리하게 달성할 수 있도록 돕는 공통적인 가치를 제공합니다. 현재 많은 툴 서비스에서 AI 기능을 붙여, 사용자가 더 쉽게 작업을 완료할 수 있게 해 서비스 진입장벽을 낮추고 있습니다. 특히 AI를 활용해 다양한 초안을 생성하거나, 작업에 대한 피드백을 제공함으로써 더욱 고도화된 결과물을 만들 수 있죠. 이번 글에서는 디자인과 웹/앱 제작 분야의 툴 서비스가 제공하는 무료 AI 기능이 어떤 사용자 경험을 제공하는지 살펴보겠습니다.
</p>
</div>
</div>
<!-- 2. 딤드 영역 + 구멍 뚫을 자식 요소 -->
<div class="dim-box">
<div class="empasis-box"></div>
</div>
<!-- 3. 딤드 영역 위에 위치할 말풍선 요소 -->
<div class="bubble-text-box">
<p>위시켓 사이트에서 자세한 내용을 읽어 보세요.</p>
<a class="go-button" href="https://yozm.wishket.com/magazine/detail/2830">자세히 보기</a>
</div>
</body>
</html>
완성본은 다음과 같다.
See the Pen css guide box by MiJeong Kim (@sap03110) on CodePen.
참고로, 구멍 영역의 background-color를 회색이 아닌 다른 색으로 설정하면 위시캣처럼 형광펜을 칠한 것처럼 보이게 할 수도 있다.
다른 응용 - 커서를 따라다니는 영역 만들기
간혹 사이트들을 돌아다니다 보면 아래처럼 커서를 따라다니는 영역을 볼 수 있다.
예시 사이트는 하늘색 영역인데, 여기에도 mix-blend-mode를 사용하면 더 멋있는 커서를 만들 수 있다.
.pointer {
position: fixed;
background-color: #fff;
width: 12px;
height: 12px;
left: -12px;
top: -12px;
will-change: transition;
border-radius: 50%;
transition: 0.1s;
mix-blend-mode: difference; // 추가
}
위 예시처럼 mix-blend-mode: difference를 적용하면 커서 영역 아래에 있는 배경색이 반전된 것처럼 보여준다.
'Frontend > CSS' 카테고리의 다른 글
| CSS - 속성/값 여부를 css 선택자로 사용하는 방법 (0) | 2024.12.16 |
|---|---|
| SASS/SCSS - sass에서 제공하는 디렉티브(mixin, include, ...) (2) | 2022.08.23 |
| CSS - transition 속성 알아보기 (1) | 2022.08.11 |
| CSS로 직접 그래프 만들기(bar, donut 그래프) + 애니메이션 효과 추가 (6) | 2021.08.20 |
| CSS - ellipsis(..., 말 줄임표) 처리 (0) | 2021.08.19 |
