초절정 CSS 사이트

segfault의 이미지

http://www.cssvault.com

http://www.csszengarden.com

http://www.cssbeauty.com

CSS만으로도 이런 디자인이 가능하구나... 라고 느낄 수 있을겁니다.

html 페이지 안에서 그림은 거의 사용하지 않는다고 합니다.

한가지 재밌는것은 저기서 소개하는 웹사이트나 CSS가 100% XHTML 규칙을 지킨다는 것.

우리나라 사이트들은 저거 보고 좀 배워야겠군요.

oseb의 이미지

잘 만들어 놓았군요.
HTML에 비해서 CSS가 고급기술쪽이라죠?

처음 DHTML이 나왔을때가 생각나네요. 그것 때문에 동적으로 구성한다고 스크립도도 배우고 CSS도 배우고 하면서 머리카락 빠진 것을 생각해 보면... 모르고 넘어가는게 편할 것 같습니다.

이제 폰트도 CSS로 사용하고 <font> 태그 자체도 사용하지 않는다고 한다면서요?
그냥 CSS 모르고 살렵니다. 갈수록 웹문서들을 표현하는게 복잡해지네요.

segfault의 이미지

oseb wrote:
잘 만들어 놓았군요.
HTML에 비해서 CSS가 고급기술쪽이라죠?

처음 DHTML이 나왔을때가 생각나네요. 그것 때문에 동적으로 구성한다고 스크립도도 배우고 CSS도 배우고 하면서 머리카락 빠진 것을 생각해 보면... 모르고 넘어가는게 편할 것 같습니다.

이제 폰트도 CSS로 사용하고 <font> 태그 자체도 사용하지 않는다고 한다면서요?
그냥 CSS 모르고 살렵니다. 갈수록 웹문서들을 표현하는게 복잡해지네요.

CSS는 템플릿만 잘 짜놓으면 HTML 만드는건 발로 할정도로 쉽습니다.

HTML에서 <font>태그 일일히 넣어가면서 페이지 짜는게 더 어려울지도.

Necromancer의 이미지

개인 홈페이지 만든다면서 css 보고 있는데 html에 비해 노가다는 확실히 줄어들더군요.

아 참... 그리고 이거 공부한답시고 책사는건 별로입니다. 괜찮은 사이트들 널려있습니다.
그리 어려운것도 아니구요.

Written By the Black Knight of Destruction

bus710의 이미지

babjo87 wrote:

CSS는 템플릿만 잘 짜놓으면 HTML 만드는건 발로 할정도로 쉽습니다.

그랬다가 게시판에

발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??

이런 리플이라도 달리면 대략 낭패-_-;;;;

life is only one time

aeronova의 이미지

Quote:
개인 홈페이지 만든다면서 css 보고 있는데 html에 비해 노가다는 확실히 줄어들더군요.

아 참... 그리고 이거 공부한답시고 책사는건 별로입니다. 괜찮은 사이트들 널려있습니다.
그리 어려운것도 아니구요.

마침 개인 홈페이지를 만들까 싶은데, CSS를 잘 배울 수 있는 곳을 좀 추천해 주시면 안될까요?

p.s.
전 HTML tag도 거의 잘 모르는데, 설마 이것이 발목잡진 않겠지요?

It's better to burn out than to fade away. -- Kurt Cobain.

랜덤여신의 이미지

aeronova wrote:
Quote:
개인 홈페이지 만든다면서 css 보고 있는데 html에 비해 노가다는 확실히 줄어들더군요.

아 참... 그리고 이거 공부한답시고 책사는건 별로입니다. 괜찮은 사이트들 널려있습니다.
그리 어려운것도 아니구요.

마침 개인 홈페이지를 만들까 싶은데, CSS를 잘 배울 수 있는 곳을 좀 추천해 주시면 안될까요?

p.s.
전 HTML tag도 거의 잘 모르는데, 설마 이것이 발목잡진 않겠지요?

역시 W3C 가 최고지요.
HTML, CSS 다 나와 있습니다. :)

Necromancer의 이미지

태그매니아 (추천)
http://www.tagmania.net/html/main.php

트리오 - w3c 표준안 한글 번역문서 있습니다. w3c에서도 한국어 문서 링크하고 있는 사이트입니다.
http://trio.co.kr

그외에도 야후나 네이버 엠파스 이런데서 css로 때리면 많이 나옵니다.
(구글은 좀 별로... 사이트단위 검색할때는 이런데가 낫더군요.)
다만 말로만 css 강좌 있다고 하는데가 많으므로 노가다가 필요할겁니다.

css를 한번도 안해본 분이라면 이런대서 배운 다음 표준문서를 보는
것을 추천합니다.

Written By the Black Knight of Destruction

lacovnk의 이미지

불여우에 web developer 깔아서 쓰는데 짱입니다 ㅎㅎ

지금 기존의 동아리 홈페이지를 뜯어 고치는 중인데, 도움 많이 받고 있습니다 ㅎ

segfault의 이미지

