1. 결과물
2. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리트리버 소개</title>
<link rel="stylesheet" href="./css/test03.css">
</head>
<body>
<div id="wrap">
<ul>
<div class="head">
<div class="main">
대표종
</div>
<div class="info">
35개 이상 항목 더보기
</div>
</div>
<li class="dog1">
<img src="./images/dog1.jpg" alt="">
<a href="#">래브라도 리트리버</a>
</li>
<li class="dog2">
<img src="./images/dog2.jpg" alt="">
<a href="#">골든 리트리버</a>
</li>
<li class="dog3">
<img src="./images/dog3.jpg" alt="">
<a href="#">플랫 코티드 리트리버</a>
</li>
<li class="dog4">
<img src="./images/dog4.jpg" alt="">
<a href="#">체서피크베이 리트리버</a>
</li>
</ul>
</div>
</body>
</html>3. css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#wrap{
width: 800px;
height: 300px;
}
#wrap>ul>.head{
width: 800px;
height: 50px;
}
#wrap>ul>.head>.main{
width: 200px;
height: 50px;
float: left;
font-size: 30px;
font-weight: bold;
padding-left: 15px;
padding-top: 10px;
box-sizing: border-box;
}
#wrap>ul>.head>.info{
width: 600px;
height: 50px;
float: left;
text-align: right;
font-size: 20px;
font-weight: 500;
color: gray;
padding-right: 30px;
padding-top: 20px;
box-sizing: border-box;
}
#wrap>ul>.dog1{
width: 200px;
height: 250px;
float: left;
}
#wrap>ul>.dog2{
width: 200px;
height: 250px;
float: left;
}
#wrap>ul>.dog3{
width: 200px;
height: 250px;
float: left;
}
#wrap>ul>.dog4{
width: 200px;
height: 250px;
float: left;
}
#wrap>ul>li>img{
width: 170px;
height: 170px;
position: relative;
padding-left: 15px;
padding-top: 15px;
border-radius: 30px;
box-sizing: border-box;
}
#wrap>ul>li>a{
width: 160px;
height: 50px;
font-size: 20px;
position: relative;
margin-top: 5px;
margin-left: 15px;
float: left;
color: blue;
}
배경색을 넣어 틀을 먼저 세우고 코드를 짜는 순서로 작업했다.
이렇게 하니 체계적으로 잘된다.
'HTML & CSS' 카테고리의 다른 글
| [HTML][CSS] display 속성 - block, inline, inline-block (0) | 2020.12.21 |
|---|---|
| [HTML][CSS] 수성아트피아 리페어 페이지 만들기 과제 (0) | 2020.12.19 |
| [HTML] 절대경로, 상대경로 - 이미지 경로 표기법 (0) | 2020.12.17 |
| [html][css] 관람등급 만들기 - div,span,table,display (0) | 2020.12.16 |
| [html] table(테이블) 태그 이용해서 표 만들기 -tr,td,th (0) | 2020.12.15 |