새해, 새 직업? 그리드 구동 이력서를 만들자!

많은 인기있는 이력서 디자인은 그리드 모양으로 섹션을 배치하여 사용 가능한 페이지 공간을 최대한 활용하고 있습니다. CSS 그리드를 사용하여 인쇄 할 때 와 다른 화면 크기로 멋지게 보이는 레이아웃을 만들어 봅시다. 이렇게하면 새해에 유용 할 수있는 이력서 온라인 및 오프라인 이력서를 사용할 수 있습니다!

먼저 이력서 컨테이너와 이력서 섹션을 만듭니다.

 
   섹션>
   섹션>
   섹션>
   섹션>
   섹션>
   섹션>
   섹션>

그리드 사용을 시작하려면 외부 이력서 요소에 디스플레이 : 그리드를 추가합니다. 다음으로, 우리는 그리드에 사물을 어떻게 배치 해야하는지 설명합니다. 이 경우 두 개의 열과 4 개의 행을 지정합니다.

우리는 CSS Grid의 FR 장치를 사용하여 제공 할 공간에 얼마나 많은 분수를 지정하고 있습니다. 우리는 행에 동등한 공간 (각각 1fr)을 제공하고 첫 번째 열을 두 번째 (2FR)보다 두 배 더 넓게 만듭니다.

 .재개하다 {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 2fr 1fr;
  그리드-템플릿 열 : 1FR 1FR 1FR 1FR;
}

다음으로 그리드 테일 플레이트 영역 속성을 사용하여 이러한 요소를 그리드에 어떻게 배치 해야하는지 설명합니다. 먼저 각 섹션에 대해 명명 된 그리드 지역을 정의해야합니다. 이름을 사용할 수 있지만 여기서는 섹션과 동일한 이름을 사용합니다.

 .이름 {
  그리드 영역 : 이름;
}

.사진 {
  그리드 영역 : 사진;
}

/ * 모든 섹션의 그리드 지역 정의 */

이제 재미있는 부분이 있고 디자인을 바꾸는 것을 산들 바람으로 만듭니다. 그리드-템플릿 영역에 그리드 영역을 배치하여 배치하기를 원하는 방법. 예를 들어, 여기에서는 그리드 테마 플레이트 지역의 왼쪽 상단에 이름 섹션을 추가하여 이력서의 왼쪽 상단에 이름을 배치합니다. 우리의 작업 섹션에는 많은 콘텐츠가 있으므로 두 번 추가하므로 그리드 셀 중 두 개에 뻗어 있습니다.

 .재개하다 {
  그리드-템플릿 영역 :
    "이름 사진"
    "일"
    "직장 교육"
    "커뮤니티 기술";
}

우리가 지금까지 가지고있는 것은 다음과 같습니다.

CSS 그리드 사양은 그리드에 물건을 크기 르며 으르렁 거리는 속성뿐만 아니라 몇 가지 유용한 속성을 제공합니다. 우리는 가능한 한 가지 방법을 보여 줌으로써이 예에서 단순한 것을 유지하고 있습니다. 프로젝트에 CSS 그리드를 통합하는 가장 좋은 방법을 배우려면 훌륭한 리소스를 확인하십시오.

레이아웃 조정

그리드 테마 플레이트 영역을 사용하면 레이아웃을 쉽게 변경할 수 있습니다. 예를 들어, 고용주가 교육보다 기술 섹션에 더 관심이 있다고 생각되면 그리드 테일 플레이트 영역에서 이름을 전환 할 수 있으며 다른 변경 사항없이 레이아웃의 장소를 교체 할 수 있습니다.

 .재개하다 {
  그리드-템플릿 영역 :
    "이름 사진"
    "일"
    "업무 기술" / * 기술은 이제 교육 위로 이동 * /
    "지역 사회 교육";
} 

최소한의 CSS 변경으로 얇은 기둥이 왼쪽에있는 인기있는 이력서 디자인을 달성 할 수 있습니다. 그것은 그리드에 대한 좋은 점 중 하나입니다. 우리는 이름이 지정된 그리드 영역을 재정렬하여 소스 순서를 정확히 어디에 두면서 물건을 이동할 수 있습니다!

 .재개하다 {
  그리드-템플릿-컬럼 : 1FR 2FR;
  그리드-템플릿 영역 :
    "사진 교육"
    "이름 작업"
    "일에 대해"
    "기술 커뮤니티";
} 

구분 열

아마도 당신은 믹스에 대한 개인적 참조를 추가하고 싶을 것입니다. 그리드 템플릿에 세 번째 열을 추가하고 하단 행에 미끄러 뜨릴 수 있습니다. 또한 열 단위를 동일한 분수로 변경 한 다음 템플릿 영역을 업데이트하여 특정 요소가 레이아웃을 제자리에 유지하기 위해 두 개의 열에 걸쳐 있어야합니다.

 .재개하다 {
  그리드-템플릿-컬럼 : 1FR 1FR 1FR;
  그리드-템플릿 영역 :
    "이름 이름 사진"
    "일하는 일"
    "작업 교육"
    "커뮤니티 참조 기술";
} 

