HTML 템플릿을 사용자 지정하는 방법

() translation by (you can also view the original English article)

따라서 HTML 템플릿을 구입한 후에 온라인에 넣기 전에 사용자 정의해야 하지만 코드에 익숙하지 않은 당신은 어떻게 해야 하는지 잘 모릅니다. 이 튜토리얼에서는 전체 과정을 단계별로 진행할 것이므로 쉬워야합니다.

우리는 이전에 HTML 행을 보지 못했다는 가정하에 편집된 HTML을 보지 않으므로 코드를 사용하여 작업하는 것이 얼마나 새로운지에 관계없이 정확히 모든 단계를 이 방법대로 수행해야합니다.

초기 단계부터 시작해 봅시다.

HTML이란 무엇입니까?

기술적으로 이 질문에 대한 답변은 "하이퍼 텍스트 마크업 언어"입니다. 그러나 템플릿을 사용자 정의하기 위해 HTML을 다음과 같은 일련의 열기 및 닫기 태그로 간주 할 수 있습니다.

1	<h1> </h1>

태그는 <및> 기호로 표시되며 닫기 태그에는 항상/가 포함됩니다. 한 쌍의 태그에는 다음과 같이 내용이 있습니다.

1	<h1>John Smith, Front End Developer</h1>

그러나 때때로 다음과 같이 마감 파트너가 없는 독립 실행형 태그도 있습니다.

1	<img src="mypic.jpg">

다른 HTML 태그는 웹 페이지에 다른 유형의 컨텐츠를 표시합니다. 위의<h1><h2>태그 예제는 "John Smith, Front End Developer"라는 큰 표제를 만들고 예제<img>태그는 이미지 파일을 "mypic.jpg" 페이지에 나타납니다.

HTML 템플리트를 편집하려면 변경하려는 페이지 부분을 나타내는 태그, 코드에서 찾는 방법 및 편집하여 원하는 내용을 표시하는 방법을 알아야합니다.

코드 편집기 가져 오기

예, 메모장이나 유사한 프로그램에서 HTML을 완전히 편집 할 수 있지만 적절한 코드 편집 응용 프로그램을 사용하면 훨씬 더 원활하게 진행됩니다. 주된 이유 중 하나는 곧 보게 될 코드의 색상이 강조 표시되어 읽거나 편집하기가 훨씬 쉬워진다는 것입니다.

Sublime Text는 https://www.sublimetext.com/3에서 다운로드 할 수 있습니다.

HTML 템플릿 다운로드 및 보기

구입 한 템플릿을 다운로드하십시오.이 자습서의 경우 이 "Clean CV"템플릿을 사용하여 시연합니다.

대부분의 HTML 템플리트는 ZIP 파일로 제공됩니다. 그렇다면 지금 압축을 풉니다. 그런 다음 "index.html"파일을 찾을 때까지 템플릿 폴더 내부를 둘러 봅니다. 또는 "index.htm" 파일.

예제 CV 템플릿에서 "index.html" 파일은 "01.html-website"디렉토리에 있습니다.

이제 Chrome에서 해당 파일을 엽니다. Chrome이 기본 또는 기본 브라우저가 아니더라도 편집 프로세스를 돕기 위해 내장된 일부 도구로 작업 할 것이므로 어쨌든 사용하십시오.

변경할 부품 식별

템플릿을 처음 편집하는 경우 색상 및 레이아웃을 아직 조정하지 않는 것이 좋습니다. 그렇게 하려면 페이지 스타일을 담당하는 언어인 CSS를 파헤쳐야 합니다. 템플릿 사용자 정의를 처음 접할 때는 한 번에 한 가지만 집중하는 것이 좋습니다. HTML을 시작하는 것이 가장 좋습니다.

공을 굴리는 방법은 Chrome에서 템플릿을 살펴보고 변경해야 하는 페이지의 글자와 이미지를 작성해야 합니다. 원하는 경우 목록을 작성하여 수정할때 각 항목을 확인하고 확인할 수 있습니다.

우리의 이력서 템플릿의 경우 우리는 변경하고 싶습니다 :

이름
직업
개인 사진
소셜 미디어 링크
연락처 정보
이력서 섹션: "전문가 프로필", "일 경험", "기술적인 기술" 및 "교육"
저작권 메시지

이제 우리는 변경 하는 항목의 목록, 우리는 코드에 해당 하는 HTML 태그를 찾기에 대해 설정할 수 있습니다. 이름으로 시작해 봅시다.

Inspector에서 태그 찾기

기본적으로 "John Smith"라는 이름을 마우스 오른쪽 버튼으로 클릭하고 Inspect:

다음과 같은 패널이 브라우저에서 열립니다.

이 패널은 코드를 보는 대화식 방식을 제공합니다. <h1>...</h1>(제목 수준 1 태그)를 나타내는 선 위로 마우스를 가져 가면 위에 표시된 스크린 샷에서 강조 표시된 템플릿의 이름 섹션이 표시됩니다.