흑기사 wrote:
태그매니아 (추천)
http://www.tagmania.net/html/main.php

초보자들은 한번 가볼만한 사이트 같습니다.

다만, HTML표준에 대한 설명이 있는 것 같지는 않구요.

HTML에 대한 원리 중심보다는 예제 중심인 것 같습니다.

Necromancer의 이미지

다른 사이트도 뒤져봤지만, 사정은 다 마찬가지더군요.
다만 이해하기 쉽게 설명해 놓은데라서 추천한 겁니다.

어느정도 익숙해진 뒤에는 w3c의 문서들을 봐야만 하죠.
아래 트리오가 그 중에서 표준에 가장 가깝다고 볼 수 있고요. 하지만 수준이 좀 높습니다.

http://www.w3.org/MarkUp/html4-updates/translations#Korea

번역문 링크 눌러보면 트리오가 연결되어 있죠.

Written By the Black Knight of Destruction

버려진의 이미지

푸하하 제가 왜 이글을 못봤었는지~

재밌네요 ^^;;;

akudoku wrote:
babjo87 wrote:

CSS는 템플릿만 잘 짜놓으면 HTML 만드는건 발로 할정도로 쉽습니다.

그랬다가 게시판에

발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??
발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??발로했냐~~??

이런 리플이라도 달리면 대략 낭패-_-;;;;

sheep의 이미지

개인적으론 font 태그 보다도 table 태그를 더이상 안 쓴다는게 더 놀랍습니다...

CSS 한번 제대로 배워봐야 하는데.... 차일피일 미루고 있습니다...

--------
From Buenos Aires, Argentina
No sere feliz pero tengo computadora.... jaja
닥치고 Ubuntu!!!!!
To Serve My Lord Jesus
blog: http://sehoonpark.com.ar
http://me2day.net/sheep

addnull의 이미지

요즘 xhtml+CSS에 흥미가 있어서 직접 몇가지 해보면서 느낀건,
IE 6의 CSS2에 대한 지원이 정말 판타스틱하네요.. =_=;;
FF에선 잘보이는데 IE 6에선 여지없이 깨집니다.

