태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


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


- 이전 글

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/?? - 간단한 반응형웹과 모바일용 웹 만들기



저작자 표시 비영리 동일 조건 변경 허락
신고

이 글을 공유하세요.

  • 2014.01.22 22:39  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Unikys 2014.01.23 00:36 신고  댓글주소  수정/삭제

      목표 홈페이지의 이미지에 대한 저작권은 있으니 이미지 사용만 자제하시고, 소스에 대한 저작권은 해당 홈페이지를 제가 만들었으니 사용하셔도 무방합니다 ㅎㅎ (같은 소스에 이미지만 교체하셔도 됩니다. 하지만 공지사항이나 인스타그램/vimeo 등 서버와 연동하는 부분이 많으므로 서버측은 자체적인 개발이 필요하겠지요.) 어짜피 웹은 소스가 다 공개되어있잖아요 ㅎㅎ 그래도 홈페이지와 같은 홈페이지를 만드는데 필요한 내용은 기본적으로 거의 다 다루고 지금 저 상태에서 더 최적화하는 부분까지 다룰 예정이니 기대해주세요^^

  • 경철 2014.03.01 23:51 신고  댓글주소  수정/삭제  댓글쓰기

    제가 쇼핑몰 제작을 하려고 하는데.. 영 초보라
    인터넷을 몇일 헤매다 발견했는데.. 딱 찾던자료네요
    친절하게 주석도 달아주시고
    너무 유익한 강좌 감사합니다.
    매번 따라 해보고 다음 강좌를 기다리고 있습니다.
    수고하세요

    • Unikys 2014.03.03 11:15 신고  댓글주소  수정/삭제

      감사합니다^^ 밑바닥부터.. 시리즈는 바로 그러한 목적으로 쓰고 있는 것이니 따라해보시고 어려운점/궁금한 점이 있으면 댓글로 문의 해주시면 됩니다!

  • 2014.03.12 04:46 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요!
    계속 글 써주시는 것 맞죠 ~
    개인 홈페이지 만들려고 웹호스팅, 도메인 구매해놨는데
    드림위버로 만지작하면서 FTP 사용하는데 막히는게 많네요 ..
    카페24 쓰다가 직접하려니 어렵기도 하고 ..
    글 연재 계속 해주세요 ^^ 감사합니다.

    • Unikys 2014.03.12 09:45 신고  댓글주소  수정/삭제

      네~ 계속 글을 쓸 예정입니다. 다음편의 내용은 머리속에 언제나 구상은 해두고 있는데 본업이 바쁘다보니 글을 제대로 정리하기가 어렵더라고요. 하지만 이렇게 요청하시는 글이 올라오면 동기부여를 받고 다음편 쓰는 작업을 시작하게 되더군요^^ 다음편을 일주일 내로 올릴 수 있도록 노력해보겠습니다!

  • belagio 2014.09.29 13:35 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 강의 써주신거 잘보고 따라하고있습니다. 근데 toc21 홈페이지에 안들어가지네요 ㅠㅠ

  • yeho29 2017.06.16 05:38 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요! toc21.com 사이트로 접속하니 일본어로 된 홈페이지가 나오는데 학습할 수있는 다른 주소는 없을까요? ㅜㅜ

질문이나 의견을 댓글로 달아 주세요

티스토리 툴바