<!DOCTYPE html>
<html lang="en">
<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>
<style>
header {
text-align: center;
border-bottom: 1px solid gray;
}
main {
text-align: center;
justify-content: center;
display: grid;
grid-template-columns: 300px 300px 300px;
gap: 20px;
margin-top: 30px;
}
main div {
display: grid;
align-items: center;
width: 300px;
height: 300px;
-webkit-text-stroke: 1.5px white;
}
main div:hover {
cursor: pointer;
filter: brightness(1)
}
.box1 {
background-image: url(https://korean.miceseoul.com/humanframe/theme/mice/assets/images/spot/img_spot_view01.png);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box2 {
background-image: url(https://a.cdn-hotels.com/gdcs/production37/d1169/1dcbfef5-2070-48ce-8d62-3e0fffa21797.jpg);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box3 {
background-image: url(https://www.boannews.com/media/upFiles2/2021/02/37870896_5395.jpg);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box4 {
background-image: url(https://www.boannews.com/media/upFiles2/2021/02/37870896_5395.jpg);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box5 {
background-image: url(https://cdn.travie.com/news/photo/201903/20822_3401_022.jpg);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box6 {
background-image: url(https://blog.kakaocdn.net/dn/o1KIw/btqu9mflPY6/rGk1mM3iugV1c6jj9Z3E80/img.jpg);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box7 {
background-image: url(https://mblogthumb-phinf.pstatic.net/MjAyMjAzMTFfMTgw/MDAxNjQ2OTk4MTY4Njkz.jr9Rd2F-UXEXmJ8MAFcyMuFqSl1GIz_tBZwJujdQmREg.DkCnMfPLude3z2f-SX3E1oQ8OKvIJiubGVvb9rKqxWwg.JPEG.nydelphie/SOL_9696-1.jpg?type=w800);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box8 {
background-image: url(https://wimg.mk.co.kr/meet/neds/2018/02/image_readtop_2018_125340_15193490843215810.jpg);
background-size: 300px 300px;
filter: brightness(0.7);
}
.box9 {
background-image: url(https://www.goyang.go.kr/resources/park/images/content/img-packStatus1-2.png);
background-size: 300px 300px;
filter: brightness(0.7);
}
</style>
</head>
<body>
<header>
<h1>그리드를 사용한 실습</h1>
<h3>각각의 박스 : 300px * 300px</h3>
<h3>글씨가 상하 중앙으로 오도록 정렬할 것</h3>
<h3>박스 전체를 클릭 가능한 영역으로 만들 것</h3>
</header>
<main>
<div class="box1"><h1>서울</h1></div>
<div class="box2"><h1>부산</h1></div>
<div class="box3"><h1>대구</h1></div>
<div class="box4"><h1>광주</h1></div>
<div class="box5"><h1>포항</h1></div>
<div class="box6"><h1>제주</h1></div>
<div class="box7"><h1>속초</h1></div>
<div class="box8"><h1>목포</h1></div>
<div class="box9"><h1>고양</h1></div>
</main>
</body>
</html>
꿈꾸는 개발자