약간의 프로그래밍으로 웹 사이트를 만드는 가장 빠른 방법

기획, 디자인, 개발 등 고려해야 할 사항들을 최대한 없애고 웹 사이트를 만들 수 있는 방법은 무엇일까요?

이 글에서는 웹 빌더가 아닌, 약간의 프로그래밍으로 웹 사이트를 만드는 방법에 대해 소개합니다.

 

누구나 일주일 만에 자신만의 홈페이지를 만들 수 있습니다.

아래는 제가 일주일만에 제작한 웹 사이트입니다.

https://oncreate.netlify.app/

온크리에이트 - 수백시간을 아끼는 안드로이드 앱 개발 가이드북

시간이 들어가는 일은 주로 '글쓰기'에 의한 부분이었지, 디자인, 프로그래밍에는 거의 힘을 쏟지 않았습니다.

글만 완성되어 있다면, 하루 만에 홈페이지를 완성할 수도 있습니다.

 

어떻게 저는 단기간에 웹사이트를 만들 수 있었을까요?

 

해답은 무료 템플릿을 이용하는 것입니다.

구글에 HTML free template라고 검색하여 나오는 템플릿들을 이용하여, 글과 이미지 부분만 수정해주면 되는 것이죠.

free-css.com에서 제공하는 템플릿

주로 live demo를 통해 홈페이지의 구조를 파악할 수 있기에 마음에 드는 것을 골라 다운로드하시면 됩니다.

저는 VSCode라는 코드 편집기를 이용해서 다운로드한 템플릿을 수정했습니다.

 

이때, 약간의 html, css 지식이 필요한데요. 대략적인 설명을 드리겠습니다.

웹사이트를 건물로 비유해보겠습니다.

건물을 구성하는 요소로는 HTML, CSS, JavaScript가 있습니다.

HTML은 건물의 뼈대를 담당하고,

CSS는 건물의 외양(디자인)을 담당합니다.

JavaScript는 이 건물이 어떤 동작(위 사진에서는 문이 열리는 기능)을 할 수 있도록 해주는 녀석입니다.

 

이 때문에, 글 내용 또는 구성을 수정할 때는 HTML을,

배경 색, 글자 색, 폰트, 간격 등의 디자인적 요소를 수정할 때는 CSS,

특정 기능을 수정한다면 Javascript 부분을 보시면 됩니다.

위 사진은 VSCode에서 index.html의 코드 화면입니다.

<div></div>, <section></section>

이런 식으로 <태그 시작> </태그 끝>으로 건물의 뼈대(html)가 구성되어 있습니다.

그런데, 태그를 보시면 class="home-section-links" 이런 식으로 class라는 녀석이 붙어 있습니다.

이는 '이름'을 지어준 거라 보시면 되는데요, Css나 Javascript에서 저 '이름'을 이용하기 위해 붙는다고 보시면 됩니다.

css에서 home-section-links에 속성을 부여한 모습

이 정도 내용만 아는 상태로, 궁금한 내용은 그때그때 찾아보는 식으로 웹을 만들어낼 수 있습니다.

'a태그가 뭘 뜻하는 거지?'라는 궁금증이 생긴다면 구글에 html a tag를 찾아보는 방식으로 말이죠.

 

프로그래밍도 조금 경험해보고 싶고, 웹사이트를 만들고 싶다면, 무료 템플릿을 이용해 보시는 건 어떨까요?

제가 애용하는 무료 HTML 템플릿 사이트 추천드리면서 마무리하겠습니다.

읽어주셔서 감사합니다.

 

https://bootstrapmade.com/

Free Bootstrap Themes and Website Templates | BootstrapMade