HTML + CSS 자기소개 페이지 소스 리뷰

bungouk6829·2020년 3월 30일
0

HTML , CSS

목록 보기
10/12

wecode 8기 사전스터디 1주차가 진행되면서
목요일에 간단하게 자기소개 페이지의 layout을 구성 해보았다.
어떻게 구성해볼까 생각하다 도저히 생각이 나질 않아 무료템플릿사이트의 포트폴리오 템플릿을 따라해보았다 .

템플릿 디자인 사이트 바로가기

그리하여 목요일날 layout을 저 템플릿페이지와 똑같이 구성하였다.
모바일 버전과 pc 버전이 따로 있어 미디어쿼리와 flexible box를 사용해 layout을 모바일과 pc에 맞게 따로 구성해보았다.

*모바일버전 layout

*pc 버전 layout

초록색 : introduce 구역 (#header / .sub_header / .introduce_section)
노란색 : name 구역 (.name)
회색 : menu 구역 (.pc_menu / .mobile_toggle_menu)
보라색 : profile image 구역 (.main_image_section / #header)
하늘색 : about me 구역 (#aboutme_section)
빨간색 : photos 구역 (#photo_section)
주황색 : footer 구역 (#footer)

목요일에 이렇게 두가지의 layout을 구성하여 금요일엔 코드를 작성해보았다.
주말에 할 일이 있어 빠르게 만드느라 클래스 작명도 대충 했고 쓸모없는 클래스가 몇개 있다 ..
다음부턴 좀 더 신중히 해야겠다.

HTML 코드 리뷰

* main.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" conetent="width-device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="static/css/reset.css">
  <link rel="stylesheet" href="static/css/main.css">
  <link rel="stylesheet" href="static/css/bootstrap/css/bootstrap.css">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
  <title>Introduce Kim</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $('.mobile_toggle_menu').click(function(){
        $('.mobile_toggle_menu_fade').fadeIn(700);
    });
    $('.toggle_close').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
    });
    $('.aboutme_anchor').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
      var offset = $('#aboutme_section').offset();
      $('html').animate({scrollTop : offset.top}, 400);
    });

    $('.photo_anchor').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
      var offset = $('#photo_section').offset();
      $('html').animate({scrollTop : offset.top}, 400);
    });

    $('.footer_anchor').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
      var offset = $('#footer_section').offset();
      $('html').animate({scrollTop : offset.top}, 400);
    });
  });
  </script>
</head>
<body>
<div class="wrap">
  <header id="header_section">
    <div class="sub_header">
    <div class="menu">
      <div class="name">
        <h1>Byeonguk Kim</h1>
      </div>
      <nav class="pc_menu">
        <ul>
          <li><a class="aboutme_anchor">About me</a></li>
          <li><a class="photo_anchor">Photos</a></li>
          <li><a class="footer_anchor">Contact & Github</a></li>
        </ul>
      </nav>
      <div class="mobile_toggle_menu">
        <span class="menu_icon"><a><img class="mobile_toggle_menu"src="static/resource/menu_icon.png"></a></span>
      </div>
      <div class="mobile_toggle_menu_fade">
        <span class="toggle_close"><a><img src="static/resource/close_icon.svg"></a></span>
        <ul>
          <li><a class="aboutme_anchor">About me</a></li>
          <li><a class="photo_anchor">Photos</a></li>
          <li><a class="footer_anchor">Contact & Github</a></li>
        </ul>
      </div>
    </div>
    <div class="introduce_section">
      <h1>Hello, I'm</h1>
      <h1>Byeonguk Kim</h1>
      <h1>wecode 8기 / 김병욱</h1>
    </div>
    </div>
    <div class="main_image_section">
      <img src="static/resource/profile.jpg">
    </div>
  </header>
  <section id="aboutme_section">
    <h1>About Me</h1>
    <div class="sub_aboutme">
    <p>안녕하세요! wecode 8기 김병욱 입니다. 반갑습니다! 올해 27 이구요, 경기도 안산을 살고 있답니다!
      저는 어렸을 적 부터 프로그래밍에 관심이 많았습니다.
    관심만 많았을 뿐이지 코딩은 성인이 되서 접했습니다! 강원대학교에서 안경광학을 공부하다가 빅데이터와
  웹에 관심이 생겨 중퇴하고 일하면서 학원도 다니고 독학도 조금이나마 공부 하였습니다. 아는 게임통계업체 대표님이
   여러 사람들과 같이 스터디그룹이나 프로젝트를 진행하면 좋다는 조언을 들어 여러 부트캠프를 알아보다 위코드에
 오게 되었습니다. 여러가지로 부족한 저 이지만 잘 배우고 잘 알아듣는 스타일이라 열심히 따라가겠습니다!
<br><br>
 또한 저는 노는걸 좋아해 캠핑, 골프, 스노우보드, 자전거 등 취미가 아주 많습니다! 놀때 불러만 주시면
 열심히 아주 잘 놀아요!