섹션 간의 간격은 그리드 갭 속성으로 제어 할 수 있습니다.

반응성으로 만듭니다

모바일 장치와 같은 작은 화면의 경우 이력서 섹션을 단일 전체 폭을 표시 할 수 있습니다.

 그리드-템플릿-컬럼 : 1fr;
그리드-템플릿 영역 :
  "사진"
  "이름"
  "에 대한"
  "일하다"
  "교육"
  "기술"
  "지역 사회"
  "참조"
}

그런 다음 미디어 쿼리를 사용하여 더 넓은 화면의 레이아웃을 변경할 수 있습니다.

 @Media (min-width : 1200px) {
  .재개하다 {
    그리드-템플릿 영역 :
      "이름 사진"
      "일"
      "직장 교육"
      "커뮤니티 기술";
  }
}

사이에 추가 중단 점을 추가 할 수 있습니다. 예를 들어, 태블릿과 같은 중간 화면에서는 단일 열의 모든 것을 원하지만 개인 및 이미지 섹션은 상단에 나란히 앉을 수 있습니다.

 @Media (min-width : 900px) {
  .재개하다 {
      그리드-템플릿-컬럼 : 2fr 1fr;
      그리드-템플릿 영역 :
        "이름 사진"
        "소개"
        "일 작업"
        "교육 교육"
        "기술 기술"
        "커뮤니티 커뮤니티"
        "참조 참조"
  }
}

단일 페이지 인쇄 계획

이력서가 단일 물리 종이에 잘 인쇄하기를 원한다면 명심해야 할 몇 가지 사항이 있습니다. 가장 어려운 과제는 종종 한 페이지에 맞게 단어 수를 줄이는 것입니다.

글꼴 크기를 줄이면 더 많은 정보를 읽기가 어려울 수 있으므로 더 많은 정보를 짜십시오. 한 가지 요령은 개발하는 동안 이력서 요소에 임시 크기 제약을 추가하는 것입니다.

 .재개하다 {
  / * 개발 전용 */
  너비 : 210mm;
  높이 : 297mm;
  국경 : 1px 솔리드 블랙;
}

이 A4 종이 크기의 테두리를 만들면 크기가 너무 작거나 내용이 테두리에서 쏟아져 두 번째 페이지에 인쇄 될 수 있는지 확인하는 것이 더 명확합니다.

브라우저가 삽입 할 수있는 날짜 및 페이지 번호와 같은 물건을 숨기기 위해 인쇄 CSS를 제공 할 수 있습니다.

 @Media print {
  / * 화면 전용 스타일을 제거합니다. 예를 들어 링크 밑줄 */
}

@page {
  패딩 : 0;
  여백 : 0cm;
  크기 : A4 초상화;
}

한 가지 주목할 점은 다른 브라우저가 크기가 약간 변할 수있는 다른 글꼴로 이력서를 렌더링 할 수 있다는 것입니다. 매우 정확한 인쇄 이력서를 원한다면 다른 옵션은 PDF로 저장하고 사이트에 다운로드 링크를 제공하는 것입니다.

브라우저 지원

CSS 그리드는 최신 브라우저에서 좋은 지원을 제공합니다.

Internet Explorer (IE)는 접두사를 사용하여 이전 버전의 CSS 그리드 사양을 지원합니다. 예를 들어 Grid-Template-Columns는 -ms-grid-columns로 작성되었습니다. AutoPRefixer를 통해 코드를 실행하면 이러한 접두사를 추가하는 데 도움이 될 수 있지만 이전 사양에서는 일부 속성이 다르게 행동하고 일부는 존재하지 않기 때문에 수동 변경 및 철저한 테스트가 필요합니다. AutoPRefixer가 가능한 한 가능하게 작동하도록 구성하는 방법에 대한 Daniel Tonon의 기사를 확인하는 것이 좋습니다.

AutoPrefixer에 대한 대안적인 접근 방식은 플로트 레이아웃을 사용하여 폴백을 제공하는 것입니다. CSS 그리드 특성을 인식하지 못하는 브라우저는이 폴백을 사용하여 표시됩니다. IE를 지원 해야하는지 여부에 관계없이 CSS 그리드를 지원하지 않는 (잠재적으로 알려지지 않은) 브라우저가 여전히 콘텐츠를 표시 할 수있는 폴백이 합리적입니다.

온라인 이력서를 주최 할 준비가되지 않더라도 CSS 그리드와 함께 놀고, 다른 레이아웃을 탐색하고, 멋진 PDF를 생성하며, 동시에 CSS의 멋진 부분을 배우는 것은 여전히 ​​재미 있습니다.

행복한 일자리 사냥!

위 내용은 새해, 새 직업? 그리드 구동 이력서를 만들자!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!