리트리버.zip
0.92MB
<html 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!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>Retrievers</title>
</head>
<body>
<div id="wrap">
<header id="header">
<div id="head">
<a id="represent" href="https://www.google.com/search?q=%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84+%EB%8C%80%ED%91%9C+%EC%A2%85&stick=H4sIAAAAAAAAAONgFuLUz9U3MDKoqEhWQjC17LOTrfSTMvNz8tMr9TPz0vKLchNz4iECmclAZnpRfmlBZl66VVFqQVFqcWpeSWJJZlmqQnFBanJmavEiVvHXy9a87doBJF9valF43dPwduIchTeLWnewMgIAX7NtvXYAAAA&sa=X&ved=2ahUKEwjb08nMy7f9AhXgilYBHXjTAQAQMSgAegQIThAB&biw=1115&bih=715&dpr=1">
<h1>대표종</h1>
</a>
</div>
<div id="seemore">
<a id="see" href="https://www.google.com/search?q=%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84+%EB%8C%80%ED%91%9C+%EC%A2%85&stick=H4sIAAAAAAAAAONgFuLUz9U3MDKoqEhWQjC17LOTrfSTMvNz8tMr9TPz0vKLchNz4iECmclAZnpRfmlBZl66VVFqQVFqcWpeSWJJZlmqQnFBanJmavEiVvHXy9a87doBJF9valF43dPwduIchTeLWnewMgIAX7NtvXYAAAA&sa=X&ved=2ahUKEwjb08nMy7f9AhXgilYBHXjTAQAQMSgAegQIThAB&biw=1115&bih=715&dpr=1">
35개 이상 항목 더보기
</a>
</div>
</header>
<div id="main">
<ul>
<li>
<a href="https://namu.wiki/w/%EB%9E%98%EB%B8%8C%EB%9D%BC%EB%8F%84%20%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">
<img style = "border-radius: 7px;" src="./images/dog1.jpg" width="100px" height="100px" alt="래브라도 리트리버">
<br>
<a href="https://namu.wiki/w/%EB%9E%98%EB%B8%8C%EB%9D%BC%EB%8F%84%20%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">래브라도 리트리버</a>
</a>
</li>
<li>
<a href="https://namu.wiki/w/%EA%B3%A8%EB%93%A0%20%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">
<img style = "border-radius: 7px;" src="./images/dog2.jpg" width="100px" height="100px" alt="골든 리트리버">
<br>
<a href="https://namu.wiki/w/%EA%B3%A8%EB%93%A0%20%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">골든 리트리버</a>
</a>
</li>
<li>
<a href="https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9E%AB_%EC%BD%94%ED%8B%B0%EB%93%9C_%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">
<img style = "border-radius: 7px;" src="./images/dog3.jpg" width="100px" height="100px" alt="플랫 코티드 리트리버">
<br>
<a href="https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9E%AB_%EC%BD%94%ED%8B%B0%EB%93%9C_%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">플랫 코티드 리트리버</a>
</a>
</li>
<li>
<a href="https://ko.wikipedia.org/wiki/%EC%B2%B4%EC%84%9C%ED%94%BC%ED%81%AC_%EB%B2%A0%EC%9D%B4_%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">
<img style = "border-radius: 7px;" src="./images/dog4.jpg" width="100px" height="100px" alt="체서피크베이 리트리버">
<br>
<a href="https://ko.wikipedia.org/wiki/%EC%B2%B4%EC%84%9C%ED%94%BC%ED%81%AC_%EB%B2%A0%EC%9D%B4_%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84">체서피크베이 리트리버</a>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
|
cs |
<css 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
height: 250px;
}
a{
text-decoration: none;
}
#wrap{
width: 500px;
height: 250px;
margin-left: 100px;
margin-top: 100px;
}
#head{
width: 300px;
height: 50px;
float: left;
}
#seemore{
float: right;
width: 200px;
height: 20px;
margin-top: 25px;
margin-bottom: 5px;
}
#main{
width: 500px;
height: 250px;
}
li{
display: inline-block;
width: 100px;
height: 150px;
padding: 5px;
}
#represent{
color: black;
}
#see{
color: grey;
}
|
cs |
'Front-end > HTML+CSS' 카테고리의 다른 글
| 웹디자인기능사 JUST쇼핑몰 연습 (0) | 2023.03.14 |
|---|---|
| 대구 동구도서관 웹 화면 코드 분석 (0) | 2023.02.28 |
| 웹디자인기능사 와이어프레임 구축 연습(B-4. 산업대학교) (0) | 2023.02.18 |
| 웹디자인기능사 와이어프레임 구축 연습(B-3. 세계의 미술작품) (0) | 2023.02.18 |
| 웹디자인기능사 와이어프레임 구축 연습(B-2. 대한투어) (0) | 2023.02.18 |
