<!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">
<link rel="stylesheet" href="./css/style.css">
<title>5대 건강식품 소개</title>
</head>
<body>
<div id="wrap">
<div id="wrap2">
<div id="box1">
<img src="./iamges/1-1korea.gif">
<img src="./iamges/1-2kimchi.png">
<ul>
<ul>
<li>
<b>한국</b>
</li> </li>
<li>
<b>김치</b>
</li>
</ul>
</ul>
</div>
<div id="box2">
<img src="./iamges/2-1greece.jpg">
<img src="./iamges/2-2yogurt.jpg">
<ul>
<ul>
<li>
<b>그리스</b>
</li> </li>
<li>
<b>요거트</b>
</li>
</ul>
</ul>
</div>
<div id="box3">
<img src="./iamges/3-1spain.png">
<img src="./iamges/3-2olive.jpg">
<ul>
<ul>
<li>
<b>스페인</b>
</li> </li>
<li>
<b>올리브오일</b>
</li>
</ul>
</ul>
</div>
<div id="box4">
<img src="./iamges/4-1japan.png">
<img src="./iamges/4-2natto.jpg">
<ul>
<ul>
<li>
<b>일본</b>
</li> </li>
<li>
<b>낫또</b>
</li>
</ul>
</ul>
</div>
<div id="box5">
<img src="./iamges/5-1india.png">
<img src="./iamges/5-2rentil.jpg">
<ul>
<ul>
<li>
<b>인도</b>
</li> </li>
<li>
<b>렌틸콩</b>
</li>
</ul>
</ul>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
#wrap{
float: left;
width: 400px;
height: 900px;
border-radius: 10px;
background-color: red;
}
#wrap>#wrap2{
float: left;
width: 360px;
height: 850px;
border-radius: 10px;
background-color: green;
}
#wrap2>#box1{
margin-left: 50px;
float: left;
width: 200px;
height: 150px;
border-radius: 5%;
background-color: blue;
}
#box1>img{
width: 90px;
height: 90px;
border-radius: 10%;
margin-bottom: 0px;
}
#wrap2>#box2{
margin-left: 50px;
margin-top: 20px;
float: left;
width: 200px;
height: 150px;
border-radius: 5%;
background-color: blue;
}
#box2>img{
width: 90px;
height: 90px;
border-radius: 10%;
margin-bottom: 0px;
}
#wrap2>#box3{
margin-left: 50px;
margin-top: 20px;
float: left;
width: 200px;
height: 150px;
border-radius: 5%;
background-color: blue;
}
#box3>img{
width: 90px;
height: 90px;
border-radius: 10%;
margin-bottom: 0px;
}
#wrap2>#box4{
margin-left: 50px;
margin-top: 20px;
float: left;
width: 200px;
height: 150px;
border-radius: 5%;
background-color: blue;
}
#box4>img{
width: 90px;
height: 90px;
border-radius: 10%;
margin-bottom: 0px;
}
#wrap2>#box5{
margin-left: 50px;
margin-top: 20px;
float: left;
width: 200px;
height: 150px;
border-radius: 5%;
background-color: blue;
}
#box5>img{
width: 90px;
height: 90px;
border-radius: 10%;
margin-bottom: 0px;
}
ul{
margin-top: 0px;
padding-left: 17px;
}
li{
font-size: 5;
color: white;
}
'리스트 연습' 카테고리의 다른 글
| 리트리버 소개 페이지 (0) | 2023.02.28 |
|---|---|
| 영화 관람 등급 표 (0) | 2023.02.22 |
| 미국립 약물 중독 연구소 표 (0) | 2023.02.22 |