[Github] 블로그 커스터마이징-3.2 포토폴리오 스킬 추가

수정 목표

portfolio에 필자가 다룰 수 있는 Tool을 노션에 작성한 서식 그대로 추가 하고자 했습니다. 처음부터 테이블을 만들면 시간이 많이 소요 되니 노션에서 서식을 작성 하고 HTML으로 내보내기를 하여 나온 코드를 수정하여 사용 하기로 했습니다.

PC

모바일

구조 분석

_layouts/portfolio.html → 노션에서 내보내기한 HTML 코드를 맨 밑에 추가 합니다.

---

코드 수정

_layouts/portfolio.html

프로젝트 나타내는 코드 아래 노션에서 내보내기 했던 코드를 붙여 넣기 해줍니다. 노션에서 내보내기 했을 때 각 div 별로 id 값이 있었는데 해당 값을 전부 지우고 사용했습니다. 또한 column-list div만 만들어 져있어서 모바일까지 고려하여 skillbox div을 추가로 생성 했습니다.

<!--skill block -->  
  <h2 class="block-color-blue_background">👨‍💻
    <strong>SKILLS</strong>
  </h2>
  <hr/>
  <div class="column-list">
    <div class = "skillbox">
      <div class="column-image">
        <figure class="image">
            <img src="/assets/img/icon/notion-logo-no-background.png" alt="Notion Logo" />
        </figure>
        <p class="skill-name"><strong>Notion</strong></p>
      </div>
      <div class="column">
        <p class="">
          산출물 및 프젝트 자료 관리<br>
          회의록 관리, 업무 자료을 유연하게 관리하고 공유합니다. 
        </p>
      </div>
    </div>

_sass/layouts/archives.scss

css 파일도 수정해 줍니다. skillbox div을 추가해준 이유가 여기 있습니다.

column-list가 display: flex로 설정 하게 되면 그 안에 있는 모든 div 값이 수평 정렬 되기 때문에 이미지 설명 이 추가 되면 한 줄로 보여지게 됩니다. 해서 skillbox div을 만들고 너비를 50%, display: flex 설정을 하여 column-list 안에 2개의 skillbox 가있게 만들고 column-list을 반복적으로 만들어 스킬 추가할 수 있습니다. 모바일 화면에선 media 쿼리를 사용 해서 skillbox 너비를 100%로 변경하고 수직으로 나타내면 됩니다.

li 태그가 연혁의 회색을 생성하여 해당 태그 안에 넣고 글자 크기나 자간 등 수정하였습니다.

/* #archives */
.column-list {
	display: flex;

}
.skillbox {
	display: flex;
  width: 50%;

}
.column-image {
  width: 20%;
}
.column-image {
	padding: 0 1em;
}
.skill-name{
  text-align: center;
  font-size: 0.8rem;
}
.column{
  width:80%
}



@media all and (max-width: 576px) {
  #archives {
    .summary {
      margin-left: 5rem;
      font-size: 0.85rem;
      line-height: 1.2; /* 줄 간격을 1.2배로 설정 */
    }
    letter-spacing: 0.03rem;
    ul {
      li {
        font-size: 1rem; 
        height: 50px;
      &::before {
        height: 72px;
        left: 60px;
        bottom: 16px;
        }
      }
    }
  
    .year{
      height: 3.0rem;
      font-size: 1.0rem;
      left: 2px;
      &:first-child::before {
        height: 38px;
        top: 10px;
        left: 62px;
      }
      &::before {
        height: 63px;
        left: 62px;
        bottom: 16px;
      }
    }
    .date {
      white-space: nowrap;
      display: inline-block;
      position: relative;
      right: 0.5rem;
  
      &.month {
        width: 1.0rem;
        text-align: center;
      }
  
      &.day {
        font-size: 75%;
      }
    }
    a {
      margin-left: 1.5rem;
      &::before {
        // width: 8px;
        // height: 8px;
        float: left;
        top: 1.35rem;
        left: 54px;
      }
    }
  }

  .column-list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  // .skill-name{
  //   display: none;
  // }
  // .column-image {
  //   width: 30%;
  // }
  .column{
    width:80%
  }
  .skillbox {
    width: 100%;
  
  }

삽질 후기

html 코드 css 코드 변경하는데 많은 고심이 있었다. 똑같은 코드가 반복 되면 반복문을 써서 불필요 한 코드를 줄여 한다. 해당 부분을 다 만들고 난 뒤 코드를 보고 든 생각이다. 필자가 너무 유능한 나머지 작성해야 될 스킬이 100개 혹은 200개 된다고 했으면 바로 반복문으로 처리 했을 것이다. 그럼에도 만들고 난 뒤 코드를 보니 반복문으로 처리 했어야만 했다. 나중에 코드 리펙토링 해야겠다.