diff --git a/public/index.html b/public/index.html
index 28c1daab28a00332c482fe7fc85ce783da456c33..2ff3ad89472828c95da05fddf0223e46eefd72e0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,24 +7,64 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
- <!-- <div class="navbar">
- <a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
- <a href="https://gitlab.com/pages/plain-html/">Repository</a>
- <a href="https://gitlab.com/pages/">Other Examples</a>
- </div> -->
+ <div class="navbar">
+ <a href="http://snowfluppy.ajousw.kr/testhomepage" target="_blank">친구 웹페이지</a>
+ </div>
<div class="container">
<div class="parent-container">
<h1 class="title">내 정보</h1>
- <div class="child-container">
- <img class="cover" src="images/cover.jpg">
- <div class="info-box">
- <h2>이름</h2>
- <h3>임민호</h3>
- <h2>학번</h2>
- <h3>201920478</h3>
- <h2>학과</h2>
- <h3>소프트웨어학과</h3>
+ <div class="flex flex-col">
+ <div class="child-container">
+ <img class="cover" src="images/cover.jpg">
+ <div class="info-container">
+ <h2>이름</h2>
+ <h3>임민호</h3>
+ <h2>학번</h2>
+ <h3>201920478</h3>
+ <h2>학과</h2>
+ <h3>소프트웨어학과</h3>
+ </div>
+ </div>
+ <div class="feature-container">
+ <h2>향후 할 일</h2>
+ <ol>
+ <h6><li>운전면허 합격</li></h6>
+ <h6><li>캡스톤디자인 앱 디자인</li></h6>
+ <h6><li>React-native 공부</li></h6>
+ </ol>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="parent-container">
+ <h1 class="title">내가 좋아하는 가수</h1>
+ <div class="child2-container">
+ <div class="img-box">
+ <img class="cover" src="images/singer.jpg">
+ </div>
+ <div class="info-container">
+ <div class="info-box">
+ <h4>이름</h4>
+ <h5>조유리</h5>
+ </div>
+ <div class="info-box">
+ <h4>나이</h4>
+ <h5>23</h5>
+ </div>
+ <div class="info-box">
+ <h4>솔로 데뷔일</h4>
+ <h5>2021.10.07</h5>
+ </div>
+ </div>
+ <div class="feature-container">
+ <h2>특징</h4>
+ <ul>
+ <h6><li>그룹 '아이즈원'으로 활동함</li></h6>
+ <h6><li>그룹 '아이즈원' 활동 종료 후 솔로 데뷔함</li></h6>
+ <h6><li>솔로 데뷔 타이틀 곡 "GLASSY"</li></h6>
+ </ul>
</div>
</div>
</div>
diff --git a/public/style.css b/public/style.css
index c876b21d72f499cff834d21b87730cf43312c9d7..e19814648f46278dda8fd45929fc4de4827b2762 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5,15 +5,19 @@
body {
font-family: sans-serif;
- padding-top: 3rem;
margin: auto;
- max-width: 1280px;
+ margin-bottom: 3rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-/* .navbar {
+.navbar {
background-color: #313236;
- border-radius: 2px;
- max-width: 800px;
+ width: 100%;
+
+ margin-bottom: 3rem;
+ text-align: center;
}
.navbar a {
@@ -26,13 +30,27 @@ body {
.navbar a:hover {
color: #ffffff;
-} */
+}
.container {
+ max-width: 1280px;
+ width: 100%;
display: flex;
flex-direction: column;
}
+.flex {
+ display: flex;
+}
+
+.flex-col {
+ flex-direction: column;
+}
+
+.flex-row {
+ flex-direction: row;
+}
+
.container > .parent-container:not(:first-child) {
margin-top: 3rem;
}
@@ -41,7 +59,7 @@ body {
display: flex;
flex-direction: column;
- padding: 1rem 3rem;
+ padding: 1.5rem 3rem;
margin: 0 2rem;
border: solid 1px grey;
@@ -52,22 +70,82 @@ body {
margin-bottom: 1rem;
}
-.child-container > .cover {
- height: 300px;
+.child-container {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 3rem;
+}
+
+.img-box {
+ display: flex;
+ justify-content: center;
+}
+
+.cover {
+ min-width: 200px;
+ min-height: 200px;
+
+ max-width: 600px;
+ max-height: 500px;
+
+ width: fit-content;
+ height: fit-content;
margin-right: 1.5rem;
object-fit: cover;
border-radius: 16px;
}
-.child-container {
+.info-container {
display: flex;
- flex-direction: row;
+ flex-direction: column;
+ margin-top: 3rem;
}
-.info-box > h2 {
+.info-container > h2 {
margin-bottom: 0.5rem;
}
-.info-box > h2:not(:first-child) {
- margin-top: 1.5rem;
+.info-container > h2:not(:first-child) {
+ margin-top: 2rem;
+}
+
+.child2-container {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+
+
+.info-box {
+ display: flex;
+ align-items: center;
+}
+
+.info-box:not(:first-child) {
+ margin-top: 1rem;
+}
+
+.info-box h4 {
+ margin-right: 1rem;
+}
+
+.feature-container {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ text-align: left;
+
+ margin-top: 2rem;
+}
+
+.feature-container > h2 {
+ margin-bottom: 1rem;
+ background-color: antiquewhite;
+
+ font-size: 2rem;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.feature-container h6:not(:first-child) {
+ margin-top: 0.5rem;
}
\ No newline at end of file