Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

기본 CSS 오버레이 만드는 방법: HTML과 CSS만으로 구현하기

오버레이(overlay)는 웹사이트에서 사용자의 시선을 사로잡고 다음에 취해야 할 행동을 자연스럽게 유도하기 위해 사용되는 시각적 효과입니다. 올바르게 활용하면 긍정적인 사용자 경험을 만들어 사용자가 사이트에 더 오래 머물도록 만들 수 있습니다.


오버레이를 만드는 방법은 여러 가지가 있습니다. 정답은 하나가 아니며, 자신의 사이트와 목적에 가장 잘 맞는 방식을 선택하는 것이 중요합니다.


이 가이드에서는 JavaScript 없이 기본적인 HTML과 CSS만으로, 이미지 위에 마우스를 올렸을 때(hover) 나타나는 오버레이 효과를 구현하는 방법을 단계별로 알아보겠습니다.

HTML 구조 잡기

먼저 이미지 오버레이를 만들 때 사용할 HTML 기본 골격(boilerplate)을 작성해 보겠습니다.

<html>
	<head>
		<style>
			/*No CSS to display yet*/
</style>
</head>
<body>
	<div class="container" ></div>
</body>
</html>

문제 이해하기

새로운 것을 처음 시도할 때는 검색 엔진에 찾아보기 전에 스스로 문제를 어떻게 해결해야 할지 고민해 보는 것이 좋습니다. 오버레이가 어떻게 동작하고 무엇을 해야 하는지 확실히 이해하고 나면, 필요할 때 힌트와 팁을 검색했을 때도 훨씬 빠르게 이해할 수 있습니다.


다시 정리하면, 오버레이는 컨테이너(여기서는 이미지) 위에 덮여 있는 요소로, 마우스를 올렸을 때 특정 동작을 수행합니다. 이를 통해 사용자가 사이트와 상호작용하도록 유도할 수 있습니다.


이제 큰 그림부터 생각해 보세요. 세부적인 디테일에 얽매이지 말고 전체 구조에 집중하세요. 우리에게는 이미지가 하나 있고 오버레이가 하나 있습니다. 즉 최소 두 개의 컨테이너가 필요하고, 이 두 컨테이너는 더 큰 컨테이너 안에 들어가야 합니다.


아직 스타일링은 하지 마세요. 순수하게 HTML만으로 구조를 코드화하세요. 아래 마크업을 보기 전에 스스로 구조를 잡아볼 수 있는지 먼저 시도해 보세요.

부트캠프 참가자의 81%가 참여 후 IT 분야 취업 전망에 대한 자신감이 높아졌다고 답했습니다. 지금 바로 나에게 맞는 부트캠프를 찾아보세요.

부트캠프 수료생은 평균 6개월 이내에 경력 전환을 마치고 첫 직장을 찾았습니다.

		<html>
	<head>
		<style>
			/*No CSS to display yet*/
</style>
</head>
<body>
	<div class="container" >
	<div class="overlay-outer>
	<img class="item-to-overlay" src="file-here" alt="this-is-our-image" />
<div class="overlay-inner">
	This is our overlay div.
</div> 
</div>
</div>
</body>
</html>

주요 블록 구조가 정해지면 스타일링 작업으로 넘어갑니다. 저는 개인적으로 바깥쪽(더 큰) 컨테이너부터 시작해 점점 안쪽의 작은 컨테이너로 들어가는 방식을 선호합니다. 이렇게 하면 각 컨테이너의 실제 너비를 추적하기가 쉽습니다. 반대로 안에서 밖으로 작업하는 것을 선호하셔도 전혀 문제없습니다. 아래에서 함께 따라가 보겠습니다.

body

바깥에서 안으로 들어가면 가장 먼저 만나는 것은 body 태그입니다. 페이지 전체를 담고 있는 가장 큰 컨테이너죠. 여기서 배경색, 마진, 그리고 애플리케이션의 width와 max-width를 설정할 수 있습니다.

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
}
</style>

div.container

다음 컨테이너는 첫 번째 div입니다. 이 부분은 비교적 간단합니다. 너비를 100%로 설정하기만 하면 됩니다.

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
margin: 0 auto;
}
div.container {
	width: 100%;
}
</style>

