표준 워드프로세서는 스타일과 레이아웃의 세부 사항을 제어하는 데 HTML 및 CSS에 비해 중요하지 않습니다.저는 워드프로세서에서 이력서를 미세하게 조정하기가 어려워서 HTML과 CSS를 사용하여 이력서를 만들고 유지하기 시작했습니다.전반적으로 말하면, 나는 그것이 더 잘 일하는 것을 발견하지만, 과도를 시작하기 전에, 알아야 할 유용한 일이 있다.

입문

우선, 면책 성명: 본 안내서는 이력서 템플릿이나 스타일링 조언을 제공할 의사가 없습니다.반대로 이력서 인쇄 레이아웃을 HTML/CSS로 처리하는 과정을 상세하게 소개했습니다.여기에는 설정, 플롯 스타일 및 최종 PDF 내보내기가 포함됩니다.

와이어프레임

모형이나 와이어프레임에서 작업할 때 HTML과 CSS를 작성하는 것이 훨씬 쉽다.나는 Word에서 온 오래된 이력서를 기준으로 사용했지만, 예를 들어 Adobe XD나 Figma (Figma 심지어 기본적으로 인쇄 사이즈를 지원) 같은 무료 도구에서 쉽게 모의할 수 있다.
만약 당신이 과거 이력서의 내용을 준비했다면 (나처럼) 당신의 디자인을 몇 부분으로 나누어 잠시 후에 세부 사항을 추가할 수 있습니다.

이력서 와이어프레임 내장 Figma
템플릿이나 모델의 정확한 스타일을 따를 필요는 없지만 전체 레이아웃을 구성하는 데 사용할 수 있습니다.

캔버스 설정

이력서를 작성할 때 더욱 잘 가시화하기 위해서, 나는 이력서와 같은 비율의 HTML 용기를 만드는 것을 건의한다.이 컨테이너를 빈 페이지에 배치하면 일반적인 워드프로세서와 비슷한 보기를 얻을 수 있습니다.

실제로 우리는 CSS에서 물리적 측정 단위를 사용할 수 있기 때문에 mapping to pixels anyway 이 캔버스를 쉽게 설정할 수 있습니다.

.canvas-container {
  margin: 0 auto; /* for centering, feel free to use flexbox or some other method*/
  box-sizing: border-box;
  padding: 0.5in; /* controls margins */
  width: 8.5in;
  height: 11in;
  background-color: white;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}

다음은 누드 페이지의 효과(0.5x 또는 0.25x 배율을 사용하여 최상의 효과를 얻을 수 있음)입니다.
텍스트 프로세서의 기본 스타일과 유사한 캔버스 용기를 사용하여 전체 페이지에 기본 스타일을 설정합니다.기타 고려해야 할 좋은 속성은 line-height 과 글꼴 속성, 예를 들어 font-size 과 font-family 이다.

레이아웃 및 컨텐트

와이어프레임을 참고로 사용하여 캔버스 공간을 내용의 각 부분으로 나누는 방법을 그립니다.레이아웃이 더 복잡하면 Flexbox 및 Grid 등의 도구가 여기에 사용됩니다.
나의 설정은 상당히 간단하다. 나의 이력서의 모든 부분은 하나section 요소로 분해된다.컨텐트가 두 열을 넘을 때마다 메쉬를 사용하여 분할합니다.

.multicolumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

다음은 실제 상황입니다.
나의 이력서에서 나는 단지 두 부분의 다중 난간 구조, 즉 경험과 증서/기능만 필요로 한다.내용을 숨겼지만 다음은 현재 레이아웃에 있는 메쉬입니다.
grid 같은 도구를 사용하는 또 다른 장점은 유지보수성이다.나는 레이아웃의 나머지 부분을 파괴하지 않고 다른 작업 경험 실례를 쉽게 추가하고 격자를 자동으로 조정할 수 있다.

이 두 가지 실례에서 사용grid을 제외하고 다른 모든 내용은 normal flow를 잘 사용하여 구분할 수 있다.당신에게 가장 적합한 물건을 마음대로 사용하세요.

내보내기

대부분의 회사와 채용자들은 HTML 페이지를 유효한 이력서로 받아들이지 않는다.따라서 페이지를 PDF 형식으로 내보내야 합니다.브라우저는 Print 명령을 통해 쉽게 수행할 수 있지만 사전에 CSS를 조정해야 합니다.

플롯 스타일

우리는 print media query를 이용하여 우리가 내보낸 페이지를 설계할 것이다.브라우저에서 인쇄를 시도할 때 특정 스타일을 적용할 수 있습니다.
만약 당신이 나의 건의에 따라 용기에 모든 내용을 구축한다면, 이것은 간단한 과정일 것입니다.간단하게 보기 위해서, 나는 전체 html 요소의 너비와 높이를 용기의 인쇄 사이즈와 일치시킨다.여백을 삭제해야 할 수도 있습니다 (네모난 섀도우와!)body와 용기 사이의 요소에 대해 추가된 공간이 없으면 추가 페이지가 나타날 수 있습니다.

@media print {
  html {
    height: 11in;
    width: 8.5in;
    overflow: hidden;
  }

  body {
    margin: 0;
  }

  .canvas-container {
    width: 100%;
    box-shadow: none;
  }
}

PDF 생성

브라우저 스타일이 있으면 브라우저의 인쇄 대화 상자를 사용하여 페이지를 PDF로 저장할 수 있습니다.
Firefox를 좋아하지만 Blink의 인쇄 기능은 페이지를 정확하게 내보내는 데 더 좋습니다.마지막 출구에서 Chrome을 사용했습니다. 자세한 내용은 아래의 설명을 보십시오.
인쇄 대화 상자를 연 후 대상을 PDF로 저장으로 설정합니다.또한 최종 결과를 저장하기 전에 설정을 조정해야 합니다.추가 설정 옵션을 확장하고 다음을 선택합니다.

회색조

가 아닌 경우 색상 활성화

용지 크기를 원하는 크기로 설정합니다(이 안내서에서 알파벳을 사용했습니다)

여백은 없음

으로 설정해야 합니다.

배율을 100으로 설정해야 함

배경 그래픽 활성화

적절한 PDF 내보내기 설정이 있는 Chrome 인쇄 대화 상자의 예
페이지를 계속하고 저장합니다.이 기능이 있으면 실제 응용 프로그램에 사용할 수 있도록 유지보수하기 쉬운 HTML 이력서와 PDF 내보내기를 가지고 있어야 합니다.

결론

나는 이 안내서가 어떻게 HTML과 CSS로 이력서를 만드는지 유용한 출발점이 되기를 바란다.
만약 네가 나의 최종 결과가 무엇인지 알고 싶다면, 내가 현재 실현하고 있는 원본 코드는 사용할 수 있다here.
이 프로세스가 완료되었거나 HTML/CSS 인쇄 레이아웃을 처리하는 추가 메시지가 있으면 아래 설명에서 알려주십시오.
이 글은 처음에 my personal blog에 등장했는데 간결하게 보기 위해 여기에 약간의 수정을 했다.