과제. 자기소개서 페이지 2. CSS

.headerleft {
  padding-left: 20px;
}

.name {
  font-size : 30px
}

h1{
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}

body {
  background-color: #f2f4f6;
}

#dream {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #4f4f4f;
  text-align: center;
  margin-top: 50px;
  margin-bottom : 10px;
}

#personality {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  paddig : 10px;
}

#interest {
  border: 3px solid black;
  width : 150px;
  text-align : center;

  font-size : 20px;
}

#skills {
  border: 3px solid black;
  width : 150px;
  text-align : center;
  font-size : 20px;
}

#mentor {
  border: 3px solid black;
  width : 150px;
  text-align : center;
  font-size : 20px;
}

#future {
  border: 3px solid black;
  width : 150px;
  text-align : center;
  font-size : 20px;
}

#main {
  margin-top : 70px;
  margin-left: 150px;
  margin-bottom: 10px;
}

#profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 100px;
}

#picture {
  padding-left: 100px
}

#self1 {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 200%;
}

#self2 {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 200%;
}

#tobe{
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 200%;
}

#self3 {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #4f4f4f;
  text-align: center;
  margin-top: 50px;
}

#self4 {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #4f4f4f;
  text-align: center;
  margin-top: 50px;
}

.contact{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #4f4f4f;
  margin-bottom: 10px;
  text-align: center;
}

.contact2{
  text-align: center;
  font-size: 50px;
}

.menu li{
  float: right;
  list-style: none;
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 30px;
  font-style:italic;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}

Page : https://younghyunhan.github.io/Self-introduction/
GIT : https://github.com/younghyunHan/Self-introduction

마치며

생활코딩 WEB HTML, CSS를 듣고 바로 자기소개 웹 페이지를 제작했다. 처음에 폰트는 어떤 것으로 하고, 레이아웃 배치는 어떻게 할지 등 기획을 탄탄히 해야 후에 로직을 짜는게 수월해진다는 것을 느꼈다. 기획을 잘해야 페이지를 통해 나타내고자 하는 주제도 분명해지는것 같다.

지금은 인터랙티브 웹을 구현하지 못했지만, 계속 공부를 해나가며 스크롤에 따라 사진이 바뀌는 부분도 구현할 것이다.