η‘μ
μ½λ ν΄μ_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate λ³Έλ¬Έ
<401>
μ½λ ν΄μ_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate
yo-u-loo 2026. 3. 27. 17:32
ππ» βHTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 μ λλ©μ΄μ
</title>
<link rel="stylesheet" href="css/product.css">
</head>
<body>
<div id="container">
<h1>μ μν λͺ©λ‘</h1>
<ul class="prod-list">
<li>
<img src="images/prod1.jpg">
<div class="caption">
<h2>μν 1</h2>
<p>κ°κ²© : 12,345μ</p>
</div>
</li>
<li>
<img src="images/prod2.jpg">
<div class="caption">
<h2>μν 2</h2>
<p>μν 2 μ€λͺ
ν
μ€νΈ</p>
<p>κ°κ²© : 12,345μ</p>
</div>
</li>
<li>
<img src="images/prod3.jpg">
<div class="caption">
<h2>μν 3</h2>
<p>μν 3 μ€λͺ
ν
μ€νΈ</p>
<p>κ°κ²© : 12,345μ</p>
</div>
</li>
</ul>
</div>
</body>
</html>ππ»β 14/results/product.html
ππ»β CSS
/* μ 체 컨ν
μ΄λ μμ μ€μ */
#container {
max-width: 1000px;
margin: 20px auto;
width: 100%;
}
/* μ λͺ© μ€μ μ λ ¬ */
h1 {
text-align: center; /* ν
μ€νΈ μ€μ μ λ ¬ */
}
/* μν 리μ€νΈ μ€νμΌ */
.prod-list {
list-style: none; /* λ§μ»€ λͺ¨μ μ κ±° */
padding: 0;
display: flex; /* λΈλ‘ μμλ‘ λ³κ²½ */
flex-wrap: wrap; /* νλͺ©μ΄ 컨ν
μ΄λ λλΉλ₯Ό μ΄κ³Όνλ©΄ λ€μ μ€λ‘ μ΄λ */
justify-content: space-around; /* νλͺ© μ¬μ΄μ μ¬λ°±μ κ· λ±νκ² λΆλ°° */
}
/* κ° μν νλͺ© μ€νμΌ */
.prod-list li {
padding: 0;
margin: 10px;
overflow: hidden; /* μμ μμκ° μμμ λμ΄κ°λ©΄ μ¨κΉ */
flex-basis: calc(33.333% - 20px); /* ν μ€μ 3κ°μ νλͺ©, λ§μ§ 20px κ³ λ € */
position: relative; /* μ λ μμΉ μ§μ */
}
/* μν μ΄λ―Έμ§ μ€νμΌ */
.prod-list img {
width: 100%; /* μ΄λ―Έμ§κ° li νλͺ© λλΉμ λ§κ² μ‘°μ */
height: auto; /* μ΄λ―Έμ§ λΉμ¨ μ μ§ */
z-index: 5; /* μΊ‘μ
λ³΄λ€ μλμ νμ */
}
/* μν μΊ‘μ
(μ€λͺ
) μ€νμΌ */
.prod-list .caption {
position: absolute; /* li κΈ°μ€ μ λ μμΉ */
top: 200px;
width: 100%; /* li λλΉμ λ§μΆ€ */
height: 200px;
padding-top: 20px;
background: rgba(0,0,0,0.6);
opacity: 0; /* μ²μμλ 보μ΄μ§ μμ */
transition: all 0.6s ease-in-out; /* νΈλ² μ μ 체μ μΌλ‘ 0.6μ΄λμ λλ¦¬κ² μμ → λΉ λ₯΄κ² μ§ν → λλ¦¬κ² λλ¨ */
z-index: 10; /* μ΄λ―Έμ§ μμ νμ */
}
/* li νλͺ©μ λ§μ°μ€λ₯Ό μ¬λ¦¬λ©΄ μΊ‘μ
μ λλ©μ΄μ
μ μ© */
.prod-list li:hover .caption {
opacity: 1; /* λ§μ°μ€ μ¬λ¦¬λ©΄ 보μ΄λλ‘ λ³κ²½ */
transform: translateY(-200px); /* μλ‘ μ΄λ */
}
/* μΊ‘μ
λ΄λΆ μ λͺ©κ³Ό λ¬Έλ¨ μ€νμΌ */
.prod-list .caption h2, .prod-list .caption p {
color: #fff;
text-align: center; /* μ€μ μ λ ¬ */
}
}
ππ»β 14/results/product.css
#html #div #ul #li #img #src #class
#css #text-align #display #flex #flex-wrap #wrap # justify-content #space-around #overflow #hidden #flex-basis #calc #position #relative #z-index #absolute #opacity #transition #ease-in-out #:hover #transform #translateY
'<401>' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
'<401>' Related Articles
more
