초보자분들을 위한 CSS 20가지 유용한 TIPS
페이지 정보
본문
구글 웹사이트 서핑 중 좋은 정보 인듯 해서 공유 차원에서 글을 적습니다.
CSS 관련 해서 참고 하시고 많은 도움 받았으면 합니다.
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 @I-port Vs <link>
css 를 불러오는 2가지가 있습니다. @i-port, <link>
<link href="styles.css" type="text/css" />
<style type="text/css">@i-port url("styles.css");</style>
@i-port 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/
