템플릿으로 한방에
랜딩페이지는 사용자에게 처음으로 보여지는 부분이니만큼 디자인을 신경써야합니다. 하지만 머리 속으로 생각한 디자인을 하나하나 처음부터 css와 html로 작성하는 것은 매우 힘듭니다. 이를 위해 많은 분들이 무료로 사용할 수 있는 템플릿을 만들어 주셨습니다! 우리는 이를 가져다 다운로드받고, 우리의 서비스에 맞게 커스터마이징을 하는 법을 배우겠습니다.
2.3.1 무료 템플릿 사이트
[TIP] google 검색: html css templete free [TIP] freeCSS http://www.free-css.com/free-css-templates
검색어를 통해 무료로 제공하는 템플릿들을 찾을 수 있습니다. 저는 그 중 freeCSS란 사이트를 선택했습니다. 다양한 종류의 템플릿들을 볼 수 있습니다. 이 중 자신의 서비스에 어울리는 템플릿을 선택하면 됩니다.
맘에 드는 템플릿이 있다면 클릭해서 더 자세히 볼 수 있습니다. LIVE DEMO 버튼을 눌러 데모 버전을 둘러보는게 가장 정확하겠죠.
데모화면에서 우리 서비스에 적절한 화면 구성과 디자인인지 체크해봅니다.
만족스러운 템플릿을 찾았다면 다운로드 하세요! 다운받은 파일은 압축을 풀고 바탕화면 workspace 폴더에 위치시키고 폴더이름을 landingPage로 변경하겠습니다.
해당 폴더에는 템플릿 디자인을 위한 많은 폴더와 파일들이 존재합니다. 너무 많다고 당황하지마세요! 우리는 index.html 파일 중심으로 보면 됩니다.
index.html을 더블클릭하여 실행시켜볼까요? 템플릿 사이트에서 보았던 데모버전이 나타납니다. 다만 다른점이 있다면 이미지 파일들이 변경되었네요. 어차피 이미지는 우리 서비스에 맞게 사용해야하므로 앞으로 채워넣으면 됩니다.
2.3.2. 커스터마이징 시작하기
이제 이 템플릿을 우리 서비스에 맞는 랜딩페이지로 커스터마이징 해야합니다. 코드를 수정하기 위해선 아톰 프로그램이 필요하겠죠? 아톰을 실행하면 landingPage란 폴더가 있습니다.
index.html 파일을 선택하여 클릭해서 띄우도록합니다. 우리가 간단하게 작성했던 자기소개 코드보다 훨씬 복잡해보입니다. 하지만 겁먹을 것 없이, 태그의 앞뒤를 구분하며 어디서부터 어디까지가 어떤 부분인지를 파악하면서 코드를 읽을 수 있으면 됩니다.
2.3.3. 타이틀 변경하기
먼저 제목표시줄에 나타나는 title부터 바꾸도록 하겠습니다. title은 html의 head에 위치하고 있습니다.
title 태그를 찾아서 각자의 서비스 이름을 적어줍니다.
파일을 저장한 후 다시 실행시켜보면 바로 변경된 것을 확인 할 수 있습니다.
2.3.4. 헤드라인 변경하기
랜딩페이지의 필수 요소인 헤드라인을 멋지게 정하셨나요? 회심의 문장을 이제 적어볼 차례입니다.
index.html 파일을 쭉 훑어보면서 헤드라인의 위치를 찾습니다. 95번째 줄에 있네요. 이 문구를 수정합니다.
수정한 결과를 바로 확인해보세요 :)
2.3.5. 이미지 변경하기
마지막으로 이미지를 변경하는 방법입니다. images라는 폴더에 임시로 활용된 그림파일들이 있는게 보이시나요? 파일명을 유의깊게 살펴본 뒤 index.html 파일로 가봅시다.
헤드라인을 변경했던 부분입니다. 90번째 줄의 코드를 보면 images/slide_1.jpg 가 사용된 걸 알 수 있습니다.
원하는 그림파일을 바탕화면의 workspace에 있는 images 폴더에 slide_1.jpg로 저장합니다.
그림파일 교체가 완료되었습니다. 이제 다시한번 실행해보면 예쁜 화면을 볼 수 있습니다.
2.3.6. [실습] 랜딩페이지 완성하기
구석구석 커스터마이징하며 각자의 서비서에 알맞는 랜딩페이지를 구현해보세요 :)
학생들이 만든 랜딩페이지를 참조하세요.
[완강해] https://seongahkim.github.io/landingpage/