자기소개 페이지 #3

64206 단어 TILCSShtmlCSS

자기소개 페이지를 드디어 마무리했다

하지만 마지막에 급하게 마무리한 느낌이 너무 많이 들어서 아쉽기도 하다

1. Want


백엔드와 DB와 관련된 ICON을 가져오고 싶었는데 하나 같이 다 검은색이어서 기존 배경색에는 어울리지 않았다

마지막에 그냥 흰 배경으로 깔끔하게 만들걸이라는 후회를 했다

결국 선택한 방법은 img 위에 div를 줘서 배경색을 줘버렸다
저 부분만 너무 눈에 띄지만 나름 만족한다

2. 코드 업로드

부족하지만 자기소개 페이지의 코드를 업로드 해보겠다

2.1 Home

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Gyuls Page</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>

  <body>
    <div class="header">
      <div class="logo">GYUBIN's PAGE</div>
      <a href="https://velog.io/@gyuls" target="_blank"><img src="img/velog.jfif" alt="velog logo"></a>
    </div>
    <!-- //header -->
      <div class="nav">
        <ul class="nav-list">
          <li class="nav-item"><a href="home.html" class="nav-link">HOME</a></li>
          <li class="nav-item"><a href="about.html" class="nav-link">ABOUT</a></li>
          <li class="nav-item"><a href="interest.html" class="nav-link">INTEREST</a></li>
          <li class="nav-item"><a href="want.html" class="nav-link">WANT</a></li>
        </ul>
      </div>
      <!-- //nav -->
      <div class="footer">
        <p class="copyright">&copy;Gyuls</p>
      </div>
      <!-- //footer -->
      <div class="container">
        <div class="content">
          <img class="main-image"src="img/man.png" alt="">
          <h1>Hello World I'm <span>Gyubin</span> !<br>
          I'm dreaming of becoming a <span>back-end developer</span> / want to analyze data !</h1>
          <h2>안녕하세요 저는 <span>허규빈</span>입니다 ! <br>
          <span>백엔드 개발자</span>를 희망하고 데이터 분석도 해보고 싶어요 !</h2>
        </div>
      </div>
    <!-- //container -->
    </div>
  </body>
</html>
* {
  margin: 0;
  padding: 0;
}

body {
  font:14px Arial, Helvetica, sans-serif;
  overflow: hidden;
  background-image: url("https://images.unsplash.com/photo-1591530201596-c5076b7c60ce?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTQ0fHxibHVlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.header {
  padding:60px 10px;
}
.logo {
  font-size: 2.5em;
  font-weight: bold;
  display: inline-block;
  padding-left: 50px;
  color: darkorange;
}

.header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: right;
  margin-right: 50px;
}

.nav {
  float: left;
  width: 100px;
  margin: 100px 250px 0 50px;
}
.nav-list {
  list-style: none;
  margin: 0;
}
.nav-item {
  margin: 10px 0;
}
.nav-link {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
}
.nav-link:hover {
  width: 100px;
  color: orange;
  background: blue;
  font-weight: bold;
}

.footer {
  margin: 400px 250px 0 50px;
  padding: 10px 0;
  width: 100px;
  float: left;
  font-size: 0.8em;
  text-align: center;
  clear: left;
}

.container {
  margin-top: 100px;
  overflow: hidden;
}

.content span {
  color: orange;
}

.main-image {
  display: inline-block;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  margin-bottom: 50px;
}


처음 페이지를 구상했던 대로 header, nav, footer, container-content 의 형태로 만들었다

footer가 container 안에 있는게 이상하지만 처음에 구상했던 형태로 만들려니 다른 방법이 떠오르지 않았다

처음 코드를 작성할 때 float을 이용해서 구역을 나눌 때 nav와 footer 길이보다 content의 길이가 길어지면 옆으로 삐져나와서 고민을 했는데 여기선 content 길이보다 footer 길이를 늘리는 것으로 해결했다

현재 웹페이지에서는 세로 길이가 짧아서 스크롤이 없지만 나중에 세로 길이가 늘었을 때는 새로운 방법을 찾아봐야겠다



2.2 About / Interest