div.overlay-outer

마크업을 더 들어가 보면 다음으로 만나는 <div>는 class="overlay-outer"를 가진 요소입니다. 여기서부터 본격적으로 오버레이의 스타일링을 고민해야 합니다.


우선 이미지와 오버레이가 함께 들어갈 컨테이너의 크기를 정의해야 합니다. 웹페이지 너비의 몇 퍼센트를 차지하게 할까요? 높이는 얼마로 할까요? 또한 이 <div>에서는 이미지를 감싸는 '울타리(fence)' 역할을 설정해야 합니다. 따라서 position 속성을 추가해야 합니다.

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
margin: 0 auto;
}
div.container {
	width: 100%;
}
div.overlay-outer {
	width: 50%;
	height: 400px;
	position: relative;
}
div.
</style>

CSS 오버레이는 지금까지 배운 CSS 개념들이 모두 결합되는 영역입니다. 포지셔닝(position), background-color, opacity, object-fit, 그리고 div 등이 여기에 해당합니다. 외부 오버레이 컨테이너의 스타일을 마쳤다면, 이제 이미지와 내부 오버레이 컨테이너를 살펴봐야 합니다.

img

이미지 요소는 자신이 속한 컨테이너의 너비와 높이에 맞춰야 합니다. 원한다면 여기서 테두리(border)를 추가하거나 object-fit 속성으로 이미지를 자를 수도 있습니다.

div.overlay-inner

내부 오버레이 <div>와 그 스타일은 실제 오버레이의 모습을 결정합니다. 여기서 오버레이의 배경색을 선택하고 opacity를 0으로 설정합니다. 가장 중요한 것은 position: absolute, top: 0, left: 0을 추가하여 overlay-inner div가 position: relative로 설정된 상위 <div> 위에 정확히 얹히도록 하는 것입니다.

div.overlay-inner p

여기서는 오버레이 컨테이너 안에 들어갈 실제 콘텐츠를 스타일링합니다.

div.overlay-outer:hover .overlay-inner

마지막으로, 바깥쪽 오버레이 컨테이너에 :hover 의사 클래스(pseudo-class)를 적용하여 마우스를 올렸을 때 오버레이가 나타나도록 만듭니다.

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}

opacity를 0과 1 사이의 값으로 설정하면 내부 오버레이 div에 지정된 background-color가 반투명하게 표시됩니다. transition 속성은 opacity가 0에서 0.8로 부드럽게 전환되도록 만들어 줍니다.


이제 성공적으로 CSS 오버레이를 만들었습니다. 축하합니다!


CSS와 HTML을 활용하는 것은 요소에 오버레이를 만드는 여러 방법 중 하나입니다. 이번 솔루션에서는 transition, position, object-fit, width, height 등 다양한 CSS 속성을 활용했습니다.


이 글에서는 문제에 접근하는 방법, HTML 구조를 잡는 방법, 그리고 오버레이 효과를 위한 CSS 스타일링 방법까지 배웠습니다. 아래 코드에는 이 글에서 다룬 내용을 모두 담은 동작하는 완전한 예제가 있습니다.

<html>
<head>
	<style>
			* {
  				box-sizing: border-box;
}

body {
  background: grey;
  max-width: 800px;
  height: 1000px;
}

.outside {
  width: 75%;
  height: 400px;
  display: inline-block;
  position: relative;
  cursor: pointer;

}


.images {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border: 5px double black;
}

.inside {
  background-color: #9c1203;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
}

.inside p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  padding: 20px;
  text-align: left;
}

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}
</style>
</head>
<body>
	<div class="container" >
    		<h1>CSS Overlay</h1>
	<div class="overlay-outer>
	<img  class="images" src="https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80" /> alt="this-is-our-image" />
<div class="overlay-inner">
	<p>This is an overlay!</p>
</div> 
</div>
</div>
</body>
</html>

직접 마크업을 수정해 가면서 자신만의 버전의 오버레이를 만들어 보세요. 연습할수록 CSS 오버레이의 동작 원리를 더 깊이 이해하게 될 것입니다.