[review] html,css 자기소개 페이지 간단 리뷰

wecode 8기 사전스터디 시작!
1주차 과제- html,css를 이용하여 자기소개 페이지 제작하기
자기소개페이지: https://github.com/misun9283/mypage

처음부터 끝까지 혼자 구상해서 만드려고하니까 너무 막막했지만 우여곡절 끝에 완성했다.(아직 좀 더 수정이 필요해보이긴 하지만ㅜㅜ)

이 중에서 몇 가지만 리뷰를 하려한다.

css typing 효과

제목에 타이핑 효과를 주고 싶어 인터넷에 찾아보면서 코드를 작성했지만 아직 완전하지 못한 것 같다.
css의 animation을 이용해서 타이핑 효과를 만들었다.

  .header .slider .intro h2 {
    margin:  auto;
    font-size: 50px;
    text-shadow: 5px 5px 5px #acc2c5;
    width: 100px;
    padding: 5px 0;
    
    font:500 50px consolas; 
    font-family: fantasy;   
    width:50ch;
    white-space: nowrap;
    overflow: auto;
    animation:type 4s steps(20) infinite;
    }
 
      
    @keyframes type
    {
      from {
        width: 0
      }
      to {
        width: 4em;
      }
    }
    .header .slider .intro h3 {
      margin: 0 10px;
      text-shadow: 5px 5px 5px #acc2c5;
      width: 100px;
      padding: 5px 20px;
      font: 500 50px consolas;    
      width:50ch;
      white-space: nowrap;
      overflow:hidden;
      animation:type 4s steps(20) infinite;
      }

      @keyframes type
      {
        0%{ width:0; } 
      }

아이콘 링크

폰트어썸이라는 곳에서 무료로 아이콘들을 다운받아 페이지 하단에 링크를 만들었다.
링크 다는 방법은 html< a >태그 글 참조!

(html 코드)

<!-- Start Fototer -->
 <div class="footer">
   
   <div class="container">
     <div class="footer-folat">
       
     <ul>
       <li><a href="#header"><i class="fa fa-chevron-circle-up fa-2x"></a></i></li>
       <li><a href="https:///www.instagram.com/happy__leia/"><i class="fa fa-instagram fa-2x"></i></a></li>
       <li><a href="https://github.com/misun9283"><i class="fa fa-github fa-2x" name="github"></i></a></li>
       <li><a href="mailto:misun9283@gmail.com" title="My E-mail"><i class="fa fa-envelope fa-2x"></i></a></li>
       <li><a href="https://velog.io/@misun9283"><i class="fa fa-vine fa-2x"></i></a></li>
     </ul>
     </div>
 </div>
 <!-- End Fototer -->

타임라인

ul과 li태그를 사용하여 기본으로 css에서 before과 after 가상선택자를 이용하여 타임라인을 만들었다.

(HTML)

<ul class="timeline">

      <!-- Item 1 -->
      <li>
        <div class="direction-r">
          <div class="flag-wrapper">
            <span class="flag">wecode</span>
            <span class="time-wrapper"><span class="time">2020.03 - 2020.07</span></span>
          </div>
          <div class="desc">To be great web developer!</div>
        </div>
      </li>
      
      <!-- Item 2 -->
      <li>
        <div class="direction-l">
          <div class="flag-wrapper">
            <span class="flag">Bokwang Group</span>
            <span class="time-wrapper"><span class="time">2017.01 - 2020.03</span></span>
          </div>
          <div class="desc">My first employer. I had worked as professional secretary in chairman's office.</div>
        </div>
      </li>
    
      <!-- Item 3 -->
      <li>
        <div class="direction-r">
          <div class="flag-wrapper">
            <span class="flag">Seoul Women's University</span>
            <span class="time-wrapper"><span class="time">2011 - 2016</span></span>
          </div>
          <div class="desc">I majored in Mathematics</div>
        </div>
      </li>
    </ul>

(CSS)

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(66, 200, 209);
  z-index: 10;
}


.direction-l .flag:after,
.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  line-height: 1em;
  font-size: 0.66666em;
  color: rgba(34, 113, 165, 0.74);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

media queary

기본은 pc사이즈로 하고 미디어 쿼리를 사용하여 모바일 사이즈를 만들었다.

@media (max-width: 1024px) {
    *{
      box-sizing: border-box;
    }
    .header {
      width: 100%;
      margin: 0;
      
      
    }