-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (69 loc) · 2.34 KB
/
index.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>
Main
</title>
<style>
h2 {
text-align: center;
color:rgb(7, 110, 110);
opacity: 0.8;
}
.top_title{
text-align: center;
}
.card {
text-align: center;
}
.card_title {
font-size: 15px;
color:rgb(19, 114, 82);
opacity: 0.7;
}
.card_button {
font-size: 13px;
width: 110px;
height: 23px;
}
.card_img {
width: 435px;
height: 240px;
}
</style>
</head>
<body> <!-- body 태그에 우리 화면 나타낼거임-->
<br>
<br>
<h2>오지현의 포트폴리오</h2> <!-- 화면 내용 -->
<br>
<div class="top_title">
<strong>안녕하세요, 주니어 개발자를 꿈꾸는 오지현입니다.
<br>
제 프로젝트를 소개합니다.
</strong>
<br>
<br>
<br>
<br>
</div>
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
<div class="card">
<img class="card_img" src="./img_/card1.png">
<p class="card_title"> <strong>프로젝트 설명</strong> </p><!--화면 상에서 의미 있는 단락 태그 p-->
<input class="card_button" type="button" value="자세히 보러가기" onclick="alert(1);">
</div>
<div class="card">
<img class="card_img" src="./img_/card2.png">
<p class="card_title"><strong> 구현 기능 설명</strong> </p><!--단락 태그 p-->
<input class="card_button" type="button" value="자세히 보러가기" onclick="alert(2);">
</div>
<div class="card">
<img class="card_img" src="./img_/card3.png">
<p class="card_title"> <strong>구현 방법 설명</strong> </p><!--단락 태그 p-->
<input class="card_button" type="button" value="자세히 보러가기" onclick="alert(3);">
</div>
</div>
</body>
</html>