All-round programmer

* 이전의 드랍다운 메뉴 만들기를 하고나서 의외로 많은 질문이 들어온 것이 가로형 메뉴는 어떻게 만드느냐에 대한 내용이었는데, 이 부분은 이전의 메뉴를 그대로 수정해서는 은근히 어려울 수 있어서 이 부분에 대하여 한번 더 정리해보고자 한다. 이번의 글의 목적은 HTML과 CSS만으로 가로로 떨어지는 드랍다운 메뉴를 만드는 것이고, 그 다음에는 아마도 CSS만으로는 구현하게 되면 UX상 개선하고 싶은 몇가지 내용들에 대하여 개선할 수 있는 HTML과 자바스크립트로 드롭다운 메뉴를 만들어 볼 것이다. - 이전 글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 2014/01/13 - [밑바닥부터 홈..

* 이번에는 마우스 오버 이미지 배너를 만드는 방법을 알아볼 것이다. 이러한 마우스 오버될 때 이미지가 변경되는 것은 다양한 방법들이 있는데, 이러한 방법들을 해당 태그의 중요도나 위치에 따라서 다르게 구현하는 방법들을 적용하면 UX가 향상된 홈페이지를 만들 수 있을 것이다. 만약 모든 경우에 오직 한가지 방법만 고집한다면 각 방법들의 적용 방법을 익혀서 필요에 따라서 사용한다면 아주 좋을 것이다. - 이전글2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com2014/01/15 - [밑바닥부터 홈페이지 만들기] n..

* 지난번에 이어서 이번에는 HTML과 CSS로 드롭다운(드랍다운/drop down) 가로형 메뉴를 만드는 것을 해보자. 기존에는 플래시를 이용하거나 복잡한 자바스크립트를 사용해야했지만 이제는 CSS와 HTML만으로도 다양한 효과의 드랍다운 메뉴를 만들 수 있게 되었다. 물론 IE9이상 버전이어야 좀 제대로 보이기는 할테지만 CSS를 기반으로 만들게 되면 IE8에서도 투박하기는 하지만 기능은 제대로 동작하게 된다. 지금까지 있었던 그러한 투박한 드랍다운 메뉴를 생각한다면 CSS3를 얕보고 있는것이다. CSS3는 웹개발자 본인의 능력에 따라서 얼마든지 화려한 기능을 부여할 수 있다. "물론 CSS3는 IE 사용자인 경우 10버전 이상에 한해서 멋지게 되는 것이지만 말이다. 다른 브라우져는 다 잘된다!" *..

* 원래 웹사이트의 아이콘을 먼저 만드는 작업을 하려고 했는데, 디자이너의 작업이 늦어지면 이러한 아이콘 또한 늦게 나오기 마련이다. 따라서, 먼저 대략적인 구조를 받기 전에 요즘 웹페이지에 거의 들어갈만한 메뉴를 html과 css로 만들어보자. 화려한 애니메이션이나 이러한 옵션은 나중에 기획이 확정되면 넣기로 하고 일단 기본적인 틀만 만들어보자. - 이전글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com * 작업하던 소스 : 지난번에는 기본적인 템플릿을 만들어서 기본 html 개발을 하기 전에 준비 단계..

* 그동안 퇴근 이후에 짬짬히 만들면서 쓰려고 했던 시리즈가 본업이 바빠지면서 전혀 진행을 못했었는데, 부업으로 개발을 하던 홈페이지가 베타로 오픈을 하게 되어서 일단 현재 베타의 상태를 현재 쓰고 있는 '밑바닥부터 홈페이지 만들기' 시리즈의 최종목표가 될 것이라는 생각이 들어서 먼저 최종 목표와 다루게 될 내용들을 먼저 정리하고자 한다. - 이전 글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 * 목표 : 뭐든지 목표 설정이 중요하기 때문에, 현재 생각하고 있는 목표는 "toc21.com"의 홈페이지에 나와있는 컴포넌트들에 대해서 만드는 방법들을 설명하는 것이다. http://www.toc..

* 홈페이지를 밑바닥부터 만들 때 가장 먼저 해야할 것은 기본 틀을 만들어두는 것이다. 이제 거의 모든 브라우져들이 HTML5를 지원해주므로 HTML5에서 사용하고 있는 기본 템플릿을 살펴보자. - 이전글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 * Zen-coding의 HTML5 템플릿 : 웹 개발을 하는데 잘 쓰면 유용한 개발 플러그인 중에 Zen-coding이라는 플러그인이 있다. 이 플러그인이 어떤 플러그인인가 하면 코딩을 단축키의 연속으로 하듯이 간단한 문자열로 소스코드를 바로바로 생성할 수 있는 플러그인이다. 이러한 Zen-coding에서 HTML5용 템플릿을 생성하면 아래와 같은 템플릿이 나오게 된다. : 나중에 기회가 되면 이 플러그인에 대해서 별도로 다루기로 하고, 우..

* [밑바닥부터 홈페이지 만들기] 예고편 : 어쩌다가보니 주변에 홈페이지 만드는 일을 도와주게 되었는데, 오랜만에 다시 웹 개발을 하게 되니 고향에 온듯 기분이 아주 좋고 마음이 편안하다. 이번에 기획하고 있는 홈페이지는 xe등과 같은 툴을 사용하지 않고 그야말로 '밑바닥부터' 멘땅에 헤당하며 만들 예정이라, 계속 개발을 진행하면서 그 과정을 누구나 따라할 수 있게 기본적인 내용들을 한번 소개 해보려고 한다. : 이번에 개발하게 되는 컨셉은 대충 만들어가고 있는데 얼추 다음과 같이 될 것이다. 플래시 없음 XE 등 툴 없이 순수 코딩 php/mysql 활용 순수 자바스크립트 활용 html5의 구조적 태그들을 최대한 준수 모바일 웹 고려 반응형 웹 외부 사이트의 API 활용 - 이미지/동영상 예정 High..