body에 "overflow:scroll"로 설정해줬더니..
수평 스크롤바가 화면 안에 생깁니다 :(
너무 황당해서 MS에 들어가봤더니..
MS는 IE 6가 CSS1을 완벽히 지원한다고 자랑하고 있더군요.

IE 7은 CSS3까지 지원할 예정이라지만
지금도 IE 5.5를 쓰는 사람들이 적지 않은 걸로 봤을때,
앞으로도 IE 사용자를 위해서 CSS 사용에 제약이 많을 것 같네요.

2005년 8월 18일.

다크슈테펜의 이미지

어니스트 wrote:
요즘 xhtml+CSS에 흥미가 있어서 직접 몇가지 해보면서 느낀건,
IE 6의 CSS2에 대한 지원이 정말 판타스틱하네요.. =_=;;
FF에선 잘보이는데 IE 6에선 여지없이 깨집니다.

body에 "overflow:scroll"로 설정해줬더니..
수평 스크롤바가 화면 안에 생깁니다 :(
너무 황당해서 MS에 들어가봤더니..
MS는 IE 6가 CSS1을 완벽히 지원한다고 자랑하고 있더군요.

IE 7은 CSS3까지 지원할 예정이라지만
지금도 IE 5.5를 쓰는 사람들이 적지 않은 걸로 봤을때,
앞으로도 IE 사용자를 위해서 CSS 사용에 제약이 많을 것 같네요.

2005년 8월 18일.


마소라는 동네가 원래 표준적인 기술도 자기식대로 구현해버리는 유명한 동네지 않습니까..CSS를 제약이 많더라도 표준적으로 지원하면 그나마 낳을수도...CSS도 마소식대로 구현을 해버린다면 그야말로 낭패...

인생이란게 다 그런게 아니겠어요....? 뭘(?)
http://schutepen.egloos.com

addnull의 이미지

음.. overflow를 body에서 html 쪽으로 옮기니
제가 원하는데로 보이는 군요.
원래 overflow를 body에 넣으면 않되는 것인지.. IE 6가 잘못해석하는 건지..

2005년 8월 18일.

hyeonseok의 이미지

sigsegv wrote:

CSS는 템플릿만 잘 짜놓으면 HTML 만드는건 발로 할정도로 쉽습니다.

요즘에는 CSS보다 HTML 이 훨씬 어렵다고 느끼고 있습니다.

CSS는 대충 작성해도 되지만 HTML은 생각할 것이 정말 많습니다.

dragonkun의 이미지

aeronova wrote:
Quote:
개인 홈페이지 만든다면서 css 보고 있는데 html에 비해 노가다는 확실히 줄어들더군요.

아 참... 그리고 이거 공부한답시고 책사는건 별로입니다. 괜찮은 사이트들 널려있습니다.
그리 어려운것도 아니구요.

마침 개인 홈페이지를 만들까 싶은데, CSS를 잘 배울 수 있는 곳을 좀 추천해 주시면 안될까요?

p.s.
전 HTML tag도 거의 잘 모르는데, 설마 이것이 발목잡진 않겠지요?


http://www.w3schools.com
영어로 되어있지만 예제도 많고 이해하기 쉽게 설명되어 있습니다..
레퍼런스도 마련되어 있어서 보고 참고하실 수 도 있구요..

HTML 태그 잘 모르셔도 상관없습니다..
XHTML+CSS로 짜다보니..
DIV,P,BR,A,IMG,UL,LI 정도 태그 밖에 안 써지게 되더군요..
나머지 뭐 디자인적 요소라던지는 전부 CSS에서 처리하니까요..

Emerging the World!

sh.의 이미지

어니스트 wrote:
요즘 xhtml+CSS에 흥미가 있어서 직접 몇가지 해보면서 느낀건,
IE 6의 CSS2에 대한 지원이 정말 판타스틱하네요.. =_=;;
FF에선 잘보이는데 IE 6에선 여지없이 깨집니다.

body에 "overflow:scroll"로 설정해줬더니..
수평 스크롤바가 화면 안에 생깁니다 :(
너무 황당해서 MS에 들어가봤더니..
MS는 IE 6가 CSS1을 완벽히 지원한다고 자랑하고 있더군요.

IE 7은 CSS3까지 지원할 예정이라지만
지금도 IE 5.5를 쓰는 사람들이 적지 않은 걸로 봤을때,
앞으로도 IE 사용자를 위해서 CSS 사용에 제약이 많을 것 같네요.

2005년 8월 18일.

그런점 때문에 필드에서는.. user-agent에 때라서 다른 css를 적용합니다 -0-) 뭔 삽질인지...
ie7이 나온다고 해도 획기적일거란 기대는 안하고요;;

죠커의 이미지

aeronova wrote:
Quote:
개인 홈페이지 만든다면서 css 보고 있는데 html에 비해 노가다는 확실히 줄어들더군요.

아 참... 그리고 이거 공부한답시고 책사는건 별로입니다. 괜찮은 사이트들 널려있습니다.
그리 어려운것도 아니구요.

마침 개인 홈페이지를 만들까 싶은데, CSS를 잘 배울 수 있는 곳을 좀 추천해 주시면 안될까요?

p.s.
전 HTML tag도 거의 잘 모르는데, 설마 이것이 발목잡진 않겠지요?

만박님이 번역한 "실용예제로 배우는 웹 표준"을 보세요.

hyeonseok의 이미지

bs0048 wrote:
어니스트 wrote:
요즘 xhtml+CSS에 흥미가 있어서 직접 몇가지 해보면서 느낀건,
IE 6의 CSS2에 대한 지원이 정말 판타스틱하네요.. =_=;;
FF에선 잘보이는데 IE 6에선 여지없이 깨집니다.

body에 "overflow:scroll"로 설정해줬더니..
수평 스크롤바가 화면 안에 생깁니다 :(
너무 황당해서 MS에 들어가봤더니..
MS는 IE 6가 CSS1을 완벽히 지원한다고 자랑하고 있더군요.

IE 7은 CSS3까지 지원할 예정이라지만
지금도 IE 5.5를 쓰는 사람들이 적지 않은 걸로 봤을때,
앞으로도 IE 사용자를 위해서 CSS 사용에 제약이 많을 것 같네요.

2005년 8월 18일.

그런점 때문에 필드에서는.. user-agent에 때라서 다른 css를 적용합니다 -0-) 뭔 삽질인지...
ie7이 나온다고 해도 획기적일거란 기대는 안하고요;;

IE 에는 overflow-x 라는 비표준 속성이 있습니다.
CSS hack 과 이 속성이 유용할 것 같군요.
user-agent 가 IE 일때만 작동하게 하면 되겠죠.

* html body {
        overflow-x: hidden;
}
dangsan49의 이미지

oseb wrote:
잘 만들어 놓았군요.
HTML에 비해서 CSS가 고급기술쪽이라죠?

처음 DHTML이 나왔을때가 생각나네요. 그것 때문에 동적으로 구성한다고 스크립도도 배우고 CSS도 배우고 하면서 머리카락 빠진 것을 생각해 보면... 모르고 넘어가는게 편할 것 같습니다.

크크...저도 동감합니다.
자바스크립트는 참 어려운 언어 였던걸로 기억이 납니다.
마우스 오버 되면 그림 바꾸게 하는 스크립트 분석하고 하던게 생각이 나는군요.

VENI, VIDI, VICI - Caesar, Gaius Julius -

opiokane의 이미지

물론 디자인적인 뛰어남들도 있지만 기능적으로
엄청난 싸이트들도 있더군요.
그 중에서도 특히 구글이나 gmail은 정말 언제보아도 감탄하지
않을 수가 없고, CSS의 강력하고 용이함에 놀라게 됩니다....

George double you Bush has two brains, the left and the right, like normal people. But the problem is that there is nothing right in his left brain and there is nothing left in his right brain"