CV 페이지를 만들어보았다 [1부]

오래 전부터 필자는 자신만의 CV 페이지를 갖고 싶어했다. 정작 남들 앞에 내세울 경력도 실력도 없는 필자이지만, 아무튼 개발자를 지망하는 이들이라면 누구나 그러한 생각을 해 보았을 것이다. 미려한 디자인의 CV부터 밋밋하지만 실속 있는 CV까지, 이미 많은 개발자들이 자신만의 개성이 담긴 CV 페이지를 가지고 있다.

무릇 개발자라면 CV 페이지 쯤은 직접 만들어야 마땅한 것이다. 한 줌도 채 안 되는 html 지식을 가진 필자는 이번 기회에 html/css에 더욱 친숙해지기 위해 바닥부터 직접 시작해보기로 했다. 레이아웃의 기본 틀은 여기에서 도움을 받았다.

---

우선 코드 작성에 앞서 CV 페이지의 UI 디자인을 간단히 해 보기로 했다.

깔끔하면서도 너무 밋밋하지 않은 디자인을 원했다. 주요 색상은 Material Design Palette의 Pink 색상을 사용하였다.

<style>

header {height: 96px;}  /* 상단 여백 */

article {
  position: absolute; left: 50%;
  width: 480px; height: 256px;
  padding-left: 16px; padding-right: 16px;
  padding-top: 32px; padding-bottom: 16px;
}

wpink {
  position: absolute; right: 50%; transform: translateX(-32px);
  width: 352px; height: 256px;
  background: #F48FB1;
  padding-left: 32px; padding-right: 16px;
  padding-top: 24px; padding-bottom: 16px;
}

</style>

absolute relative static 설명

https://velog.io/@rimu/css-요소의-위치position-정리

<style>

@font-face{
    font-family: 'KintexL'; /* 고양일산체 L */
    src: url('./fonts/KintexL/GoyangIlsan_L.woff2') format(‘woff2’), 
         url('./fonts/KintexL/GoyangIlsan_L.ttf') format('truetype'),
         url('./fonts/KintexL/GoyangIlsan_L.woff') format(‘woff’),
         url('./fonts/KintexR/GoyangIlsan_L.eot?#iefix') format('embedded-opentype');
}
@font-face{
    font-family: 'KintexR'; /* 고양일산체 R */
    src: url('./fonts/KintexR/GoyangIlsanR-Regular.woff2') format(‘woff2’),
         url('./fonts/KintexR/GoyangIlsanR-Regular.ttf') format('truetype'),
         url('./fonts/KintexR/GoyangIlsanR-Regular.woff') format(‘woff’), 
         url('./fonts/KintexR/GoyangIlsanR-Regular.eot?#iefix') format('embedded-opentype');
}

body {
  font-family: 'KintexL', 'KintexR', Arial, Helvetica, sans-serif;  /* 고양일산체 적용 */
  background-color: #FCE4EC;
}

</style>

WOFF(World Open Font Format)란 웹 상에서 가장 보편적으로 사용되는 폰트 포맷이다. Chrome이나 Safari 등 주요 브라우저에서 지원하며, 사실상의 표준으로 자리잡았다. 자세한 내용은 위키백과나 다른 블로그에서 찾을 수 있다.

고양일산체는 웹과 모바일을 포함한 다양한 매체에 자유롭게 사용이 가능한 폰트이다. 필자가 개인적으로 좋아하는 폰트라서 이번 CV 페이지 작업에 사용하기로 하였다. 고양일산체는 공식적으로는 WOFF 파일을 제공하지 않기 때문에 파일 변환 과정을 거쳐 사용하게 되었다. 그런데 문제가 하나 있었다. 어째서인지 Chrome 브라우저에서는 변경한 폰트가 적용되지 않는 것이었다. 반면 Safari 브라우저에서는 변경한 폰트가 정상적으로 적용되었다. 아직 그 이유를 찾아내지는 못 했으나 만약 해결하게 된다면 새로운 포스트에 해결 방법을 적어두도록 하겠다.

<style>

btn_github {
  position: absolute; top: 388px; right: 50%;
  transform: translateX(-288px);
  width: 96px; height: 96px;
  background: #e91e63;
  padding: 16px;
  display: block;
} /* 버튼 영역 */

btn_github > img {
  position: absolute;
  width: 100%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
} /* 버튼 내 아이콘 이미지 */

btn_github > span {
  position: absolute; top: 120%; left: 50%;
  width: 96px; height: 24px;
  transform: translate(-50%, -50%);
  text-align: center;
} /* 버튼 아래 글씨 */

</style>

translate 설명

2부에서 계속