Home과 공통된 부분은 제외하고 가져왔다

      <div class="container">
        <div class="content1">
          <img class="con-img" src="img/심리학.jpg" alt="">
          <div class="con-text">
            <h1><span>심리학</span> 전공 / <span>경영학</span> 복수전공</h1>
            <p>대학에서 심리학과 경영학을 전공하였습니다.<br>학과 수업과 <span>광고/홍보 동아리</span> 활동 등을 통해 <span>마케팅</span> 업무를 희망하였습니다.<br><span>통계프로그램(spss)</span>를 배우고 활용하며 <span>데이터 관련 직무</span>를 희망했습니다. </p>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="content2">
          <img class="con-img" src="img/학군단.jpeg" alt="">
          <div class="con-text">
            <h1><span>ROTC</span> 군 복무</h1>
            <p>군에서 2년 4개월 간의 장교생활을 경험했습니다.<br>소대장으로 임무수행을 하였고 군 생활이 잘 맞았으나 사회에서 취업을 희망하여 전역하였습니다.</p>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="content3">
          <img class="con-img" src="img/취업.jpg" alt="">
          <div class="con-text">
            <h1><span>취업</span></h1>
            <p>전역 후 물류센터 <span>인사팀</span> / 핀테크 업체 <span>KYC 업무</span>를 경험했습니다.<br>핀테크 업체에서 개발자분들과 접촉할 기회가 많았고 코딩에 대해 관심이 생겨 공부를 시작했습니다.<br>혼자 공부를 하다보니 본격적으로 교육을 받고싶다는 생각이 들어 교육학원에 등록하게 되었습니다.</p>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    <!-- //container -->
  </body>
</html>
      <div class="container">
        <div class="content1">
          <img class="con-img" src="img/볼링.jpg" alt="">
          <div class="con-text">
            <h1><span>스포츠</span></h1>
            <p>운동하는 것과 보는 것을 좋아합니다.<br>야구와 볼링을 자주 했고 배구와 테니스도 조금 해보았습니다.<br>현재는 스포츠활동을 잠시 쉬고있지만 조만간 다시 하고싶네요!</p>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="content2">
          <img class="con-img" src="img/자연.jpg" alt="">
          <div class="con-text">
            <h1><span>산책</span></h1>
            <p>자연과 함께하는 것을 좋아합니다.<br>산과 바다 강변 식물원 등 어디든지 다 좋아합니다.<br>자연 속에서 걷다보면 힐링이라는 것이 무엇인지 제대로 느낄 수 있습니다.</p>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="content3">
          <img class="con-img" src="img/food.jpg" alt="">
          <div class="con-text">
            <h1><span>음식</span></h1>
            <p>맛있는 음식을 먹고 요리하는 것을 좋아합니다.<br>클라우드와 핸드폰 갤러리엔 음식사진만 가득합니다. 😂</p>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    <!-- //container -->
  </body>
</html>
.con-img {
  float: left;
  width: 170px;
  height: 170px;
  margin-bottom: 50px;
  margin-right: 50px;
  border-radius: 10%;
}

.con-text {
  float: left;
}
.con-text span {
  color: orange;
}
.con-text h1 {
  border-bottom: solid;
  border-width: 2px;
  margin-bottom: 50px;
}
.con-text p {
  font-size: 1.2em;
}
.clearfix {
  clear: both;
}
.content1.content2 {
  margin-bottom: 50px;
}


처음에는 Home의 메인사진처럼 둥글게 사진을 배치했었는데 보다보니 이상해서 border-radius: 10%;로 변경했다

이 페이지들이 정말 시간이 오래걸렸다

자기소개 페이지 #2 에서도 설명했지만 float 사용에서 정말 많이 해멨다

모르는건 역시 남한테 물어봐서 해결해야 한다(구글 검색 최고👍)



2.3 Want

      <div class="container">
        <div class="want-m-img">
          <img class="want-img" src="img/backend.png" alt="">
          <img class="want-img" src="img/database.png" alt="">
        </div>
        <div class="want-text">
          <h1><span>Backend-developer</span></h1>
          <p>웹사이트의 <span>서버</span>를 관리하고 개발 업무를 담당하며, <span>DB</span> 관리를 하고 싶어요 !<br><br>이 웹페이지가 성공적인 첫걸음이길 바라봅니다 👍</p>
        </div>
      </div>
    <!-- //container -->
  </body>
</html>
.want-m-img {
  text-align: center;
  background-color: white;
  margin-right: 250px;
  margin-bottom: 50px;
}
.want-img {
  width: 300px;
}
.want-img:first-child {
  margin-right: 200px;
}
.want-text h1 {
  margin-bottom: 50px;
}
.want-text p {
  font-size: 1.2em;
}
.want-text span {
  color: orange;
}

다시 봐도 마지막 페이지라 그런지 정말 대충 마무리했다

class를 줄 때 고민을 했는데 이전 페이지들과 겹치는게 있으면 동일한 클래스명을 주고 사용하려 했으나 하나하나 찾아서 따로 하는 것이 더 복잡할 것 같아서 새로 이름을 주고 다시 입력을 했다



3. 마무리

이렇게 자기소개 페이지 코드를 모두 작성해보았다

아직 페이지를 배포하지 않아서 깃허브로 페이지를 배포한 후에 자기소개페이지 시리즈를 마무리하고 총평하면서 끝내겠다 !

[Node.js] 파일 Read
Scope와 Hoisting

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage