초보자분들을 위한 CSS 20가지 유용한 TIPS (하드코딩하는사람들)

http://www.androidside.com/bbs/board.php?bo_table=B57&wr_id=768

html / javascript / jquery / css / mobile 등의 수집 위키.

https://github.com/nolboo/nolboo.github.io/wiki

구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다.

CSS 관련 해서 참고 하시고 많은 도움 받았으면 합니다.

 

 

 

0.CSS의 기본적인 형태 및 속성 설명 

링크 : http://ko.learnlayout.com/

 

1.Use Reset.css

 

ff, ie 등 브라우져가 처리 하는 방법이 다릅니다. 동일하게 재설정 할 필요가 있습니다.

 

프레임워크가 사용하는 몇몇 reset.css 안내

 

야후 reset CSs : http://developer.yahoo.com/yui/reset/
Eric Meyer’s CSS Reset : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Tripoli : http://devkick.com/lab/tripoli/

2. Use Shorthand CSS ( css 문장을 짧게 표시 )

 

.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left; 
    }

 

위 css 를  아래처럼 변경 할 수 있습니다.

.header {
      background: #fff url(image.gif) no-repeat top left
    }

 

참고 사이트 
http://articles.sitepoint.com/article/introduction-css-shorthand
http://www.javascriptkit.com/dhtmltutors/cssshorthand.shtml

3. class 와 ID 이해

클래스는 "." 으로 표시합니다.
ID는 "#" 으로 표시합니다.

 

참고 사이트 
http://codepunk.hardwar.org.uk/acss06.htm

4. <li> 유용한 li

 

*  li 메뉴,리스트 등을 만들 때 아주 좋습니다.

 

참고사이트 
http://www.alistapart.com/articles/taminglists/
http://mirificampress.com/permalink/the_amazing_li

 

5. table 를 버리고 , div 사용하도록 노력

 

div 사용하면 스타일이 유연하게 변경 할 수 있습니다.
, table 은 고정 되어 있습니다

 

참고 사이트

http://articles.sitepoint.com/article/tables-vs-css

 

6. css 디버그 툴

 

css 이해하는데 도움이 되고, 문제 원인을 쉽게 발견 할 수 있습니다.

 

참고사이트

 

firefox web Developer : http://chrispederick.com/work/web-developer/
firefox dom Inspector : https://addons.mozilla.org/en-US/thunderbird/addon/1806/
ie develper toolbar : http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
firebug : http://getfirebug.com/

7. 길게 늘어놓으는 css 를 피하세요.

 

ul li {.... }
ol li {...  }
table tr td { ... }

 

위를  단축

li {...}
td {...}

 

실제 css 적용되는 부분에 삽입 하세요

8. !Important

 

!Important 지정된 곳이 css 가 우선 적용 됩니다. (css 가 덮어 쓰기가 되지 않습니다.)

 

.page { background-color:blue !important;   background-color:red;} 

 

.page에 background-color 는 blue 가 적용 됩니다.

9. 텍스트 이미지 교체

 

h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}

 

 

10. css Positioning 을 이해

 

아래의 참고 사이트는 css position 을 이해하는데 상당히 도움이 됩니다.

 

참고사이트

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

 

11. css @Import Vs <link>

 

css 를 불러오는 2가지가 있습니다. @import, <link>

 

<link href="styles.css" type="text/css" />

<style type="text/css">@import url("styles.css");</style>

@import  sytles 위처럼 숨길 수 있습니다.

 

link  미디어 타입을 지정 할수 있습니다.
<link href="styles-nons4.css" media="all" type="text/css" />

 

 

12. css 디자인 폼

form 들을 css 로 디자인 할 수 있습니다

 

참고 사이트

table-less form : http://jeffhowden.com/code/css/forms/
form garden  : http://app.formassembly.com/theme-editor/
Styling even more form controls : http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/ 

 

13. css를 웹사이트 적용할지 도움을 받으세요

 

css 가지고 멋진 사이트를 만들고 싶으시면 아래의 참고사이트를 확인하고 도움을 받으세요

 

참고 사이트

http://cssremix.com/
http://www.cssreboot.com/
http://www.cssbeauty.com/
http://www.csselite.com/
http://cssmania.com/
http://www.cssleak.com/

 

 

14. 둥근 모서리 코너 css

 

참고 사이트 
 http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
 http://naradesign.net/wp/2009/04/28/801/ , http://naradesign.net/open_content/quiz/roundCorner/

 

15. Keep CSS Codes Clean ( CSS 소스 정리 )

css 코드가 난장판이면 , 리팩토리 하느라 시간을 낭비 하지 마세요

 

아래의 주소에서 리팩토링을 해주네요. 

formatCss : http://www.lonniebest.com/FormatCSS/

 

[12 가지 원칙, 당신의 코드를 깨끗히 하는 ]
http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/

 

 

16.  px vs em

 

CSS 측정 단위 
em-height (em), Pixel (px), Percentage (%)
Inch (in), Centimeter (cm) & Millimeter (mm)

 

참고 사이트 
http://www.explainth.at/en/css/units.shtml

 

17. CSS 브라우져 호완성 표

 

참고사이트 
#1 : http://www.quirksmode.org/css/contents.html
#2 : http://www.webdevout.net/browser-support-css
#3 : http://vzone.virgin.net/sizzling.jalfrezi/stylebml.htm

18. 디자인 멀티 컬럼 CSS

 

CSS 멀티 컬럼 레이아웃 잡을 때 도움되는 참고 사이트 

 

참고사이트 
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.alistapart.com/articles/holygrail
http://www.alistapart.com/articles/fauxcolumns/
http://www.alistapart.com/articles/multicolumnlayouts
http://24ways.org/2008/absolute-columns

 

19. 공짜 CSS 에디터

http://notepad-plus-plus.org/
http://www.hostm.com/simplecss-download.m
http://www.athlab.com/Astyle/index.html#Features

 

 

 

20. CSS Media Types 의 이해

 

http://www.w3.org/TR/CSS2/media.html
http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml
http://www.yourhtmlsource.com/stylesheets/cssmediatypes.html

 

출처 : http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/

 

* 짧은 영어로 이해하려고 애썼어요, 오타나 잘못된 정보 보이시면 댓글 달아주시면 감사드려요.