간혹 처음 방문하는 페이지에 들어가면 아래처럼 가이드 영역이 보이는 경우가 있다. 필자는 심심할 때마다 위시캣을 자주 방문하는데, 종종 저런 화면이 뜨는 것을 볼 수 있었다. 과연 저런 가이드 영역은 어떻게 만들 수 있을까? 간단히 생각하면 HTML, CSS를 사용하여 특정 영역을 제외한 나머지 영역을 어둡게 처리하면 될 것이다. 위시캣은 tutorial-wrapper라는 반투명한 어두운 박스로 화면 위를 덮고, 강조하고자 하는 텍스트 영역을 하나 더 만들어서 해당 영역만 밝아보이는 것처럼 보여준다. 이 방법은 불필요한 DOM 요소가 추가되며, 중복된 텍스트 요소도 하나 더 생기는 단점이 있다. CSS의 mix-blend-mode 속성을 사용하면 불필요한 요소 추가 없이도 가이드 영역을 만들수 있다. ..
