<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="0609 그리드 실습.css">
</head>
<body>
<div class="header">
<h1>그리드를 이용한 실습</h1>
<h3>각각의 박스 : 300px * 300px</h3>
<h3>글씨가 상하 중앙으로 오도록 정렬할 것</h3>
<h3>박스 전체를 클릭 가능한 영역으로 만들 것</h3>
</div>
<div class="container">
<div class="box">
<div style="background-image: url(https://w0.peakpx.com/wallpaper/165/747/HD-wallpaper-beautiful-landscape-digital-art.jpg);"></div>
<p>자기 마음이 자기를 묶어 맨 자는 스스로 자기가 자기를 가려서 그늘이 되게 하고 햇빛을 못 보게 한다.</p>
</div>
<div class="box">
<div style="background-image: url(https://cdn.shopify.com/s/files/1/0565/7080/6458/collections/2_fea1d36a-acbd-4f5d-8e4a-80eb55de701c.jpg?v=1660119851);"></div>
<p>자기 중심이 강한 사람은 자기를 비워야 온전한 생각을 받을 수 있다.</p>
</div>
<div class="box">
<div style="background-image: url(https://webneel.com/wallpaper/sites/default/files/images/08-2018/3-nature-wallpaper-mountain.jpg);"></div>
<p>상대를 대할 땐, 한없이 너그럽고 넓은 마음을 가져야 한다.</p>
</div>
<div class="box">
<div style="background-image: url(https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D&w=1000&q=80);"></div>
<p>사람들은 저마다 생각도 습관도 재능도 다르다. 그래서 자기 생각대로 대하면 서로 부딫힌다.</p>
</div>
<div class="box">
<div style="background-image: url(https://wallpapers.com/images/featured/kquin5jg1dtbyxgc.jpg);"></div>
<p>다른 사람들의 말에 요동하지 말고 사람마다 각자에게 합당한 방식으로 끝까지 행해야 한다.</p>
</div>
<div class="box">
<div style="background-image: url(https://wallpapers.com/images/featured/2ygv7ssy2k0lxlzu.jpg);"></div>
<p>행하는 자는 자꾸 얻으니 행하게 된다.</p>
</div>
<div class="box">
<div style="background-image: url(https://images.pexels.com/photos/2440024/pexels-photo-2440024.jpeg?cs=srgb&dl=pexels-ian-beckley-2440024.jpg&fm=jpg);"></div>
<p>현실의 자기 삶 속에서만 살다 보니, 지난 날의 것들을 잊게 된다.</p>
</div>
<div class="box">
<div style="background-image: url(https://wallpaperaccess.com/thumb/9070071.png);"></div>
<p>지금 당연히 누리는 것들을 뒤에는 수많은 희생의 눈물과 고통이 있었음을 잊지 말아라.</p>
</div>
<div class="box">
<div style="background-image: url(https://e0.pxfuel.com/wallpapers/175/157/desktop-wallpaper-anime-nature-anime-peaceful.jpg);"></div>
<p>모든것은 누군가에겐 소중하다.</p>
</div>
</div>
</body>
</html>=========================================================================================================================
*{margin: 0; padding: 0; box-sizing: border-box;}
.header {
text-align: center;
border-bottom: 1px solid black;
}
.container {
margin: 40px;
width: 940px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: white;
background-color: black;
font-size: 20pt;
font-weight: bold;
text-shadow:black 1px 1px 1px;
display: grid;
align-items: center;
text-align: center;
padding: 20px;
cursor: pointer;
}
.box div {
width: 300px;
height: 300px;
background-size: cover;
opacity: 50%;
position: absolute;
}
.box div:hover {
opacity: 100%;
}
.box p {
position: relative;
}
