오버레이는 사용자가 취해야 하는 다음 작업의 올바른 방향으로 사용자를 안내하기 위해 웹사이트에서 사용되는 효과입니다. 올바른 사용은 긍정적인 사용자 경험을 제공하여 사용자를 웹사이트에 계속 머물게 할 수 있습니다.
오버레이를 만드는 방법에는 여러 가지가 있습니다. 정답은 없습니다. 귀하의 사이트와 귀하가 필요로 하는 것에 가장 적합한 방법을 선택하는 것이 중요합니다.
이 가이드에서는 이미지 위로 마우스를 가져갈 때 원하는 오버레이 효과를 얻기 위해 기본 HTML 및 CSS(자바스크립트 없음)를 사용하는 데 중점을 둘 것입니다.
HTML 차단
이미지 오버레이를 만드는 데 사용할 HTML 상용구를 만들어 보겠습니다.
<html> <head> <style> /*No CSS to display yet*/ </style> </head> <body> <div class="container" ></div> </body> </html>
문제 이해
처음으로 새로운 것을 시도할 때 검색 엔진에 문의하기 전에 편안히 앉아서 문제를 해결하는 방법에 대해 생각해야 합니다. 오버레이가 작동하는 방식과 우리가 해야 할 일을 확실히 이해했다면 필요한 경우 힌트와 팁을 찾는 것이 더 좋을 것입니다.
요약하자면 오버레이는 컨테이너(이 경우 이미지) 위로 이동하여 이미지 위로 마우스를 가져갈 때 이미지에 작업을 수행합니다. 이것은 사용자가 사이트와 상호 작용하도록 지시합니다.
앞으로 나아가서 큰 그림을 생각하십시오. 이 작업을 수행하는 방법에 대한 모든 세부 사항을 쏟아 붓지 마십시오. 이미지가 있고 오버레이가 있습니다. 즉, 적어도 두 개의 컨테이너입니다. 그리고 그 두 개의 컨테이너는 더 큰 컨테이너에 있어야 합니다.
아직 스타일을 지정하려고 하지 마십시오. 순전히 HTML에서 작업하고 코드를 작성하십시오. 아래 마크업을 살펴보기 전에 직접 차단할 수 있는지 확인하세요.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 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 태그에 도달합니다. 이것은 페이지에서 가장 큰 컨테이너이며 페이지를 보유합니다. 여기에서 배경색, 여백, 애플리케이션의 너비와 최대 너비를 설정할 수 있습니다.
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
}
</style>
사업부 컨테이너
다음 컨테이너는 첫 번째 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>이기도 합니다. 우리의 이미지를 위한 "울타리"를 설정해야 하는 곳입니다. 따라서 요소에 위치 속성을 추가해야 합니다.
<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 오버레이는 위치 지정, 배경색, 불투명도, 개체 맞춤 및 div와 같이 지금까지 CSS에서 배운 많은 내용을 결합합니다. 외부 오버레이 컨테이너의 스타일을 지정한 후에는 이미지와 내부 오버레이 컨테이너를 살펴봐야 합니다.
이미지
이미지 요소는 해당 컨테이너의 너비와 높이와 일치해야 합니다. 원하는 경우 테두리를 넣고 이미지를 자르는 위치이기도 합니다.
Div.overlay-inner
내부 오버레이 <div> 스타일은 오버레이의 실제 모양과 관련이 있습니다. 여기에서 오버레이의 배경색을 선택하고 불투명도를 0으로 설정합니다. 가장 중요한 것은 position: absolute, top: 0 and left: 0을 추가해야 한다는 것입니다. 오버레이 내부 div가 <div> 에 위치하도록 position:relative로 설정됩니다.
Div.overlay-inner p
여기에서 오버레이 컨테이너의 실제 콘텐츠 스타일을 지정합니다.
Div.overlay-outer:hover .overlay-inner
마지막으로 외부 오버레이 컨테이너에 :hover 의사 클래스를 추가하여 오버레이가 위로 이동하면 오버레이가 표시되도록 할 것입니다.
.outside:hover .inside {
opacity: .8;
transition: opacity .5s;
}
불투명도를 0과 1 사이로 설정하면 내부 오버레이 div에 할당된 배경색이 반투명해질 수 있습니다. transition 속성을 사용하면 불투명도 0에서 불투명도 8로 부드럽게 전환됩니다.
이제 CSS 오버레이를 성공적으로 만들었습니다. 축하합니다!
CSS와 HTML을 사용하는 것은 요소에 대한 오버레이를 만들 수 있는 여러 방법 중 하나입니다. 이 솔루션의 경우 전환, 위치, 개체 맞춤, 너비, 높이 등 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>
이 오버레이의 자신만의 버전을 만들 수 있는지 확인하기 위해 시간을 내어 마크업을 가지고 놀아보세요.