CSS

"CSS is awesome."

— CSS를 사랑하고 증오하는 전 세계 프론트엔드 개발자들의 외침.

웹페이지의 시각적 디자인, 레이아웃, 스타일링을 담당하는 표준 마크업 보조 언어. ~~디자이너가 준 시안대로 1픽셀의 오차도 없이 화면을 배치하기 위해 오늘도 수십 번 크롬 개발자 도구를 껐다 켜는 개발자들의 애환 그 자체(...)~~

1. 개요

CSS(Cascading Style Sheets)는 HTML로 작성된 문서의 표현을 제어하는 스타일시트 언어이다.

HTML이 웹페이지의 '뼈대(Skeleton)'라면 CSS는 거기에 입히는 '피부와 옷(Fashion)'이라고 볼 수 있다.

이름에 들어간 Cascading(폭포수)이 뜻하듯이, 스타일이 상위 요소에서 하위 요소로 흐르듯 상속되며, 우선순위에 따라 덮어씌워지는 독특한 규칙을 가지고 있다.

이 규칙이 너무나도 복잡하고 예외가 많아, 초보자들은 물론이고 경력이 쟁쟁한 백엔드 개발자들조차 CSS 앞에서는 쩔쩔매는 경우가 허다하다.

과거 웹의 극초기에는 레이아웃을 잡기 위해 HTML의 <table> 태그를 남용하거나, 이미지 주변에 텍스트를 배치하기 위해 만든 float 속성을 억지로 땡겨와 화면 전체 레이아웃을 맞추는 해킹성 기법을 썼다.

조금만 수치를 잘못 입력해도 레이아웃이 도미노처럼 무너져 내리는 대참사가 일상이었다.

현대 웹 레이아웃은 수평/수직 정렬을 너무나 쉽게 만들어주는 Flexbox와 바둑판 모양의 2차원 그리드를 배치하는 Grid의 등장으로 신세계를 맞이했다.

이제는 요소를 정중앙에 배치하기 위해 인터넷을 30분 동안 뒤질 필요 없이, display: flex; justify-content: center; align-items: center; 세 줄만 입력하면 정중앙 배치가 해결된다.

"네모난 박스 안에 'CSS is Awesome' 글자를 적었는데, 글자가 박스 밖으로 삐져나온 짤방"

전 세계 개발자라면 한 번쯤은 봤을 유명한 머그컵 및 티셔츠 이미지다.

CSS의 기본 동작 규격(Box Model)이 직관적이지 않아 글자가 영역을 초과(overflow)해 깨져버리는 현상을 유머러스하게 풍자한 드립이다.

개발자들은 무언가 디자인이 엉망진창으로 꼬여서 화면이 깨질 때마다 이 짤방을 소환하며 자조하곤 한다.

화면에 팝업이나 모달(Modal) 창을 띄울 때, 무조건 다른 모든 요소보다 위에 보이게 만들고 싶어서 스타일 속성에 z-index: 9999 혹은 999999 같은 허무맹랑한 숫자를 적어 넣는 꼼수다.

이러한 코드가 누적되면 나중에는 새로 만든 모달이 안 보여서 z-index: 9999999를 주고, 그 다음엔 또 더 큰 숫자를 주는 무한 루프 경쟁에 빠지게 된다. 현대에는 이를 방지하기 위해 정교한 레이어링 시스템을 구축하는 것이 국룰이다.

애니메이션까지 구현하는 현대 CSS: CSS는 프로그래밍 언어가 아니라고 여겨지지만, 매년 기능이 확장되어 현재는 미디어 쿼리(Media Query)를 통한 동적 반응형 웹 구현은 물론, CSS 변수(Custom Properties), 간단한 계산식(calc()), 그리고 부드러운 전환 효과(Transition)와 화려한 3D 애니메이션까지 자바스크립트의 도움 없이 구현할 수 있게 되었다.
전설적인 정렬 질문: 전 세계 개발자 커뮤니티인 Stack Overflow에서 가장 조회수가 높은 질문 중 하나는 바로 "How to center a div? (div 요소를 정중앙에 어떻게 정렬하나요?)"이다.¹
클래스 떡칠의 대세, Tailwind: 최근에는 CSS를 순수하게 짜는 대신, CSS-in-JS 라이브러리(Styled-components 등)나 유틸리티 클래스 프레임워크인 Tailwind CSS 등을 사용하여 스타일을 코드레벨에서 효율적으로 관리하는 방식이 현업의 주류로 자리 잡았다.²

Flexbox가 보편화되기 전에는 절대 경로(position: absolute)와 음수 여백(margin-top), 혹은 변형(transform: translate(-50%, -50%)) 등을 혼용해야 해서 구현이 정말 까다로웠다. ↩
Tailwind CSS는 클래스명을 마구 적어야 해서 HTML 코드가 다소 지저분해 보인다는 비판을 받지만, 생산성이 극도로 높다는 이유로 현재 어마어마한 인기를 구가하고 있다. ↩