Post

출처 : W3C XHTML 규격문 번역본(Trio)


아래 요소들은 그 요소 안에 다음의 특정 요소를 포함할 수 없다.

  • a : 다른 a요소를 포함할 수 없다.

  • pre : img, object, big, small, sub, sup요소를 포함할 수 없다.

  • button : input, select, textarea, label, button, form, fieldset, iframe, isindex요소를 포함할 수 없다.

  • label : 다른 label요소를 포함할 수 없다.

  • form : 다른 form요소를 포함할 수 없다.

Post

CDK(CSS Design Korea)에서 "CSS의 역할을 이해하기 쉽게 간단히 정리하자면"란 제목으로 달린 글들 중
lunaticdream님,1UP님,나니님의 글에 넘 공감이 가고 재미있어서 함 퍼왔어요-
(허락받고 퍼올려고 했는데 -ㅅ-a 아무리 찾아봐도 허락받을 글을 남길 방법을 모르겠어서..)


lunaticdream //

어떤 사람의 몸매 -> HTML
그사람의 옷차림,헤어스타일 -> CSS
그사람의 전체적인 스타일 -> HTML + CSS

.몸매와 옷차림이 좋아 전체적인 스타일이 좋은사람은 킹카등극
.몸매가 좋으면 옷매무새가 살고 옷을 골라입는것에 따라 몸매의 결점을 커버가능
.몸매(키 등)를 바꾸려면 뼈를깍는 고통과 시간이 소요
.옷차림이나 헤어스타일은 손쉽게 변경가능
.몸매는 표준이 존재한다 -> HTML구조의 표준화
.양말을 귀에걸면 안된다 -> 적절한 CSS의 사용

올여름 해운대의 승자가 되려면
몸매를 업계표준(권상우)화 시키고 죽이는 옷과 악세사리를 걸쳐주는것이 중요하다.


1UP //

머리좀 길러서 을 부리고 싶은 고등학생입니다.
하지만 저는 안타깝게도 고지식한 선생님들이 많은 학교를 다니고 있죠.
아무래도 학교에서는 찍히지 않기 위해 머리를 최대한 짧게 보이는 꼼수를 부리면서 살고 있어요.
한때는 대들었다고 애들이 뭐라 그런 적도 있습니다ㅜ..
결국 이리저리 피해다니는게 답이다 싶더라고요, 에효.. 힘들어요...

이렇게 이중 생활을 하면서 살다보니 어느날 새로운 선생님들이 오신다는 얘길 들었습니다.
그래서 이제는 좋아질꺼라 기대했습니다만..뭐, 별반 다르지 않더라고요.

다른학교 선생님들은 수업도 빨리 끝내주고, 많이 풀어주던데...ㅜㅜㅜ 무지 부럽습니다.

           # 부연설명 : 멋→CSS / 고지식한 선생님들→IE6 / 학교→대한민국 / 꼼수→CSS핵 / 새로운 선생님들→IE7 ...

나니 //
추가하자면, 새로 부임한 선생님은 IE7, 그렇다면 교생은 IE8?

Post

개발단 코딩에 꼭 들어가는 페이징 부분!
웹표준을 준수하면서 코딩하려면 어떻게 해야할지 잘 모르겠어서 검색하던 중,
유용한 사이트 두 곳을 발견했습니다 ^^



Perfect pagination style using CSS

페이징 모듈을 코딩하는 방법을 쉽게 설명해 놓은 곳이예요~





26 pager styles from around the web (css, images and html)

여러 유명 사이트들의 페이징 모듈 디자인 및 css를 얻을 수 있는 곳~


Post

출처 : http://ajaxian.com/archives/css-evolution


테이블코딩을 하던 때에는 디자인이 다 나오기 전까진 코딩을 시작할 수 없었는데..
디자인이 나오기 전에 코딩을 먼저 시작할 수 있다는 것을 보여주는 완전 멋진 이미지입니다 ㅎㅎ

먼저 내용을 잘 구조화시켜 작성한 뒤 css로 레이아웃을 잡고 디자인을 입히는 과정이예요-

Post


출처 : 웹표준 교과서 | 디지털미디어리서치 - 마시코 타카히로 저


1. 수정과 관리가 용이
웹페이지를 제작할 때 (X)HTML로 올바르게 구조화하고 CSS로 시각표현을 통일하여 제어하면 페이지 제작 부담이 크게 줄어든다.


2. 웹 접근성 향상
올바른 (X)HTML과 CSS로 다양한 브라우징 환경에 대응하는 접근가능한 웹페이지를 만들 수 있다. 또한 장애인과 노인을 배려한 웹페이지를 만듦으로써 결과적으로 모든 사람에게 높은 접근성을 제공할 수가 있다.


