CSS

CSS Cascading Style Sheet
<colbgcolor=#fff,#1c1d1f><colcolor=#000000,#ffffff> 개발	W3C
발표일	1996년 12월 17일
종류	스타일 시트 언어

1. 개요

#!syntax css
body::before {content: 'Hello World';}

2. 사용 이유

3. 레벨, 모듈 및 스냅샷

4. 문법

4.1. 선택자

4.2. 속성

4.2.1. 나무위키에서 사용 가능한 속성

[ 전체 목록 펼치기 · 접기 ]

* background # - [url불가]

• background-attachment #
• background-clip #
• background-color #
• background-image # - [url불가]
• background-origin #
• background-position #
• background-repeat #
• background-size #
• border #
• border-bottom #
• border-bottom-color #
• border-bottom-left-radius #
• border-bottom-right-radius #
• border-bottom-style #
• border-bottom-width #
• border-collapse #
• border-color #
• border-image #[url불가][11]
• border-image-outset #
• border-image-repeat #
• border-image-slice #
• border-image-source #
• border-image-width #
• border-left #
• border-left-color #
• border-left-style #
• border-left-width #
• border-radius #
• border-right #
• border-right-color #
• border-right-style #
• border-right-width #
• border-spacing #
• border-style #
• border-top #
• border-top-color #
• border-top-left-radius #
• border-top-right-radius #
• border-top-style #
• border-top-width #
• border-width #
• box-decoration-break #
• box-shadow #
• box-sizing #
• break-after #
• break-before #
• break-inside #
• clear #
• color #
• display #: 'block, flex, inline, inline-block, inline-flex, inline-table, list-item, none, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group' 한정으로 사용할 수 있다.
• float #
• font #
• font-family #
• font-feature-settings #
• font-kerning #
• font-language-override #
• font-size #
• font-size-adjust #
• font-stretch #
• font-style #
• font-synthesis #
• font-variant #
• font-variant-alternates #
• font-variant-caps #
• font-variant-east-asian #
• font-variant-ligatures #
• font-variant-numeric #
• font-variant-position #
• font-weight #
• height #
• letter-spacing #
• list-style #
• list-style-image #
• list-style-position #
• list-style-type #
• margin #
• margin-bottom #
• margin-left #
• margin-right #
• margin-top #
• max-height #
• max-width #
• min-height #
• min-width #
• padding #
• padding-bottom #
• padding-left #
• padding-right #
• padding-top #
• text-align #: left, right, center 한정으로 사용할 수 있다.
• text-align-last #
• text-combine-upright #
• text-decoration #
• text-decoration-color #
• text-decoration-line #
• text-decoration-skip[Experimental] #
• text-decoration-style #
• text-emphasis #
• text-emphasis-color #
• text-emphasis-position #
• text-emphasis-style #
• text-indent #
• text-orientation #
• text-overflow #
• text-shadow #
• text-transform #
• text-underline-position #
• text-wrap[Experimental] #
• vertical-align #
• width #
• word-break #
• word-spacing #
• word-wrap #

4.3. 자료형

5. 라이브러리

• 디자인 라이브러리
• Bootstrap
  CSS를 주로 사용하는 유명한 라이브러리로 트위터 부트스트랩#이 있다. 거대한(약 120KB 정도) 단일 CSS 파일 하나로 된 라이브러리이다. 일종의 웹사이트 테마 라이브러리로 디자이너 없이도 준수한 퀄리티의 사이트 UI를 뽑아낼 수 있다. 부트스트랩 라이브러리를 또 확장하는 서드 파티 라이브러리도 많이 나와 있다.
• Tailwind CSS
• Semantic-UI
  부트스트랩과 같은 디자인 라이브러리이다. 부트스트랩과는 다른 분위기를 줄 수 있다.
• W3.CSS
  W3 Schools에서 밀어주는 CSS 라이브러리이다. 심플한 분위기를 낼 수 있다.

• 기능 보완 라이브러리
• Prefix Free
  자바스크립트로 된 CSS 라이브러리이다. CSS Vendor Prefix 작업을 자동으로 진행해 준다.
• Fontello
  벡터 이미지로 된 아이콘을 HTML에 추가할 수 있게 해 주는 CSS 라이브러리이다. 소개된 방법을 익히면 CSS에서의 조작을 통해 아이콘의 색을 바꾸고 회전시키는 등의 효과를 줄 수 있다.

6. 주의 사항

7. 기타

8. 단점과 보완