<!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="0411 웹개발 과제.css">
</head>
<body style="background-color: rgb(165, 217, 220);">
<div class="main">
<div class="box" onclick="location.href='https://www.apple.com/kr/store?afid=p238%7CsiADh6hbK-dc_mtid_18707vxu38484_pcrid_650480254001_pgrid_16348496961_pntwk_g_pchan__pexid__&cid=aos-kr-kwgo-Brand--slid---product-'">
<img src="https://mobiinsidecontent.s3.ap-northeast-2.amazonaws.com/kr/wp-content/uploads/2023/03/29103727/233228_235715_3811.jpg" alt="">
애플
</div>
<div class="box" onclick="location.href='https://www.android.com/intl/ko_kr/'">
<img src="https://t1.daumcdn.net/cfile/tistory/996A98445F33C04707" alt="">
구글 안드로이드
</div>
<div class="box" onclick="location.href='https://about.meta.com/ko/'">
<img src="https://www.boannews.com/media/upFiles2/2021/10/421649394_3969.JPG" alt="">
메타 페이스북
</div>
<div class="box" onclick="location.href='https://www.instagram.com/'">
<img src="https://cdn.eyesmag.com/content/uploads/posts/2021/12/14/%EB%89%B4%EB%A9%94%EC%9D%B8-50cc9b34-5fee-4989-b36d-11067745567c.jpg" alt="">
인스타그램
</div>
<div class="box" onclick="location.href='https://www.amazon.com/'">
<img src="https://cdn.esgeconomy.com/news/photo/202108/1140_1524_428.png" alt="">
아마존
</div>
<div class="box" onclick="location.href='https://www.microsoft.com/ko-kr'">
<img src="data:image/jpeg;base64,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" alt="">
마이크로소프트
</div>
</div>
</body>
</html>\===================================================================================================================================================
.box {
width: 25%;
height: 45%;
cursor: pointer;
border: 1px solid green;
border-radius: 20px;
margin: 10px;
background-color: white;
padding: 10px;
display:inline-block ;
}
img {
width: 100%;
height: 100px;
border-radius: 20px;
}
.main {
width: 600px;
margin-left: auto;
margin-right:auto;
background-color:azure;
padding:10px;
text-align:center
}