CSS

1. 개요2. 본문3. 선택자4. 버전5. 라이브러리6. 주의사항7. 기타8. 단점과 보완

Cascading Style Sheet

1. 개요[편집]

HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어.

CSS의 C가 Cascading의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다.[1]

과거에는 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를 사용할 수 있다. 즉 웹페이지를 제작할 경우 글꼴 등의 웹페이지의 스타일을 저장해두면 웹페이지의 한가지 요소만 변경해도 관련되는 전체 페이지의 내용을 한꺼번에 변경할수 있어 일관성을 유지하고 작업시간도 줄이고 트래픽을 줄이는 효과도 있다. 트래픽은 모바일 환경에서 더더욱 장점으로 작용하는데, 인터넷 무제한 요금제(정액제)가 아닌 이상 패킷을 최대한 적게 쓰는 것이 요금폭탄을 피하는 최선의 방법이다. 또한 로딩 속도가 빨라지는 장점도 있다.

단, CSS는 HTML을 완벽하게 습득한 상태라 할지라도 그 용법이나 문법에 상이한 차이를 가지고 있기 때문에 상당 시간의 연습과 실전 경험이 필요하다. 특히 인터넷 익스플로러 구버전(6~7)[3]에서는 자신의 의도와는 다른 결과물을 출력하는 경우가 많다. 이 때문에 IE 6, 7을 지원하기 위해 작업하다 보면 CSS에 각종 핵[4]이 우후죽순으로 들어서는 것을 볼 수 있다. CSS 최신 표준안(버전 2.1)의 지원이 IE8에서야 제대로 이루어졌기 때문에 발생하는 일이다. 2010년대에는 이 자리를 Safari가 꿰찼다(...).[5]

3. 선택자[편집]

해당 문서 참조.

4. 버전[편집]

버전	공개일	내용
_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의 각종 오류를 수정한다. 일종의 핫픽스. IE는 이 표준안을 IE8에서야 모두 지원한다. CSS 2.1 표준안(영문)
CSS 2.2	2016-04-12	정식 명칭은 CSS Level 2 Revision 2. 하지만 아직 초안 단계이며 CSS의 최신 표준안이 _아니다_.

Level 3도 논의 중이고, 여기부터는 글자의 특수효과나 간단한 애니메이션도 CSS로 구현할 수 있게 되었다.

브라우저들이 지원을 늘려와서 거의 표준화 되어 있고, IE9도 일부 기능을 지원한다. 현재는 CSS3 의 애니메이션 기능과 3d 변환 기능 정도는 (IE 구버전을 제외한)주요 브라우저에서 표준으로 지원한다. 그래픽 툴에서 볼 수 있는 혼합옵션까지도 지원한다. 아직 표준안이 완성되지 않았기에 브라우저별 지원 범위가 다르다.

Level 4도 논의 중에 있다.

5. 라이브러리[편집]

CSS 라이브러리는 웹 사이트의 디자인을 빠르게 선택할 수 있는 라이브러리와 기능을 보완해주는 라이브러리로 구성되어 있다.

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

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

6. 주의사항[편집]

CSS는 HTML과 달리 문법에 엄격하다. 구두점 하나만 빼먹는 실수를 해도 전체 CSS파일의 로딩에 실패한다. 따라서 CSS를 편집할 때는 코드의 무결성을 검증해줄 수 있는 IDE나 코드 에디터를 사용하는 게 좋다.

또한 단일 객체에 대해 여러 개의 CSS 문법이 물려 있을 경우 가장 나중에 서술된 문법을 따른다(애시당초 CSS의 본말이 Cascading Style Sheet ─ 내리꾸미기 서식─ 이다). 물론 우선적으로 적용되어야 하는 문법에 !important 키워드를 넣어 제어할 수는 있다. 그러나 !important 사용은 나쁜 습관이고 스타일시트 내 자연스러운 종속을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 한다. CSS 명시도

CSS를 어떤 식으로 불러오는가에 따라서도 우선순위가 달라지는데 개별 태그의 style="..." 속성 사용(inline style)이 별도의 우선순위를 갖고, <style> 태그 사용(internal style)과 <link> 태그 사용(external style)은 우선순위가 동등하여 위의 글처럼 나중에 서술된 속성이 반영된다. 그러나 웹 브라우저나 네트워크 환경에 따라 호이스팅 [6]이 발생할 수 있기 때문에 반드시 웹 브라우저에서 확인해야 한다.

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에서 의도한 대로의 오류가 생길 때 이를 검사해내는 프로그램이 유용하게 쓰인다. 그 중에서도 파이어폭스 및 구글 크롬의 확장 프로그램인 파이어버그를 으뜸으로 쳐준다.

처음하는 CSS: 만약 전체적으로 간단하게 CSS에 대해서 알아보고 싶다면 방문해 보는 것도 좋다.

8. 단점과 보완[편집]

CSS 장점은 작성이 쉽다는 것이지만, 요소가 많아지고 이에 따라 코드가 늘어나기 시작하면 유지보수에 어려움이 많아진다. 특히 코드가 1000줄을 넘어갈 때 주석 처리가 되어 있지 않으면 팀 프로젝트에 어려움을 줄 수도 있다. CSS의 선택자 개념을 잘 이용하면 이를 보완할 수 있으며, 후술되는 less등의 기술은 기존 CSS에서 구현되지 않은 조건별 CSS구성을 용이하게 할 수 있는 수단이다. 이를 보완하기 위해 만들어진 기술로 LESS, Sass, Stylus등이 있다. 참조: LESS vs Sass vs Stylus

특히 Sass의 경우는 W3 Schools에서도 다룰 정도로 유명해졌으며, 연산과 변수 및 함수 기능을 제공하여 코드의 중복을 줄이고 유지보수를 용이하게 해 준다.

[1] 다만 예외로 마진, 패딩, 보더 등의 박스모델 관련 속성은 상속되지 않는다. 물론 inherit 값을 줘서 강제로 상속시킬 순 있다.

[2] 이것은 나모 웹에디터와 같은 WYSIWYG의 폐해가 컸다. 또한 WYSIWYG의 특성상 쓸데없는 것들이 많이 추가되기 때문에 문서가 상당히 무거워진다.

[3] 특히 국내 회사 내부 인트라넷에서 돌아가는 프로그램은 액티브X의 원활한 구동을 위해 IE 6을 사용하는 경우가 많았다. 현재는 전부 IE11이상으로 강제업그레이드를 해 버려서 옛말이다.

[4] IE의 버그(...)를 이용하여 CSS 구문을 IE 6, 7에서만 먹히는 걸로 집어넣는 기법을 말한다. 물론 웹표준 검사기에서 걸린다.

[5] 폼 요소, IFRAME 등 유독 사파리에서만 다르게 출력되는 경우가 허다해 사파리만을 위한 태그를 추가로 짜넣어야 한다.

[6] 원래라면 나중에 서술되었음에도 먼저 서술된 문법을 덮어쓰지 못하는 현상.

CSS