div 웹 페이지 만들기..

[rockbest]

우연한 기회에 이곳을 알게 돼 많은 걸 알게 되었습니다.

그동안 table 태그를 남발해오면서 오히려 div 를 보면

너무 비표준적이다라는 무식한 생각을 해 왔었는데요..

많이 부끄럽네요 -_-;

개인적으로 가지고 있는 웹페이지를 리뉴얼 해볼까 하는데

테이블적 사고 때문에 그런지 매우 어렵네요

어떻게 해야될지 감이 안온달까요..

<a href=http://www.meyerweb.com/eric/css/>Eric Meyer : CSS</a>
깔끔하고 구성이 참 잘되어 있던데..

소스를 보니 제 웹페이지에 적용하기에 참으로 난감하더군요 --;

표준에 따른 웹페이지 제작에 참고할 만한 사이트가 있었으면 도움이 되겠습니다.

결론은 좀 가르쳐주십시오...

p.s: 글이 두서가 없군요..[/url]

[박민권]

각종 참고할 자료는 해외 자료이고 국내의 자료는 너무 소수이며 분산되어
있다는 점이 참 힘든 부분인 것 같습니다.

표준을 공부하기에 딱 좋은거는 그나마 한글로 번역되어 있는
w3c.or.kr에 있는 문서인것 같습니다.

http://w3c.or.kr/Translation 이곳으로 가시면 기술문서 번역본이 있습니다.

저는 전체를 정독한다기 보다는 의문점이 생길때마다 태그의 제대로된 사용법을 찾아보는 식으로 이용하고 있습니다.

w3cschool 도 괜찮습니다.
http://www.w3schools.com/xhtml/xhtml_reference.asp
위의 주소로 가시면 xhtml 태그리스트로 바로 가실 수 있습니다.

표준태그인지 아닌지, 사용법과 예제등을 보시기에 딱 좋다고 봅니다.

위의 사이트만 참조하셔도 html의 표준은 많이 공부하실 수 있으실 겁니다.
표준css 관련해서도 위의 사이트에서 정보를 많이 얻으실 수 있습니다.

하지만 역시나 css 활용방법이 중요하겠죠.
css 속성 많이 알고 있다고 해서 적용이 가능한 것이 아닐테니까요.

Code: Select all

#ID{}
.class{}
#ID, .class{}
#ID .class{}
#ID.class{}

CSS에서 위의 것들이 어떠한 차이가 있는지가 기초라고 할 수 있겠습니다.
그리고 그 차이를 알고 응용을 할 줄 알아야 겠구요.

테이블과 CSS레이어 개념에 대해서 한가지 말씀드리겠습니다.

테이블 개념은 틀을 짜고 칸칸 마다 내용을 집어넣으며 하나의 칸이
변화하면 주변의 칸도 영향을 받게 되는 것이 테이블 개념입니다.

CSS레이어 개념은 영역 위에 영역을 얻어놓는다고 생각하시면 됩니다.
이 영역들은 경우에 따라서 다른 영역을 밀어버리기도 하고 겹쳐지기도 합니다.

도화지가 한장 있으면 그 위에 여러 모양으로 조각을 낸 색종이를 얻어놓는 것 처럼요.
그 배치는 자유롭고 서로 겹칠수도 있고 밀어낼 수도 있습니다.

position: absolute; position: relative;
이 두 속성의 특성과 차이를 공부하시면 자유로운 레이어 구성에 많은
도움이 되실 겁니다.

CSS레이어로도 레이아웃 구성하는데 문제가 없으며 오히려 테이블보다
자유자재로, 더 빠르고 쉽게 만들 수 있습니다.

아래는 CSS로 구성된 홈페이지 입니다.
http://www.gscaltex.co.kr GS칼텍스 올해초에 오픈했죠.
http://naver.com 네이버, 올해초 리뉴얼, 메인이 CSS레이어로 변신
http://kr.yahoo.com 야후코리아, 네이버보다 먼저 CSS로 리뉴얼
그외도 여기저기 더 있습니다.

저희 회사도 CSS레이어로 구성된 홈페이지를 대략 15개 정도?
초창기 실력미달로 CSS가 엉망진창 것도 있지만요. ㅋ~ ^^;

CSS레이아웃이라는 것이 절대 실무에 써먹지 못할 것이 아니라는 것을 알려드리고자 함 입니다.

이제 대세는 CSS레이아웃!
늦었다고 생각했을 때가 빠른거라죠. 힘내세요.
제글도 너무 두서가 없습니다. ㅡㅅㅡ

[iLmoL]

제 집에있는 css 강좌가 도움이 되실런지 모르겠습니다.
생각하는 만큼 어렵지는 않거든요.

http://ilmol.com/wp/css