[ 응용] 템플릿 사용하기
[ 응용] 템플릿 사용하기
Bootstrap는 널리 사용되는 front-end framework입니다.
반응형 웹디자인을 기본으로 하고 있고, 폼 디자인, 메뉴바, 드롭다운 등 자주 사용되지만 손이 많이 가는 요소들의 디자인과 기능을 포함하고 있어 쉽게 사이트를 제작할 수 있습니다.
하지만, Bootstrap 기본 모양을 사용하면 모든 사이트가 같은 디자인이 된다는 단점이 있습니다. 그래서 어느 정도 수정을 해야 차별화된 모습을 갖출 수 있습니다.
그런 수정 작업이 번거롭다면, 또는 그런 작업을 할 수 있는 인력이 없다면 Bootstrap 무료 템플릿을 이용하여 디자인을 바꾸는 방법이 있습니다.
Bootstrap 기반이 아니라고 생각할 정도로 확연히 다른 모습은 아니지만, 어느 정도 특색있는 디자인으로 바꿀 수 있습니다.
발췌 : https://www.cmsfactory.net/node/10674
지금부터 Bootstrap 무료 템플릿을 이용하여 템플릿 사용법을 익혀보도록 하겠습니다.
(무료 템플릿 사이트로 이동 https://startbootstrap.com/)
해당 사이트로 들어와 스크롤을 내려보시면
여러개의 템플릿이 있는것을 보실 수 있습니다.
그중에서 아래 사진처럼 표시되어 있는 템플릿을 선택해 줍니다.
해당 템플릿 화면을 마우스로 클릭하여
결과물을 확인도 가능합니다.
다시 해당 템플릿 메인화면으로 돌아와서
우측에 Free Download 버튼을 클릭해 주세요.
새로운 프로젝트(새폴더)를 만들어서 그안에 압축풀기를 해줍니다!
그 다음 VSCODE로 돌아가셔서
폴더열기(open folder) 기능을 통해
방금 생성한 폴더를 열어줍니다.
다음과 같이 화면이 나오신다면! 실습준비 완료 : )
VSCODE 왼쪽 창에서 압축해제된 결가로 나온 폴더가 있습니다.
그 폴더를 열어보겠습니다.
index.html 파일을 찾아서 화면을 켜줍니다.
화면을 보시면, 저희가 여태까지 해왔던
HTML개발과정과 같습니다.
이 부분에서 원하시는 내용을 추가하고, 삭제하면서
html파일을 수정해주시면 됩니다.
CSS는 어떻게 수정하나요?
다음의 사진처럼 custom.css 파일을 만들어서
index.html의 <head></head> 사이에
외부참조로 연결해서 사용하시면 됩니다!