3. 검색엔진 최적화(SEO) 대책
검색엔진의 Crawler는 (X)HTML소스를 거의 액면 그대로 해석하기 때문에 적절하게 구조화되고 깨끗하게 정리된 소스일수록 검색로봇이 잘 검색할 수가 있다. 문서구조가 명확한, 예컨대 타이틀(h1~h6요소) 사용법, 텍스트 강조(strong요소) 등 웹표준에 기반을 둔 적절한 마크업이 된 웹페이지는 '인간뿐만 아니라 검색엔진에게도 친절한 페이지'가 되는 것이다.


4. 파일 용량 축소와 서버 저장공간 절약
소스를 효율적으로 작성하면 파일 크기를 줄이고 서버 저장공간을 절약할 수 있다. 동시에 화면표시에 걸리는 시간도 줄고 서버의 부담도 덜 수가 있다. 따라서 여러가지 경제적인 효과를 얻게 된다.


5. 하위호환성과 상위호환성 확보
올바른 (X)HTML과 CSS로 페이지를 제작하면 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 상위호환성과 상호운용성이 확보 된다.

Post

CSS : Cascading Style Sheet


XHTML이 표준문법이어야 한다.

CSS를 적용하기 전에 반드시 XHTML이 표준문법인지를 검사해야 한다. → W3C의 Markup Validation Service를 이용


XHTML 문서가 의미와 구조적으로 구성되어야 한다.

- <title>에는 사이트의 제목을 동일하게 넣어주는 것이 아니라 각 해당 페이지의 내용을 간략하게 넣어주어야 한다.
- 문서의 내용들 중에서 각 제목에 해당하는 내용은 단계에 맞게 <h1>~<h6>을 이용해서 순서대로 표현을 해주어야 한다.
- <ol>,<ul>,<p>,<blockquote>,<ins>,<del> 등과 같은 태그들을 이용해서 컨텐츠가 의미하는 바를 표현해 주어야 한다.
- <script>,<style>과 같은 태그들은 가능하면 외부문서로 분리하여 HTML의 크기를 줄이는 것이 좋다.


CSS가 표준문법이어야 한다.

- CSS의 주석 구문은 /*css comment*/이다. ( <!--html comment-->과 //html comment은 HTML의 주석구문임.)
- CSS의 속성값들 중 0을 제외한 모든 값들은 단위를 표기하여야 한다.
- CSS의 각 구문의 끝은 세미콜론(;)을 사용해 표시해 주어야 한다.
- 컬러값을 사용하는 방법은 세 가지가 있다.
  ① 컬러의 이름 : red
  ② #rrggbb 또는 #rgb : #ff0000 / #f00
  ③ rgb(r,g,b) : rgb(255,0,0) / rgb(100%,0%,0%)


CSS를 표준대로 잘 구현한 브라우저를 이용해야 한다.

CSS를 사용하여 사이트를 제작할 때에는 표준을 잘 준수하는 브라우저를 이용하고 제작이 끝난 후에 가장 많이 사용되는 브라우저에 대한 튜닝을 진행하는 것이 효과적이다.

※ Web Standards Project의 캠페인 사이트인 Browse Happy에서는 Firefox, Mozilla Suite, Opera, Safari 4개의 브라우저를 표준 준수 브라우저로 일반인들에게 추천하고 있다.

Post

웹표준화 가이드 (필독!)
http://www.mozilla.or.kr/ko/docs/web-developer/web-standard-guide-2005-appendix.pdf


W3C 문서 한국어 번역판
http://www.w3.org/2003/03/Translations/byLanguage?language=ko


NULI 공유하는 웹표준화 가이드 - NHN
http://html.nhndesign.com


CSS Design Korea - 웹표준 관련 자료
http://wiki.standardmag.org


웹접근성 향상 캠페인
https://www.kado.or.kr/wa


W3C 타당성 검사
http://validator.kldp.org - MarkUp 타당성 검사
http://css-validator.kldp.org - CSS 타당성 검사


후니넷 - CSS레퍼런스
http://hooney.net/docs/Css/DocumentsIndex


일모리와 웹표준 - CSS 기초 메뉴얼
http://ilmol.com/wp


나라디자인 - CSS,웹표준,웹디자인 참고
http://naradesign.net/wp


트리오 - W3C 규격 번역문(HTML,XML,XHTML,CSS,JavaScript)
http://trio.co.kr


Creative & Advanced Web Design for WebDesigner - HTML,XHTML,CSS,XML,JavaScript,웹디자인
http://www.cadvance.org


SpaceKan - W3C CSS2
http://user.chollian.net/~spacekan/css/css.htm


Web2Dong - 국내 Web2.0사이트 모음
http://www.web2dong.com


Go2Web20.net - 해외 Web2.0사이트 모음
http://www.go2web20.net

Post

What Browser (최신 브라우저 다운로드)
: 자신의 현재 브라우저버전 확인 후 최신버전으로 업그레이드 가능 
http://www.whatbrowser.org/

 

 


 

Internet Explorer
http://www.microsoft.com/korea/windows/downloads/ie/getitnow.mspx


Firefox
http://www.mozilla.or.kr/ko/firefox/


Opera
http://www.opera.com/


Netscape
http://browser.netscape.com/


Safari
http://www.apple.com/safari/download/

▲ top