</p>
</div>
  </section>
  <section id="photo_section">
    <h1>Photos</h1>
    <img src="static/resource/busan2.jpg">
    <img src="static/resource/paris1.jpg">
    <img src="static/resource/paris2.jpg">
    <img src="static/resource/snow3.jpg">
    <img src="static/resource/snow4.jpg">
  </section>
  <footer id="footer_section">
    <h1>Contact & Github</h1>
    <div class="discription">
      <p>김병욱</p>
      <p>Byeonguk Kim</p>
      <p>Email - bungouk6829@gmail.com</p>
    </div>
    <nav class="sns_menu">
      <span><a href="https://www.instagram.com/2272buk/" target="_self">
        <img src="static/resource/instagram_icon.png"></a></span>
      <span><a href="https://github.com/bungouk6829/web" target="_self">
        <img src="static/resource/github_icon.svg"></a></span>
    </nav>
  </footer>
</div>
</body>
</html>

css는 import 방식을 썼고, meta 태그의 viewport는 모바일기기를 위하여 작성하였다.
.pc_menu와 .mobile_toggle_menu 의 <li><a> 태그에 클래스를 준 이유는 자바스크립트 제이쿼리의 animate 함수를 사용하기 위하여 .anchor 라는 클래스를 주었다.
항상 생각하는거지만 변수명이나 클래스명이나 무엇이든 작명이 진짜 어려운것 같다.
#header 하위에 .sub_header 클래스를 기술한 이유는 pc버전 layout 에서 profile image 구역과 introduce 구역을 나누기 위함이었다.
#aboutme_section 하위에 .sub_aboutme 를 기술한 이유는 자기소개글<p>에만 따로 css 를 적용하기 위함이었다.
마지막에 footer 엔 sns 아이콘으로 바로가기를 생성해주었다.

Javascript 코드 리뷰

2주차 미니프로젝트때 자바스크립트를 기술하여 자기소개 페이지를 업데이트하려고 했는데,
반응형으로 자기소개를 만드느라 부득이하게 메뉴 버튼 때문에 자바스크립트를 사용하게되었다.
자바스크립트로 제이쿼리를 사용하였다.

* script 

$(document).ready(function(){
    $('.mobile_toggle_menu').click(function(){
        $('.mobile_toggle_menu_fade').fadeIn(700);
    });
    $('.toggle_close').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
    });
    $('.aboutme_anchor').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
      var offset = $('#aboutme_section').offset();
      $('html').animate({scrollTop : offset.top}, 400);
    });

    $('.photo_anchor').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
      var offset = $('#photo_section').offset();
      $('html').animate({scrollTop : offset.top}, 400);
    });

    $('.footer_anchor').click(function(){
      $('.mobile_toggle_menu_fade').fadeOut(700);
      var offset = $('#footer_section').offset();
      $('html').animate({scrollTop : offset.top}, 400);
    });
  });
  </script>

.mobile_toggle_menu 를 클릭하면 메뉴 목록이 fadeIn이 되게,
.toogle_close 를 클릭하면 메뉴 목록이 fadeOut이 되게,
메뉴 목록을 클릭하면 지정한 위치로 scroll이 되며 메뉴 목록이 fadeOut이 되게 지정하였다.

CSS 코드 리뷰

css는 두가지 파일을 만들었는데, 하나는 reset.css 로 모든 태그들의 기본 margin 이나 padding, text-decoration 등등.. 을 초기화 하려고 만들었다.

* reset.css 

@charset "UTF-8";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,del,em,img,ins,kbd,q,samp,small,strong,sub,sup,
var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,
figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,
video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

 body{
  font-family: 'Gothic A1', ;
  background: url(images/s_images/body_bg.png);
  line-height: 1;
 }

 article,aside,figcaption,figure,footer,header,hgroup,menu,nav,section{
   display: block;
 }

 nav ul,li{
   list-style:none;
 }

 a{
   margin:0;
   padding:0;
   font-size: 100%;
   text-decoration: none;
   vertical-align: baseline;
   color:#fff;
   background: transparent;
 }

 img{
   vertical-align: top;
 }

 table{
   border-collapse: collapse;
   border-spacing: 0;
 }

 input{
   margin:0;
   padding: 0;
   box-sizing: content-box;
   vertical-align: top;
   appearance:none;
   border:1px solid #e65d5d;
   color:#e65d5d;
   border-radius: 0;
   font-family: font-family: 'Nanum Gothic', sans-serif;
 }

 input::-moz-input-placeholder{
   color:#e65d5d;
 }

 input::-webkit-input-placeholder{
   color:#e65d5d;
 }

이렇게 먼저 reset.css를 작성 후, main.html의 css인 main.css를 작성하였다.

* main.css

@charset "UTF-8";

body{
  font-family: 'Noto Sans KR', sans-serif;
}

