[CSS] CSS란 무엇인가?

CSS

CSS란 무엇인가?

---

 

웹 페이지에 예쁜 옷을 입히자

 

CSS는 웹 페이지에 예쁜 옷을 입히는 것과 같다고 생각하면 된다. HTML은 사람의 몸으로 비유했을 때는 사람의 뼈대와 같고 CSS는 그 뼈대 위의 피부, 옷과 같은 스타일을 입힐 수 있는 것을 의미한다. 다시 정리하자면 CSS(Cascading Style Sheets)는 웹 페이지의 스타일(디자인, 레이아웃 등)을 정의하기 위한 언어이다.

 

따라서 CSS는 HTML 요소들이 화면에 어떻게 보일지를 기술하고 여러 웹 페이지의 레이아웃을 한 번에 컨트롤할 수 있기 때문에 매우 효율적이다. CSS 파일로 스타일을 저장해서 전체 웹 페이지에 한 번에 적용할 수 있기 때문에 많은 작업을 줄일 수 있다. 

 

W3C 표준화 제정 단계

CSS를 배우기에 앞서서 W3C라는 곳에서 제정해 놓은 표준화 제정 단계에 대해서 꼭 알고 시작을 해야 하기 때문에 한 번 살펴보자.

 

CSS는 지속적으로 보안이 되고 있고, 새로운 기술 사양이 추가되고 있다. W3C는 추가되고 있는 신규 기술 사양에 대해서 표준화 제정 단계를 4단계로 구분해서 사용자에게 공개된 기술 사양이 어느 상태에 있는지 알려준다. 또한, W3C 기술문서의 표준화 제정 단계는 웹 기술을 표준화하기 위해서 W3C의 워킹그룹이 따라야 하는 여러 절차와 요구사항이다. 아래의 목록을 한 번 살펴보자.

• WD(Working Draft) - W3C가 그 멤버뿐만 아니라, 대중, 다른 기술 단체 등 여러 커뮤니티에 검토를 받기 위해 공개한 문서로 초안 단계이다.
• CR(Candidate Recommendation) - 충분히 검토를 받고 테스트를 거쳐서 워킹그룹의 기술적인 요구사항이 충족이 된 단계로, 실질적으로는 CR 단계가 된 기술 사용은 실무에서 적용되기 시작한다.
• PR(Proposed Recommendation) - 광범위한 기술적인 구현과 검토가 거의 모두 완료된 단계로 최종 승인을 얻기 위해 검토하는 단계이다.
• REC(W3C Recommendation) - 승인이 완료되어 표준화가 완료된 단계이다.

보통 CSS를 사용할 때 본인이 사용하는 CSS가 현재 어떤 단계인지, 사용해도 되는지의 여부는 사실 잘 따지지 않고 사용하는 경우가 많다.(필자도 포함) 그래서 그걸 방지하기 위해서 caniuse.com이라는 사이트가 있다. 여기에 들어가면 본인이 사용하고 있는 CSS 사양에 대해서 지금 어떤 단계에 있는지를 전부 확인할 수 있고, 어떤 브라우저(크롬, 에지, 파이어폭스 등)에 적용되고 안되는지 등도 확인이 가능하다. 

 

caniuse.com에서 키워드 검색

 

홈페이지에 들어가서 검색창에 위와 같이 예를 들어, "CSS grid"라고 검색하였을 때 파란색으로 표시한 부분을 보면 아직 CR단계인 것을 확인할 수 있다. 하지만 CSS grid는 이미 실무에서 광범위하게 사용되고 있다. 따라서 CR 단계이지만 실무에서도 사용하고 있다는 것 또한 확인할 수 있다. 

 

하지만 주의할 점은 같은 CR 단계라도 초기 CR 단계와 후기 CR 단계 같은 개념으로 위에 사진에서도 확인할 수 있듯이 현재 얼마나 많은 브라우저에서 적용하고 있는지 또한 살펴봐야 한다. 그래서 CR 단계이지만 이미 모든 브라우저에서 지원을 하고 있다면 사용해도 된다고 생각하면 된다. 

 

표에서 보면 빨간색도 있고 초록색도 있다, 초록색은 지원이 되는 버전들이고 빨간색은 지원이 되지 않음을 의미한다. 그래서 버전 위에 마우스를 가져다 대면 아래와 같이 상세한 정보를 확인할 수 있다. 

 

Chrome 57

 

위의 이미지를 보면 Notes 항목에서 문제가 있었던 점 또한 기술되어 있다. 간단하게 정리하면 표에서 초록색으로 되어있는 버전은 지원이 되는 것이고 빨간색은 지원이 되지 않는 점만 인식하고 있으면 될 거 같다. 

 

지금까지 CSS가 무엇이고 CSS를 사용할 때 표준화 제정 단계를 확인하는 방법에 대해서 알아보았다. 하지만 대다수의 우리가 사용하는 기본적인 CSS 문법들은 사실 위와 같은 사항들을 확인할 필요는 없다. 다만, CSS도 신규 사양이 계속 추가가 되기 때문에 그런 것들에 대해서는 꾸준히 확인을 해야 될 필요가 있다고 생각한다.