차근차근/HTML CSS

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

예쁜꽃이피었으면 2014. 8. 19. 09:39

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



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



구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다.
CSS 관련 해서 참고 하시고 많은 도움 받았으면 합니다.
 
 
 
0.CSS의 기본적인 형태 및 속성 설명 

링크 : http://ko.learnlayout.com/
 
1.Use Reset.css
 
ff, ie 등 브라우져가 처리 하는 방법이 다릅니다. 동일하게 재설정 할 필요가 있습니다.
 
프레임워크가 사용하는 몇몇 reset.css 안내
 

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
    }
 

3. class 와 ID 이해

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

4. <li> 유용한 li
 
*  li 메뉴,리스트 등을 만들 때 아주 좋습니다.
 
 
5. table 를 버리고 , div 사용하도록 노력
 
div 사용하면 스타일이 유연하게 변경 할 수 있습니다.
, table 은 고정 되어 있습니다
 
참고 사이트
 
6. css 디버그 툴
 
css 이해하는데 도움이 되고, 문제 원인을 쉽게 발견 할 수 있습니다.
 
참고사이트
 

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 을 이해하는데 상당히 도움이 됩니다.
 
참고사이트
 
 
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 로 디자인 할 수 있습니다
 
참고 사이트

 
13. css를 웹사이트 적용할지 도움을 받으세요
 
css 가지고 멋진 사이트를 만들고 싶으시면 아래의 참고사이트를 확인하고 도움을 받으세요
 
참고 사이트
 
 
14. 둥근 모서리 코너 css
 

 
15. Keep CSS Codes Clean ( CSS 소스 정리 )
css 코드가 난장판이면 , 리팩토리 하느라 시간을 낭비 하지 마세요
 
아래의 주소에서 리팩토링을 해주네요. 
 
[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)
 
 
17. CSS 브라우져 호완성 표
 

18. 디자인 멀티 컬럼 CSS
 
CSS 멀티 컬럼 레이아웃 잡을 때 도움되는 참고 사이트 
 
 
19. 공짜 CSS 에디터
 
 
 
20. CSS Media Types 의 이해
 
 
 
* 짧은 영어로 이해하려고 애썼어요, 오타나 잘못된 정보 보이시면 댓글 달아주시면 감사드려요.


반응형