.wrap{
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.mobile_toggle_menu_fade{
  display: none;
  width: 100%;
  height: 1000%;
  color:white;
  background: #084f57;
  position: fixed;
  text-align: center;
  font-size: 50px;
  padding-top: 200px;
  line-height: 200px;
}

.mobile_toggle_menu_fade li{
  cursor: pointer;
}

.toggle_close img{
  margin-left: 80%;
  width: 70px;
  height: 70px;
}

.pc_menu{
  display: none;
}

#header_section{
  order:1;
  display: flex;
  flex-direction: column;
  background:#084f57;
  width: 100%;
}

.menu{
  order:1;
  width: 100%;
  height: 100px;
  justify-content: space-between;
  display: flex;
  line-height: 100px;
}


.name{
  order:1;
  margin-left: 20px;
}

.name h1{
  color: #dbd10d;
  font-size: 50px;
}

.mobile_toggle_menu{
  order:2;
  width:80px;
  height:80px;
  margin-right: 30px;
  margin-top:3px;
}

.mobile_toggle_menu a{
  cursor: pointer;
}
.introduce_section{
  order:2;
  padding: 70px;
}

.introduce_section h1:nth-child(1){
  color:#dbd10d;
  font-size: 90px;
}

.introduce_section h1:nth-child(2){
  color:white;
  font-size: 100px;
  margin-top: 15px;
  line-height: 130px;
}

.introduce_section h1:nth-child(3){
  color:white;
  font-size: 30px;
  margin-top: 90px;
  font-weight: lighter;
}


.main_image_section{
  order:3;
}

.main_image_section img{
  width: 100%;
  height: 1200px;
  max-width: 100%;
}


#aboutme_section{
  order:2;
  text-align: center;
  background: #e8e8e8;
}

#aboutme_section h1{
  color:#084f57;
  font-size: 70px;
  margin-top: 100px;
}

#aboutme_section p{
  padding: 50px;
  line-height:60px;
  color:black;
  font-size: 40px;
  margin-top: 80px;
  font-family: 'Nanum Gothic Coding', monospace;
}

#photo_section{
  order:4;
  margin-left:auto;
  margin-right: auto;
  color:#084f57;
  font-size: 70px;
  margin-top: 100px;
  text-align: center;
}

#photo_section img{
  margin:50px;
  max-width: 100%;
  width: 700px;
  height: 900px;
  border-radius: 10px;
  box-shadow: 3px 3px 3px 3px #c8c8c8;
}

#footer_section{
  order:5;
  color:white;
  font-size: 70px;
  text-align: center;
  background: #084f57;
  height: 550px;
}

#footer_section h1{
  margin-top: 50px;
}

.discription {
  margin-top: 50px;
  font-size: 40px;
  line-height: 60px;
}

.sns_menu img{
  margin-top: 50px;
  margin-left: 10px;
  margin-right: 15px;
  cursor: pointer;
  width: 160px;
  height: 120px;
}

@media all and (min-width:1024px) {
  .mobile_toggle_menu{
    display: none;
  }
  #header_section{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 1000px;
  }
  .sub_header{
    order:1;
    width: 50%;
    display: flex;
    flex-direction: column;
  }
  .menu{
    display: flex;
    flex-direction: column;
  }
  .name{
    order:1;
    height: 50px;
  }
  .name h1{
    font-size: 30px;
  }
  .pc_menu{
    order:2;
    display: inline-block;
    color:white;
    margin-top: 50px;
  }
  .pc_menu li{
    display: inline;
    font-size: 15px;
    margin-left: 20px;
    cursor: pointer;
  }
  .main_image_section{
    order:2;
    width: 50%;
    max-width: 100%;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main_image_section img{
    width: 500px;
    height: 600px;
    border-radius: 8px;
  }
  .introduce_section{
    order:3;
    margin-top: 200px;
  }
  .introduce_section h1:nth-child(1){
    font-size: 35px;
  }
  .introduce_section h1:nth-child(2){
    font-size: 80px;
    line-height: 100px;
  }
  .introduce_section h1:nth-child(3){
    font-size: 15px;
  }
  #aboutme_section{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #aboutme_section h1{
    font-size: 50px;
  }
  #aboutme_section p{
    font-size: 20px;
    line-height: 30px;
  }
  .sub_aboutme{
    width: 60%;
  }
  #photo_section h1{
    font-size: 50px;
  }
  #photo_section img{
    width: 400px;
    height: 500px;
  }
  #footer_section h1{
    font-size: 50px;
  }
  .discription{
    font-size: 20px;
  }
  .sns_menu img{
    width: 100px;
    height: 70px;
  }
}

모든 layout은 flexible box로 구성하였고, 이중으로 felxible box를 사용한 것도 많다. 미디어쿼리를 이용하여 모바일과 pc의 layout이 다르게 구성되게 작성하였다.

후기

항상 코딩할때 느끼는 건데, 작명이 제일 어려운것 같다. 자기소개를 할 것이 별로 없어 잠시 현타도 왔었다 ㅋㅋ... 주말에 할 일이 있어 집 앞 카페에서 빠르게 코딩하느라 쓸모없는 클래스나 css속성이 많았다. 다음부턴 신중해야겠다.

profile
개발스터디

0개의 댓글