다른 코드 행 위로 마우스를 가져 가면 페이지의 어느 부분이 밝게 보이는지 보면서 이 패널은 어떤 코드가 어떤 요소와 일치하는지 파악하는데 도움이됩니다. 찾고있는 부분에 불이 들어올 때까지 다른 코드 행으로 계속 가져갑니다.

이제 왼쪽에있는 작은 삼각형을 클릭하여 h1태그를 확장하면 그 사이에 콘텐츠 John Smith<small>Front End Developer</small>가 표시됩니다.

이 말은 화면에 표시된 내용과 일치하므로 코드의 올바른 부분을 찾았습니다.

HTML의 태그 편집

이제 편집을 위해 HTML 파일을 여십시오. "Index.html"을 엽니다 파일을 서브라임 텍스트에 넣으면 다음과 같이 보일 것입니다 :

Chrome 관리자에서 본 것과 일치하는 코드를 여기에서 찾고 싶습니다. 61 - 64 행에서 찾을 때까지 스크롤하십시오.

이제 태그 사이의 내용을 편집하여 자신의 이름과 직업을 변경할 수 있습니다. 먼저 "John Smith"를 자신의 이름으로 편집하십시오.

그런 다음<small></small>태그 사이에서 "프런트 엔드 개발자"를 자신의 직업으로 변경하십시오.

파일을 저장 한 다음 Chrome에서 템플릿을 새로 고칩니다. 변경 사항이 다음과 같이 표시되어야 합니다.

다른 내용을 편집하려면 반복하십시오.

이제 기본 프로세스가 종료되었습니다.

변경할 내용을 검사하기
해당 태그 식별
HTML 파일에서 태그를 찾기
적합한 코드를 편집

맞춤 설정하려는 나머지 콘텐츠를 수정하는 과정을 반복합니다.

나만의 이미지 추가

다음으로 우리는 이름과 직업 분야의 왼쪽에 우리 자신의 이미지를 추가 할 것입니다. 이미지를 마우스 오른쪽 버튼으로 클릭하고 검사하여 해당 태그를 기록하십시오.

1	<img src="_content/140x140.png" alt="">

Inspector 창에서 방금 변경한 행 바로 위의 행을 볼 수 있습니다.

HTML 파일로 이동하여 59 행의 태그를 찾으십시오.

이 태그의 경우 img 태그 안에 표시되는 src 속성의 값을 변경해야합니다. 따옴표 사이에있는 내용을 편집하여 이 작업을 수행 할 수 있습니다. 파일 이름과 자신의 이미지 위치로 바꿀 것입니다.

크기가 150x1550 픽셀인 자신의 이미지를 잡으십시오 (파일 이름은 140x140.png이고 실제 크기는 150x150입니다).

이미지를 "_content"하위 폴더에 놓으십시오. "index.html"파일과 같은 폴더에 있습니다. 파일.

이제 HTML 파일에서 src 속성의 값을 변경하여 "140x140.png" 방금 "_content"하위 폴더에 추가 한 파일로 복사하십시오. 입력 한 파일 확장자가 파일의 확장자와 같은지 확인하십시오. "png"/ "jpg":

파일을 저장하고 Chrome을 새로 고침하면 새 사진이 표시됩니다.

소셜 미디어 링크 편집

이제 템플릿의 오른쪽 상단에있는 소셜 미디어 아이콘의 링크를 수정해 보겠습니다. 이전과 마찬가지로 아이콘 중 하나를 마우스 오른쪽 버튼으로 클릭하여 검사합니다. 창에서 강조 표시된 행 위의 선을보고 "facebook-icon"텍스트가 포함 된 것을 볼 수 있습니다. 이 코드를 사용하여 HTML 파일에서 코드를 찾습니다.

위로 수감된 텍스트로 돌아가서 CTRL + F를 누르고 "facebook-icon"에 대한 찾기를 실행하십시오. 75 행에서 찾아야합니다.

