| CSS Cascading Style Sheet | |
| | |
| <colbgcolor=#fff,#1c1d1f><colcolor=#000000,#ffffff> 개발 | W3C |
| 발표일 | 1996년 12월 17일 |
| 종류 | 스타일 시트 언어 |
| | |
[clearfix]
1. 개요
HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일 시트 언어.CSS의 C가 Cascading[1]의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다. 다만 예외로 마진, 패딩, 보더 등의 박스모델 관련 속성은 상속되지 않는다. 물론 inherit 값을 줘서 강제로 상속시킬 순 있다.
2. 사용 이유
과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었다. 다시 말해서 온갖 레이아웃, 디자인 정보를 HTML 안에 욱여넣다 보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았다. 표를 작성해야 하는<table> 태그가 레이아웃을 구성하는 용도로 쓰이는 등으로 인해 HTML 소스코드만 보면 이 문서가 어떤 문서인지 전문가조차 알기 힘든 상황이었다.[2]이에 따라 W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!" 라는 목적으로 CSS를 발표했다. 거기에 따라
bgcolor 등과 같이 HTML에서 디자인에 관련된 요소들은 전부 사용하지 말 것을 권고하고 있다. CSS 발표 이후로 HTML문서의 구조화를 도와주는 div, span, section 등의 새로운 태그가 도입되고 strike, font 등의 스타일 태그는 비권장 태그로 전환되다가 HTML5에서는 아예 삭제되었다. table은 표 형태의 데이터를 표현하는 용도에만 쓰도록 권고하면서 표의 구조화를 도와줄 thead, tbody태그가 새로 소개되었다.구조화된 HTML은 HTML 태그를 본연의 용도에 맞게 사용하는 것이다. 예를 들어 최상위 제목을 뜻하는
<h1> 태그는 문서의 제목 수준으로 쓰이며, 본문 문단은 <p> 태그로 나눈다. 이렇게 하면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다. 여기서 '알아보기 쉽다'에는 사람(프로그래머)뿐만 아니라 기계(웹 브라우저)역시 포함된다. 기계가 이해하기 쉬운 HTML은 다양한 포맷으로 출력 형식을 바꾸기 용이하고(CSS파일을 모바일용, PC용 등으로 각자 준비해 교체하는 방식으로 적용한다), 문서의 해독(파싱)속도가 빨라지며 동적인 기능을 구현하기가 더 쉬워진다. 그리고 대부분의 경우 구조화된 HTML이 과거의 비구조화 HTML보다 문서 크기가 상대적으로 작다.이렇게 하면 디자인에 필요한 부분은 CSS가 전담하기 때문에 용도의 구분이 보다 명확해지고, 웹디자이너와 웹프로그래머 간의 협업도 용이해진다. 게다가 CSS는 HTML문서에
<style>태그 안에 삽입할 수도 있지만 별도의 파일로 분리하는 것도 가능해서 다른 HTML에서도 동일한 CSS를 사용할 수 있다. 즉 웹페이지를 제작할 경우 글꼴 등의 웹페이지의 스타일을 저장해두면 웹페이지의 한가지 요소만 변경해도 관련되는 전체 페이지의 내용을 한꺼번에 변경할수 있어 일관성을 유지하고 작업시간도 줄이고 트래픽을 줄이는 효과도 있다.[3]단, CSS는 HTML을 완벽하게 습득한 상태라 할지라도 그 용법이나 문법에 상이한 차이를 가지고 있기 때문에 상당 시간의 연습과 실전 경험이 필요하다. Internet Explorer가 살아있던 시절, 특히 구버전(6~7)[4]에서는 자신의 의도와는 다른 결과물을 출력하는 경우가 많았다. 이 때문에 구버전을 지원하기 위해 작업하다 보면 CSS에 각종 핵[5]이 우후죽순으로 들어서기도 했다. CSS 2.1의 지원이 Internet Explorer 8에서야 제대로 이루어졌기 때문에 발생했던 일이다. Internet Explorer가 죽고 나서는 이 자리를 Safari가 꿰차게 되었다.[6]
3. 레벨, 모듈 및 스냅샷
처음 W3C에서 CSS 명세가 작성되었을 때는 하나의 문서로 작성된 CSS 명세를 만들어 Level을 올렸다. 따라서 전체 CSS Level이 아래와 같이 발표되었다.| 레벨 | 공개일 | 내용 |
| CSS 1 | 1996-12-17 | 정식 명칭은 CSS Level 1. 최초의 CSS 표준안이다. border 등이 처음 추가되었다. 자세한 사항은 문서를 참조. # |
| CSS 2 | 1998-05-12 | 정식 명칭은 CSS Level 2. :hover 같은 여러 selector와 value inherit 등이 처음 추가되었다. 자세한 사항은 문서를 참조. # |
| CSS 2.1 | 2011-06-07 | 정식 명칭은 CSS Level 2 Revision 1. CSS 2의 각종 오류를 수정한다. 일종의 핫픽스. Internet Explorer는 이 표준안을 Internet Explorer 8에서야 모두 지원한다. # |
| CSS 2.2 | 2016-04-12 | 정식 명칭은 CSS Level 2 Revision 2. # |
하지만 시간이 지나면서 CSS에는 더 많은 기능들이 추가되었고 그에 따라 CSS도 몸집이 점점 커지면서 CSS를 하나의 명세로 관리하는 것이 별로 좋지 않은 방식임을 알게 되었다. 결국 W3C는 CSS 명세를 기능별로 모듈화하는 방안을 채택하여 각 모듈의 레벨을 올리는 식으로 바뀌게 되었다. 이를 테면, 폰트는 CSS Fonts Level 3, 색깔은 CSS Color Level 4와 같이 따로 명세 문서를 관리 하는 식이다.
그리고 2.2까지 진행되었던 기존의 통합 CSS Level 대신 W3C는 매년 실무 그룹이 충분히 안정적이라고 생각하는 모듈을 모아놓은 CSS 스냅샷을 발표하고 있다. 전체 현황은 여기서 확인 할 수 있다.
따라서 대개 CSS 3이라고 하면 CSS 2.2 이후의 CSS를 칭하는 것이며, CSS 4는 존재하지 않는다.
브라우저마다 위 명세에서 구현하는 기능이 다 다르기 때문에 실제 프로젝트에 자신이 어떠한 CSS 기능을 쓰려고 한다면 Can I Use나 MDN과 같은 사이트를 통해 해당 기능의 브라우저 지원 범위를 확인하고 쓰는 것이 일반적이다.
4. 문법
4.1. 선택자
4.2. 속성
MDN CSS 페이지의 Properties를 보면 사용가능한 모든 CSS 속성들과 그 자세한 설명을 볼 수 있다.4.2.1. 나무위키에서 사용 가능한 속성
나무위키에서도wiki 문법을 통해 CSS를 적용할 수 있다. 하지만 CSS가 남용되는 것을 방지하기 위해 사용할 수 있는 속성에 제한이 있다. 만약 아래 목록에 없는 속성을 사용한다면 출력된 페이지에서는 해당 속성이 생략된 상태로 나온다. 대부분 속성의 값에는 모든 값이 허용되나, 예외[7]도 있다.- [ 전체 목록 펼치기 · 접기 ]
- * 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 #
- border-image-outset #
- border-image-repeat #
- border-image-slice #
- border-image-source #
- border-image-width #
- border-left #
- border-radius #
- border-right #
- 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. 라이브러리
CSS 라이브러리는 웹 사이트의 디자인을 빠르게 선택할 수 있는 라이브러리와 기능을 보완해주는 라이브러리로 구성되어 있다.- 디자인 라이브러리
- 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. 주의사항
CSS는 HTML보다 문법에 엄격한 편이다. 구두점 하나만 빼먹는 실수를 해도 전체 CSS파일의 로딩에 실패한다. 따라서 CSS를 편집할 때는 코드의 정확성 및 무결성을 검증해줄 수 있는 IDE나 코드 에디터를 사용하는 게 좋다.또한 단일 객체에 대해 여러 개의 CSS 문법이 물려 있을 경우 특정한 규칙에 따라 우선 순위가 가장 높은 스타일이 적용되기 때문에 주의해야 한다. 자세한 내용은 선택자 문서의 특이성 부분 참조.
7. 기타
HTML 태그의 외형적인 속성(HTML5에서 지원 중단)과 CSS가 서로 모순되는 경우는 외형적인 속성값을 무시하고 CSS대로 렌더링한다. 예를 들어<body bgcolor="red"> 이렇게 되어 있는데 CSS에서는 body {background-color: blue;} 이렇게 되어 있는 경우, bgcolor="red" 속성을 무시하고 CSS대로 바탕색을 파랑으로 칠한다.CSS 요소 선택자(CSS Selector)라는 게 있는데 이것은 jQuery에서 조작할 HTML요소를 선택할 때에도 사용한다. XML에 XPath가 있다면 HTML에는 CSS 셀렉터가 있다. 하도 이게 편하다 보니 바닐라 자바스크립트에서도 CSS 선택자를 그대로 쓸 수 있는 QuerySelector 함수가 생겼다.
CSS에서 의도한 대로의 오류가 생길 때 이를 검사해내는 프로그램이 유용하게 쓰인다. 그 중에서도 파이어폭스 및 구글 크롬의 확장 프로그램인 파이어버그를 으뜸으로 쳐준다. 이 기능은 모든 웹 브라우저가 기본 기능으로 채택하게 되었다.
8. 단점과 보완
CSS 장점은 작성이 쉽다는 것이지만, 요소가 많아지고 이에 따라 코드가 늘어나기 시작하면 유지보수에 어려움이 많아진다. 특히 코드가 1000줄을 넘어갈 때 주석 처리가 되어 있지 않으면 팀 프로젝트에 어려움을 줄 수도 있다. CSS의 선택자 개념을 잘 이용하면 이를 보완할 수 있으며, 후술되는 less등의 기술은 기존 CSS에서 구현되지 않은 조건별 CSS구성을 용이하게 할 수 있는 수단이다. 이를 보완하기 위해 만들어진 기술로 LESS, Sass, Stylus 등이 있다. 참조: LESS vs Sass vs Stylus특히 Sass의 경우는 W3 Schools에서도 다룰 정도로 유명해졌으며, 연산과 변수 및 함수 기능을 제공하여 코드의 중복을 줄이고 유지보수를 용이하게 해 준다.
[1] 폭포수처럼 떨어지는[2] 이것은 나모 웹에디터와 같은 WYSIWYG의 폐해가 컸다. 또한 WYSIWYG의 특성상 쓸데없는 것들이 많이 추가되기 때문에 문서가 상당히 무거워진다.[3] 트래픽 감소는 모바일 등 종량제 환경에서 장점으로 작용하는데, 인터넷 무제한 요금제(정액제)가 아닌 이상 패킷을 최대한 적게 쓰는 것이 요금폭탄을 피하는 최선의 방법이다. 또한 로딩 속도가 빨라지는 장점도 있다.[4] 특히 국내 회사 내부 인트라넷에서 돌아가는 프로그램은 ActiveX의 원활한 구동을 위해 Internet Explorer 6을 사용하는 경우가 많았다. 현재는 전부 Internet Explorer 11이상으로 강제업그레이드를 해 버려서 옛말이다.[5] Internet Explorer의 버그를 이용하여 CSS 구문을 Internet Explorer 6, 7에서만 먹히는 걸로 집어넣는 기법을 말한다. 물론 웹표준 검사기에서 걸린다.[6] 폼 요소, IFRAME 등 유독 사파리에서만 다르게 출력되는 경우가 허다해 사파리만을 위한 태그를 추가로 짜넣어야 한다. 거기다 사파리가 macOS나 iOS 전용이라 테스트하기가 Internet Explorer보다 번거롭다. Windows와 달리 macOS나 iOS는 가상머신에도 설치가 안 되고, 억지로 설치해도 오류가 상당히 많기 때문에 결국 애플 기기를 사야 된다. 그래서 웹 개발자 중에는 맥북을 개발용으로 쓰는 일도 많다.[7] text-align 속성은 center, left, right만 허용되며 다른 값을 적을 경우 생략된다.[Experimental] 일부 브라우저에서는 작동하지 않을 수 있다.[Experimental]