본문 바로가기

토이 프로젝트/HTML로만드는 홈페이지

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

안녕하세요

인포돈 입니다.

 

처음 블로그의 글을 올려보네요. 여러 번의 수정이 있겠지만, 최선의 노력으로 열심히 올려보겠습니다!

 

저의 첫 포스팅은 바로 HTML로 만드는 홈페이지!!

 

 

저도 HTML을 처음 접해 보기 때문에 같이 배우면서 제작까지 도전해 보려 합니다.

 

대신!! 모두가 이번 HTML로 만드는 홈페이지 시리즈를 따라 하신다면 시리즈를 완독 했을 때는 반드시 자신만의 홈페이지를 직접 제작했다는 성취감을 드리겠습니다.

 

 

우선 우리 모두가 처음이거나 익숙지 못한 것을 공부할 때 가장 중요한 것이 무엇인지 아시나요??

 

저는 바로 목표입니다!

 

무엇이든 처음 시작은 의욕이 넘칩니다. 그러나 시간이 지나면 지날수록, 그 열정을 빠르게 식어가죠

 

그럴 때마다 저희는 되새겨야 됩니다. 저희의 목표를요 

 

작은 팁은 처음부터 너무 큰 목표보다는 간다한 목표로 시작해서 넓혀나가야 한다는 겁니다!

 

 

아무튼, 서론이 너무 길었으니 바로 본론으로 넘어가겠습니다

 

이번 포스팅 시리즈의 목표는 간단한 HTML을 통해 아주아주 간단한 홈페이지를 직접 제작해 보는 겁니다.

 

 

목표가 있다면 그에 따른 큰 계획을 세워봐야겠죠??

 

우선 대략 10일 동안 학습 + 실습을 통해 홈페이지 제작을 목표로 잡고 시작해보도록 하겠습니다.

(물론 때에 따라 계획은 유동적이어야 합니다)

 

 

이제 기간을 정했으니 어떤 홈페이지를 제작할지 구성을 해야 합니다.

 

첫 시도다 보니 난해하고 복잡한 홈페이지보다는 저의 만족을 채울 수 있는 홈페이지를 제작해 보겠습니다.

 

 

어떤 홈페이지가 좋을까 고민을 하던 중 제가 평소에 관심이 많고 자주 보는 것들을 모아두는 홈페이지를 제작해 보기로 했습니다.

 

네이버 메인 홈페이지에 아랫부분에 있는

 

카테고리를 선택 후 관련 글을 읽을 수 있는 부분을 참고하여

 

제가 좋아하는 웹툰, 일일뉴스, 운동

 

우선은 3개의 카테고리로 정보를 주는 홈페이지를 말이죠

 


 

홈페이지를 제작하기 위해서는 우선 배경 지식부터 쌓아 봐야 합니다.

 

그래서 여러 플랫폼을 통해서 우선 홈페이지 관련 정보를 모아보았습니다.

 


 

홈페이지 제작은 크게 Frontend, Backend 2가지 종류로 나눠짐을 알 수 있었습니다.

 

깊은 내용보다는 간단히 설명해 드릴 수 있습니다.

 

 

 

Front - End : 우리 눈에 보이는 홈페이지 모습

Back - End : 우리 눈에 보이지 않는 작업 환경 모습

 

 

 

이런 식으로 해석하면 굉장히 간단히 이해할 수 있습니다.

 

더 나아가 예시만큼 쉽게 이해할 수 있는 방법도 없죠.

 

로그인 창은 Front - End개발로 만들어진 것이고, 그곳에 우리의 아이디와 비밀번호를

 

입력하게 되면, 우리가 이전에 썼던 정보에 접근할 수 있는 권한을 주는 것이 Back - End개발이라고 이해하시면 됩니다.

 

여기서 그치지 않고, 각 Front - end, Back - end 개발에는 어떠한 기술들이 사용되는지도 알 수 있습니다.

 

Front - end

 

HTML

CSS

JavaScript

 

Back - end

 

Java

Python

Javascript

Node.js

PHP

 

이 정도의 컴퓨터 언어들이 대표적으로 표시되어있다는 것을 알 수 있었습니다.

 

각 언어에 따라 어떠한 메서드, 함수들이 정의되어 있고 어떠한 방식으로 로직이 실행되는지에 따라

 

다양한 컴퓨터 언어들이 홈페이지 제작, 프로그램 제작, 앱 제작, 디자인 등 다양한 분야에

 

각각 쓰이다는 점도 알 수 있었네요

 

 

정보 수집에 따라 Front- end 홈페이지 제작에 필요한 HTML, CSS, JavaScript 3가지에 대해서 공부를 하며,

 

어떤 식으로 홈페이지를 만들어 나가야 될지 차근차근 해결해 나가면 될 거예요

 

 

오늘은 학습에 필요한 사전 준비물들을 미리 알아보고 프로젝트를 계획하는 것에 가장 큰 중점을 두어야 됩니다.

 

그래야 앞으로 있을 프로젝트를 설정 목표 기간에 맞게 제작할 수 있기 때문입니다.

 

1일 차

2일 차

3일 차

4일 차

5일 차

정보수집

학습(HTML, CSS, JS)

6일 차

7일 차

8일 차

9일 차

10일 차

학습(HTML, CSS, JS)

실습(홈페이지 제작)


큰 계획 틀은 7일 학습 3일 실습으로 나누어 진행해 보겠습니다.

 

계획은 항상 틀어질 수 있습니다 그때그때 계획은 변경하여 실습을 빨리 들어갈 수도 있습니다.

 

실습을 하면서 학습을 병행할 수도 있고요

 


HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 시리즈는 10일에 걸쳐서

 

HTML, CSS, JAVASCRIPT를 학습하고 이를 바탕으로 자신만의 홈페이지를 간단히 제작하는 프로젝트입니다.

 

 

번호 순서에 맞게 하루에 하나씩 따라서 하면 10일 동안 자신만의 홈페이지를 만들 수 있습니다.

 

같이 성장하는 재미를 느껴봅시다. Go Go


 

 

* 웹은 Public Domain이기 때문에 구글과 MS, NAVER가 웹브라우저를 만들 수 있고, 우리는 똑같은 웹페이지를 여러 웹브라우저에서 볼 수 있는 것입니다.