75 번째 줄에있는 a 태그는 아이콘에 대한 링크를 만드는 것이며, 내부에 표시되는 href 속성은 해당 링크의 위치를 결정합니다. 해당 href 속성 값을 Facebook URL로 변경해야합니다 (예 : https://www.facebook.com/mylink).

기본적으로 URL에 #이 표시됩니다. 그런 다음 79 번째 줄에서는 Twitter, 83 번째 줄에는 Google+, 87 번째 줄에서는 LinkedIn에 대해 동일한 작업을 수행하십시오.

완전히 삭제하려는 아이콘이 있는 경우 여는 <a>태그에서 시작하여 닫는 </a> 태그에서 끝나는 링크를 강조 표시 한 다음 해당 코드를 삭제하십시오.

이제 사이트를 저장하고 새로 고침하십시오. 그런 다음 링크를 클릭하면 올바른 위치로 이동해야합니다.

연락처 정보 편집

다음은 소셜 아이콘 바로 아래 연락처 정보를 변경해 보겠습니다.

"이메일"이라는 단어를 검사하여 코드에서이 연락처 정보 섹션의 시작 위치를 찾을 수 있습니다. 강조 표시된 코드 행과 HTML 파일에서 일치시킬 수 있는 행을 기록하십시오.

Sublime Text에서 CTRL + F를 다시 누르면 이번에는 "Email"로 검색됩니다. inspector 창에서 본 내용과 일치하는 코드로 둘러싸인 "Email"이라는 단어의 인스턴스를 찾아야 합니다.

94 번 라인에서 찾을 수 있습니다. 해당 행의 두 위치에서 기본 이메일 주소 "john@sitename.com"을 강조 표시하십시오.

그런 다음 자신의 이메일 주소로 바꾸십시오. 다음 줄에서 전화 번호를 자신의 것으로 바꿀 수도 있습니다. 아래 줄에 자신의 웹 주소를 바꿀 수 있습니다.

CV 섹션 편집

이제 템플릿의 기본 CV 섹션 편집을 시작하겠습니다. 이 섹션에는 몇 가지 파트가 있으므로 각 섹션을 먼저 살펴보고 코드에서 무엇을 찾아야할지 알아 보겠습니다. 이것은 또한 귀하가 사이트의 다른 부분을 찾기 위해 검사기 창을 통해 이동하는 것에 대해 조금 더 배울 수있는 기회가 될 것입니다.

"전문 프로필"섹션으로 스크롤하여 텍스트 단락을 마우스 오른쪽 단추로 클릭하고 검사합니다.

이 태그는 inspector에서 p 태그가 강조 표시된 것을 볼 수 있습니다.이 태그는 텍스트에 단락을 만드는 역할을합니다.

다음으로, 우리는 CV 섹션의 텍스트 전체 섹션이 개별 단락이 아닌 코드에서 어떻게 보이는지 알고 싶습니다. Inspector 창에서 방금 검사 한 단락 위의 코드 행을 클릭하면 모든 텍스트가 표시됩니다.

이렇게하면 코드의 각 섹션이 <div class="cv-itom">...</div>태그에 래핑됩니다. div는 나누기의 약자로 이 태그는 레이아웃과 스타일을 제어하는 데 사용됩니다.

이제 CV 섹션의 제목인 "Professional Profile"을 검사하십시오.

처음에는 div 태그의 또 다른 집합이 보입니다. 실제 표제가 이 태그 사이에 중첩되어 있기 때문입니다.

선의 끝 부분에있는 작은 삼각형을 클릭하여 펼쳐서 내용을 확인한 다음 찾고있는 "Professional Profile" 텍스트가 보일 때까지 다음 줄에서 다시 똑같이 하십시오. 레벨 2 제목을 만드는<h2>...</h2>태그로 묶여 있습니다.

이제이 CV 섹션의 모든 부분에서 코드가 어떻게 보이는지 알았습니다. Sublime Text로 돌아가 편집을 시작할 수 있습니다.

커서를 HTML 문서의 맨 위에 올리면 상단에서부터 검색을 시작할 수 있습니다. CTRL + F를 누르고 "cv-item"을 검색하십시오. 방금 식별한 <h2>ProfessionalProfile</h2> 코드 직후의 코드<div class="cv-item">의 인스턴트를 찾을때까지 계속 하십시오.

이제 전문 프로필 섹션의 텍스트를 자신의 것으로 바꿀 수 있습니다. 텍스트의 각 단락을 <p>...</p>태그로 묶습니다.

작업이 끝나면 섹션의 마지막 단락에있는 시작 단락 태그에 <p class="last">.....</p>와 같은 값이 last인 속성 class가 포함되어 있는지 확인하십시오. 이렇게하면 텍스트 섹션 아래의 간격이 올바르게 처리되도록 하는 템플릿 CSS의 레이아웃 스타일 클래스가 적용됩니다.

HTML 문서를 저장하고 사이트를 새로 고침하면 맨 위 두 섹션의 모든 내용이 사용자 정의되어 있어야 합니다.

이제 "Professional Profile"을 사용한 것과 같은 방법으로 나머지 CV 항목 섹션을 편집 할 수 있습니다.

각 섹션의 각 파트를 검사하여 편집 할 코드를 익히십시오.

직위 검사 :

취업 기간 점검 :

총알 목록 검사 :

"Professional Profile"섹션을 편집 할 때와 같은 방법으로 나머지 CV 섹션의 내용을 편집하십시오. 작업 제목, 작업 기간 또는 글 머리 기호 목록을 편집하려면 지금까지 각 편집 작업을 완료 한 것처럼 관리자 윈도우에서 본 것과 일치하는 코드를 찾습니다.

p 태그를 사용하여 단락을 만들고 "Professional Profile"섹션과 마찬가지로 단락이있는 섹션을 끝내려면 <p> 태그에 class="last" 즉 <p class="last">...</p>가 포함되어 있는지 확인하십시오.

참고 : 새 CV 섹션을 추가하거나 기존 CV 섹션을 제거하려면 inspector를 사용하여 전체 섹션을 래핑하는 코드 태그를 찾아야합니다.