[웹 UI 개발] 이미지 리스트 - 3 / 이미지 액자 효과
2023. 3. 22. 12:46
위 이미지에서 썸네일의 외곽에 보이는 border와 dimmed된 배경이 이미지 액자 효과이다.
예제를 통해 이미지 액자 효과를 구현하는 방법을 알아본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지 액자 효과</title>
<link rel="stylesheet" href="css/image_wrap.css">
</head>
<body>
<div class="img_wrap">
<img src="https://i.namu.wiki/i/RBhbaU79iT8xogKdQdpsm1_gX_EF2dNrcSAuG-r5ZWUkLMlyOsR9S3JmuJE1M9VpvJAerzsfxCJ6RlH9kkWAKM0J_xy8T89sgfpxC7jHrXtXmStuuXN9c4fcSGnaC6rrRAI-PQ00jo5mtoeF4r7A-g.webp" width="200" height="134" alt="와인잔 든 페페" >
</div>
</body>
</html>
.img_wrap {
position: relative;
width: 200px;
height: 134px;
}
.img_wrap::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.15);
}
.img_wrap {
position: relative;
width: 200px;
height: 134px;
}
.img_wrap::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.15);
}img_wrap에 after 가상요소를 추가해서 외곽선과 dim을 구현한다.
가상요소의 위치를 이미지와 겹치도록 "position: absolute;"로 설정하고 top, right, bottom, left를 0으로 둔다.
이미지와 겹쳐야하기 때문에 absolute의 기준이 img_wrap이 되도록 img_wrap에 "position: relative;" 속성을 추가한다.
그런 다음 border와 background-color 속성으로 외곽선과 dim을 표현한다.
굳이 가상요소를 사용한 이유는 시맨틱 마크업을 위해서이다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 이미지 리스트 - 5 / 아이콘 상태 변경 (0) | 2023.03.22 |
|---|---|
| [웹 UI 개발] 이미지 리스트 - 4 / 이미지 리스트 제작 (0) | 2023.03.22 |
| [웹 UI 개발] 이미지 리스트 - 2 / 텍스트 말줄임 (0) | 2023.03.22 |
| [웹 UI 개발] 이미지 리스트 - 1 / 이미지 리스트 정렬 (0) | 2023.03.22 |
| [웹 UI 개발] 이미지 리스트 - 0 (0) | 2023.03.22 |
