[밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com

* 그동안 퇴근 이후에 짬짬히 만들면서 쓰려고 했던 시리즈가 본업이 바빠지면서 전혀 진행을 못했었는데, 부업으로 개발을 하던 홈페이지가 베타로 오픈을 하게 되어서 일단 현재 베타의 상태를 현재 쓰고 있는 '밑바닥부터 홈페이지 만들기' 시리즈의 최종목표가 될 것이라는 생각이 들어서 먼저 최종 목표와 다루게 될 내용들을 먼저 정리하고자 한다.

- 이전 글

2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편

2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류

* 목표

: 뭐든지 목표 설정이 중요하기 때문에, 현재 생각하고 있는 목표는 "toc21.com"의 홈페이지에 나와있는 컴포넌트들에 대해서 만드는 방법들을 설명하는 것이다.

http://www.toc21.com/

: 간단하게 이 사이트에 대해서 설명을 하자면, PHP를 기반으로 만들어졌고, PHP로 개발해야하는 부분과 자바스크립트나 CSS로 만들어야 하는 부분을 나눠서 설명할 생각이다. 그 외에도 간단한 최적화 기법들도 설명하고, 현재 호스팅을 제공하고 있는 서버가 엄.청. 제약이 많은데, 이러한 상황에서 발생할 수 있는 몇 가지 상황에 대한 work-around정도 까지 다루려고 한다. 그리고 현재 최적화가 완벽하게 되어있지 않은데 이러한 최적화를 진행하면서도 변화되는 것을 직접 확인하는 것도 같이 정리할 것이다.

* 다루게 될 내용

: 향후 다루게 될 내용은 다음과 같다.

• CSS와 HTML로 메뉴 만들기
• 페이지의 프레임 설정하기 - div/article/section 배치 등
• 간단한 마우스오버 이미지 배너 만들기
• 메인 배너 이미지 교체 애니메이션 만들기
• 롤링 공지사항 만들기
• 네이버지도vs다음지도vs구글지도 사용하기 및 장단점 비교
• PHP로 인스타그램 API/Vimeo API/Tistory API 연동하기
• 주기적으로 인스타그램/Vimeo 미디어 수집하기 - crontab
• AJAX를 통한 lazy loading
• 자바스크립트 파일과 CSS파일 Minification 적용하기 - sh 스크립트 파일로 만들기
• gzip 최적화 방법 - 다양한 방법 설명
• CSS sprite로 최적화하기
• 제약적인 서버 환경에서의 배포 툴 만들어보기 - sh 스크립트 파일로 만들기

: 다루게 될 내용은 꽤나 많지만, 이 중에서 가장 많은 사람들이 사용할만한 내용들과 가장 중요한 내용들부터 정리하면서 써나가게 될 것이다. 각 단계를 설명하는 글에서는 각 단계의 구현 결과물로 사용할만한 결과들로 소스들이 나올 것인데, 위의 내용들이 미리 궁금하다면 toc21.com의 소스를 뜯어보면 될 것이다. 

: 다음의 글에서 쓸 내용은 가장 많은 홈페이지에서 사용할 수 있을만한 내용인 CSS와 HTML로 메뉴를 만드는 것으로 지금 어느 정도 써놨는데 정리를 마저 하고 올릴 것 같다.

[밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com 끝.

- 다음 글

2014/01/15 - [밑바닥부터 홈페이지 만들기] nav, ul, li 태그 HTML과 CSS로 가로형 메뉴 만들기

2014/01/22 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 드롭다운 메뉴 만들기

2014/01/27 - [밑바닥부터 홈페이지 만들기] 마우스 오버 이미지 배너 만들기(CSS, 자바스크립트 등)

2016/06/17 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 가로 드롭다운 메뉴 만들기

2016/06/?? - HTML과 자바스크립트로 드롭다운 메뉴 만들기

2016/07/?? - 간단한 반응형웹과 모바일용 웹 만들기