HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 7(홈페이지제작)

안녕하세요 ~ 

 

인포돈 입니다.

 

 

오늘부터는 이전에 배웠던 css, html을 활용하여 원하는 홈페이지를 제작해보도록 하겠습니다.

 

대부분의 사람들은 발표를 맡게 될 때 ppt를 작성하게 됩니다. 저 같은 경우에는 ppt를 작성할 때 겉표지, 예쁜 템플릿을 먼저 찾게 됩니다.

 

홈페이지도 똑같습니다. 예쁜 템플릿을 찾아봐야 합니다.

 

물론, 그 템플릿을 직접 만들어 볼 수도 있습니다. 그러나 저희는 누구든 쉽고 빠르고 간단하게!

 

더 깊숙이 css와 html을 학습하고 싶으신 분들은 직접 템플릿을 만들어보시는 것도 추천드립니다.

 

---

그럼 무료로 템플릿을 다운로드할 수 있는 곳을 몇 곳 추천해드리겠습니다.

 

1. free-css

www.free-css.com/free-css-templates

Download 3166 Free Website Templates - CSS & HTML | Free CSS

2. nicepage

nicepage.com/html-templates

6000+ Free HTML Templates. HTML Website Templates

 

3. templated

templated.co/

TEMPLATED

 

이 외에도 "free html, css template" 검색을 하시면 정말 다양한 무료 템플릿을 구하는 사이트를 알아볼 수 있습니다.

 

---

 

사이트를 둘러보면서 원하는 템플릿을 하나 선택해보세요 ~ 제가 선택한 템플릿은 SIMPLE HOUSE라는 템플릿입니다.

 

해당 템플릿으로 제가 앞서 설명한 웹툰, 운동, 뉴스 서비스를 담을 수 있다고 생각했기 때문이죠

 

다들 자신의 사이트에 맞는 템플릿을 다운로드하여주세요.

 

 

다운을 받으면 아래와 같은 파일이 생성이 됩니다. 그러면 여기서 index.html 파일을 오른쪽 클릭을 하여 저희가 사용하였던 atom 또는 각자가 사용하는 개발환경으로 열어주세요

 

 

 

 

 

해당 파일을 열면 이제 저희가 잘 모르는 코드들이 많이 있을 것입니다.

 

저희는 여기서 저희가 필요한 데이터들만 고쳐주면 저희만의 홈페이지가 다 만들어지게 됩니다.

 

여기서 index.html 파일을 더블 클릭할 경우 사용하시는 웹브라우저로 페이지가 뜨게 됩니다.

 

 

이제 저희가 원하는 문구와 사진을 하나씩 넣으면 되겠죠? 이전에 저희가 브라우저에서 배웠던 툴을 기억하시나요?

 

ctrl + shift + i  또는 "마우스 우클릭 + 검사"를 누르시면 아래와 같은 화면이 나오게 되죠.

 

그 후 마우스 모양 아이콘을 클릭한 후 저희가 교체할 글씨 또는 사진을 클릭하게 되면 아래와 같이 어디가 저희가 선택한 곳의 코드인지 알 수 있게 됩니다.

제가 바꾸고 싶은 곳이 Simple House의 글씨라면 오른쪽에

<h1 class=""><h1 class="tm-site-title"> Simple House </h1> 해당 라인이 회색 줄이 되시는 게 보이시나요?

 

그러면 이제 저희가 열었던 개발환경 Atom에서 해당 문장을 찾는 것입니다.

 

문장을 찾을 때는 ctrl + f를 입력하여 해당 문자를 복사 붙여 넣기 하면 됩니다.

 

그 후 Simple House를 HTML TEST HOMEPAGE로 바꿔보겠습니다.

 

 

<h1 class="tm-site-title">Simple House</h1>

무료로 다운로드한 템플릿에 적혀있던 이 한 줄을

 

<h1 class="tm-site-title">HTML TEST HOMEPAGE</h1>

코드로 바꾸어주면 이렇게 홈페이지가 바뀐 것을 볼 수 있습니다.

 

이제부터는 하나씩 박고 싶은 부분을 클릭해가면서 원하시게 홈페이지를 꾸미시면 끝!!

 

카테고리 about, contact 같은 부분도 위와 똑같은 방법으로 고쳐주시면 됩니다.

 

비록 모두를 저희 스스로 만든 것이 아니지만, 무료로 배포하는 템플릿을 이용하여

 

손쉽게 홈페이지를 제작할 수 있음을 알 수 있었습니다.

 

각자 기호에 맞게 그림과 글씨를 바꾸면서 자신만의 홈페이지를 제작하시면 됩니다.

 

(해당 홈페이지마다 제작자의 의도가 있기 때문에 파악하기 힘든 부분이 있으면 댓글을 다시면 답해드리겠습니다.)

 

* 여기서 주의해야 될 점이 있습니다. 각 홈페이지에 저희가 아직 배우지 못한 PHP, JAVASCRIPT 등의 언어가 포함되어 있는 템플릿이 있을 수 있습니다. 그 부분은 되도록이면 건드리지 않으시는 걸 추천드립니다. 제 템플릿 또한 JS의 코드가 있어서 해당 카테고리(pizza, salad, noodle)를 바꾸는데 살짝 헷갈림이 있었습니다.

 

+ 저 같은 경우는 class와 id 값을 잘 바꿔줘서 해결했답니다. (참고 바랍니다.)

 

해당 카테고리를 감싸는 가장 큰 div태그가 3개가 있습니다. 해당 태그의 class의 값들을 자신이 바꾸려는 이름으로 같이 바꿔줘야 해당 카테고리를 클릭을 사용할 수 있습니다!

 

---

 

이번 시간에 홈페이지를 제작하는 방법을 배워볼 수 있었습니다.

 

다음 시간에는 자신들이 만든 홈페이지를 지인, 친구분들에게 자랑할 수 있게 주소를 할당해주는 법을 알아보겠습니다.