무료 HTML CSS 템플릿을 레일즈 프로젝트로 가져와서
나만의 소개 페이지를 만들수 있게
준비하는 방법을 알아보겠습니다
일단 새로운 작업공간을 만들어 주겠습니다
이때 new_profile이라고 작업공간 이름을 정해주겠습니다
이름은 자유롭게 입력해주셔도 괜찮습니다
public을 선택하고 반드시 루비 프로젝트를 선택해줍니다
이번에는 git clone을 하지 않고 바로 작업공간을 만들겠습니다
생성되는 동안 템플릿을 찾아보겠습니다
구글을 열어서 html templates free라고 검색을 합니다
비슷한 키워드들을 조합해보면 여러 사이트가 나올 것입니다
free-css.com도 있고
startbootstrap이라고 부트스트랩을
기반으로 한 템플릿 사이트도 있습니다
다음에 pc에서는 넓게 보이고
폰에서는 딱 맞게 보이는 반응형 디자인 템플릿도 있습니다
다양한 사이트들이 존재합니다
여기서 중요한 것은 사용하지 못하는 템플릿이 몇가지 있습니다
예를 들면 wix닷컴의 템플릿들은
솔루션을 wix로 써야하기 때문에
레일즈에서 마음대로 수정하는 것은 불가능합니다
그리고 워드프레스 템플릿도 사용하면 안됩니다
순수하게 HTML CSS JAVASCRIPT로 구성되어있는
템플릿을 구해야 합니다
일단 html5up 페이지로 들어가 보겠습니다
이렇게 보면 크기에 따라 반응형으로 보이는
사이트라는 것을 알 수 있습니다
여기는 헤로쿠 사이트랑 비슷한 디자인을 가지고 있습니다
내려보면 굉장히 다양한 서비스들이 있습니다
어떤 템플릿이 괜찮을지는
데모를 들어가서 정하는 것이 괜찮습니다
데모를 보면 이런 서비스를 만들 수 있다는 것을
확인 할 수 있습니다
이 사이트는 굉장히 심플합니다
이 템플릿을 후보로 두고 다른 것을 찾아보겠습니다
Landed라는 템플릿도 있습니다
컴퓨터 화면이 있고 간단히 자기 소개를 할 수
있는 페이지가 있습니다
이 템플릿을 옮겨보도록 하겠습니다
다운로드를 클릭해서 소스코드를 그대로 다운로드를 합니다
바탕화면에 그대로 압축을 풀어줍니다
다운로드 된 zip파일을 클릭하면 압축이 풀릴 것입니다
압축 풀린 파일을 파인더나 탐색기로 열어주시면
압축이 풀린 파일들이 있을 것입니다
보통 index.html가 있고
css javascript가 담긴 assets라는 폴더가 있습니다
css javascript가 밖에 나와있을 수도 있습니다
상대적으로 index에서 assets들어가서
css파일을 링크로 가져옵니다
그리고 자바스크립트 파일이나 폰트들도 가져옵니다
이 구조는 그대로 유지를 해야합니다
public폴더 바로 아래에는 index.html이 들어가야합니다
이제 이 템플릿을 각자의 프로젝트로 옮겨보도록 하겠습니다
이 파일들을 c9프로젝트에 public 디렉토리 안에
모두 넣어주도록 하겠습니다
이렇게 파일들을 움직여서 public 디렉토리에 그대로 넣습니다
그러면 업로드가 이제 쭉 진행이 됩니다
public 디렉토리 바로 밑에 index.html이
위치할 수 있게 위치를 잡아 주시면 됩니다
images와 assets 디렉토리 구조가
원래 템플릿 폴더 구조와 일치하면 됩니다
업로드가 완료 되었다면
템플릿이 잘 작동하는지 미리보기를 해보겠습니다
Run Project를 클릭해주시면 레일즈 서버가 실행이 됩니다
이 시간이 나타나는 세 줄의 메세지가 나온다면
정상적으로 실행이 된 것입니다
이제 미리보기 링크를 클릭하시면
가져왔던 템플릿이 그대로 보여지는 것을 확인 할 수 있습니다
