안녕하세요, 저의 첫 번째 박문에 오신 것을 환영합니다.
멜버른에서 온 쿠퍼입니다. 최근에 새로운 일자리를 찾기 시작했기 때문에 새로운 투자조합 사이트를 다시 설계하고 구축할 때 지식을 공유해야 한다고 생각합니다.
그 중 하나는 내 사이트에 이력서를 작성하는 것이지만 A4 형식을 사용하면 잠재적인 채용 인원이나 고용주(진짜 복고적인 조직에 대한)가 PDF나 프린터로 저장하기 쉽다.
TL;DR 만약 당신이 code 환매 협의를 보고 싶거나 이미 발표된 사이트를 방문하고 싶다면here
나는 최근에 SASS를 조금 배웠기 때문에 그것을 사용했다. 끼워 넣는 스타일 자체가 기적을 창조했다. 매div를 분류해야 하는 것이 아니라 기적을 창조했기 때문에 SASS는 바로bae이다.💁🏼‍♀️.
일단 건설되면 날씬한 투자조합으로 옮겨서 자세히 소개하지는 않겠지만, 잠시 후 몇 시간 동안 걸려 넘어진 Gotcha에 대해 이야기하겠습니다.
우선, HTML 본문에 용기div (내 이름은 ResumeCanvas, 그러나 네가 필요로 하는 것) 을 만들고,SCS에서 우리의 걸작을 그리기 위해 캔버스를 만들어야 한다.

그럼 여기 무슨 일이 일어났어요?

상자 사이즈 - 테두리 상자 우리는 모든 물건이 선택한 사이즈 범위 내에 있는지 확인합니다.

여백 - 0으로 모든 컨텐트를 중심으로 자동으로 설정합니다.

충전재 - 경계선과 내부 사이에 0.3인치를 설치했는데, 예를 들어 0.5인치를 추가할 수 있지만, 나는 결국 그것을 줄였다. 왜냐하면 마지막에 나는 충분한 공간이 없기 때문이다.

너비와 높이 - 이런 것들이 모두 중요합니다. 제가 연구를 해서 A4용지의 너비와 높이를 얻었습니다(네, 약간의 차이가 있을 수 있지만 인쇄 속성을 설정할 때 중요하지 않습니다).

배경색 - 흰색이어야 합니다. 원하는 색을 선택할 수 있지만 인쇄할 때 고려해야 하기 때문에 어두운 패턴을 고려하지 마세요.

상자 그림자 - 웹 페이지에 아름다운 회색 윤곽을 제공하여 배경 페이지와 구별한다.

격자 주세요.

위대하다이 점에서 우리는 아주 좋은 작은 A4 크기의 페이지를 가지고 있는데, 지금 우리는 어떻게 그것을 기입합니까?
우리는 응답을 위해 설계된 것이 아니라 고정된 크기를 사용합니다. 격자는 완벽한 해결 방안이 필요합니다.
말해봐...
나는 집단의 한숨을 들었다고 생각한다
그래, 내 친구 걱정하지 마. 슈퍼스타가 하나 있으니까portfolio 우리를 위해grid template generator site를 만들었어.

위에서 보듯이 제목을 제 이름으로 선택했습니다. 왼쪽 판넬은 모든 내장을 표시하고, 오른쪽 판넬은 모든 링크를 표시합니다. (나중에 프로젝트 기간에 캔버스의 폭과 높이를 정리할 때 물건이 움직이는 것을 발견하면 설정된 픽셀 길이로 변경합니다.)하지만 당신이 프로젝트를 어떻게 기획하든지 간에 이것이 바로 당신이 해야 할 일입니다.
지금 그 버튼을 눌러주세요. 코드 버튼을 좀 달라고 해서 체다 치즈를 얻을 수 있을까요?🧀.

나는 이어서parent를gridParent,div1을titleHeader,div2를leftSummary,div3를rightInfo로 바꾸었다. 단지 자신을 곤혹스럽게 하지 않기 위해서였다.명명 약정 등등.
그것을 CSS/SCSS 파일에 넣고 HTML 파일에div를 만들면 이력서 데이터로 HTML 파일을 채울 수 있습니다.
재밌는 부분이에요.🙊 나는 이 부분을 너에게 남겨 줄 것이다.

나는 거짓말을 할 줄 모른다. 이 부분은 시간이 좀 걸린다. 문자뿐만 아니라 스타일도 있다. 왜냐하면 나는 심심한 흑백 문서를 싫어하기 때문이다. 나는 hover에 무지개 상호작용 요소를 추가했지만, 이 문서들은 인쇄할 때 나타나지 않는다.
이 단계에서 페이지를 생성하고 운영 체제의 인쇄 명령을 실행할 때 전체 A4 크기의 PDF/인쇄 페이지가 있어야 합니다.
그것은 완벽했다. 내가 그것을 날씬한 응용 프로그램으로 바꿀 때까지. 그리고 나는 여러 가지 문제에 부딪혔다. 왜냐하면 그것은 원하는 div를 잡았을 뿐만 아니라, 페이지의 왼쪽 상단부터 재단하기 시작했기 때문이다.

이것이 바로 내가 인쇄 매체 조회를 이해하는 곳이다. 이것은 두 가지 방식으로 완성할 수 있지만, 다른 한 가지 방식은 내가 실현하고자 하는 목표에 있어서 훨씬 엄격하다.
제목에 탭을 추가하면 완전히 다른 스타일시트를 만들 수 있습니다. 멋진 사이트 스타일 이력서를 디자인하고 싶으면 스타일시트에 대체 코드가 있습니다. 출력이 호출될 때만 표시됩니다. (잠시 후에 이 옵션을 탐색할 것입니다.) 이것은 좋은 선택이 될 것입니다.

<link rel="stylesheet" type="text/css" href="print.css" media="print">

단, 저는 그대로 출력하고 싶을 뿐입니다. Svelte 페이지의 일부분이나 CSS/SCSS 파일에 @media print {} 블록을 추가하고 대상을 부모div 클래스로 가리키면 트리의 모든 내용을 무시합니다.
내가 앞서 언급한 또 다른 작은 문제는 내가 모든 내용을 날씬한 응용 프로그램으로 바꾸면 형식이 정확하다는 것이다. 다른 CSS 슈퍼스타 (website 덕분에, 나 read 는 페이지는 우리가 캔버스에 설정한 사이즈에 따라 정의해야 한다고 생각한다. 아래 코드와 같다.

@page{size:8.5인치 12인치 설정;매칭은 그것을 장갑처럼 몸에 맞게 한다.
이 단계에서, 나는 아직 날씬한 프로그램을 연결할 수 없다. 왜냐하면 그것은 아직 건설 중이기 때문이다. 그러나 준비가 되면, 그것은 나의 현재 website 를 대체할 것이기 때문에, 계속 검사해 돌아올 것이다.
질문이 있거나 제가 더 잘할 수 있다면 연락 주세요.