CSS 기초: 문법, 적용 방법, 단위

CSS는 "어떤 요소를(선택자) 어떻게 바꿀지(선언)"를 적는 언어다. 문법 자체는 단순하지만, 스타일을 어디에 작성하느냐와 어떤 단위를 쓰느냐에 따라 유지보수성과 반응형 대응이 크게 달라진다.

문법

h1 {
  color: blue;
  font-size: 15px;
}

스타일 적용 방법 3가지

1. 인라인 스타일 (style 속성)

<div style="color: red">Red</div>

• 장점: 해당 요소에만 적용되고 우선순위가 높다. JavaScript로 요소마다 다른 값(예: 배경 이미지 URL)을 넣을 때 유용하다.
• 단점: 재사용·확장이 어렵다.

2. 내부 참조 (<style> 요소)

<head>
  <style>
    .box { color: red; }
  </style>
</head>

• 장점: 페이지별로 필요한 스타일만 지정하고, JavaScript(CSSOM)로 제어하기 쉽다. styled-components 같은 CSS-in-JS 라이브러리가 이 방식으로 동작한다.
• 단점: 여러 페이지가 공유하는 공통 스타일을 관리하기 어렵다.

3. 외부 참조 (.css 파일 + <link>)

<head>
  <link rel="stylesheet" href="style.css" />
</head>

• 장점: 공통 스타일을 한 곳에서 관리할 수 있다.
• 단점: 파일을 받기 위한 HTTP 요청이 한 번 더 생긴다. CSS 구조를 잘 설계하지 않으면 공통 스타일이 서로 충돌하기 쉽다.

크기 단위

수와 퍼센트

line-height는 단위 없는 수로 쓴다. line-height: 1.5는 자식에게 비율이 상속돼 자식의 글자 크기마다 다시 계산되지만, line-height: 24px나 150%는 계산된 길이가 상속돼 큰 글자의 줄이 겹친다.

절대 길이

모두 같은 기준(1in = 96px)으로 풀린다. 화면의 물리 크기는 기기마다 달라 cm·in은 화면에서 실제 자와 맞지 않는다. 인쇄 스타일시트에서 쓴다.

상대 길이

뷰포트 단위도 상대 단위다. 기준은 기기 화면이 아니라 그 문서가 그려지는 창(iframe·웹뷰일 수 있다)이다.

글자 크기는 rem·em으로 쓴다. html에 font-size를 고정하지 않으면 사용자가 OS·브라우저에서 키운 기본 글자 크기가 상대 단위에 반영된다. px로 쓰면 그 설정을 무시한다.

rem과 em은 섞어 쓴다. 모든 글자를 rem으로 쓰고 루트 크기만 바꾸면 전체가 똑같은 비율로 커지고 줄어, 큰 제목은 너무 커지고 작은 글은 너무 작아진다. 대신 모듈(카드·사이드바)의 뿌리에 rem, 그 안의 글 요소에 em 을 쓰면 모듈 하나의 font-size만 바꿔 그 안의 비율을 유지한 채 모듈 단위로 키우고 줄일 수 있다.

.sidebar-widget { font-size: 0.875rem; }   /* 모듈: 루트 기준 */
.sidebar-widget h3 { font-size: 1.25em; }  /* 글 요소: 모듈 기준 */
.sidebar { container-type: inline-size; }
@container (inline-size < 20rem) { .sidebar-widget { font-size: 0.8125rem; } }  /* 사이드바가 좁으면 모듈째 줄인다 */

과거에는 루트에 html { font-size: 17px }처럼 px을 박고 미디어 쿼리로 바꿨지만, 사용자 설정을 덮어쓰므로 지금은 루트를 비워 두거나 %로 쓴다. 크기 사이를 부드럽게 오가는 clamp(최소, 선호, 최대)와 다른 수학 함수는 CSS 함수에 있다.

각도와 해상도

색상 표현

투명도(alpha)는 / 뒤에 쓴다. 쉼표로 구분하는 rgba(255, 0, 0, 0.5)·hsla()는 옛 문법이지만 여전히 동작하고, 지금은 rgb()·hsl() 하나로 투명도까지 쓴다. 색상 체계를 변수로 짜는 법은 CSS 커스텀 속성으로 색상 체계 짜기에 있다.

16진수 색은 #RRGGBB 꼴로 빨강·초록·파랑을 두 자리씩 00ff(0255)로 적는다. 두 자리가 같은 값이면 #f00(= #ff0000)처럼 세 자리로 줄일 수 있고, 뒤에 두 자리를 더 붙이면 투명도다(#RRGGBBAA, 네 자리 축약 #RGBA). 투명도도 16진수라 50%는 80, 75%는 BF(= 191 ≈ 255의 75%), 0%는 00이다. 디자인 도구가 Hex로 색을 주는 경우가 많아 가장 흔히 쓰인다.

넓은 색역과 색 공간

rgb()·hsl()·Hex는 모두 sRGB 색역 안의 색만 표현한다. 최신 화면은 그보다 넓은 색을 낸다.

• OKLCH는 색역에 묶이지 않아 oklch(80% 0.4 200)처럼 어떤 화면도 못 내는 색도 적을 수 있다. 화면이 못 내는 색은 브라우저가 가까운 색으로 바꾼다(gamut mapping). 화면별로 직접 고르려면 @media (color-gamut: p3)를 쓴다.
• 실무에서는 Hex·rgb()를 읽을 줄 알고, 값을 손으로 조절할 때는 oklch()나 hsl()처럼 채널 뜻이 분명한 형식을 쓴다.

특수 키워드와 시스템 색

• transparent: 완전 투명. background-color의 초깃값이다.
• currentColor: 그 요소의 color 계산값. border-color·box-shadow·SVG fill의 기본값이 이것이라, 글자색만 바꾸면 테두리·아이콘이 따라 바뀐다.
• 시스템 색(Canvas, CanvasText, ButtonBorder, Highlight 등): OS 테마가 정한 색. 고대비 모드처럼 사용자가 색을 강제할 때 맞춰 쓴다. 대소문자는 구분하지 않는다.

색 조작

.hover   { background: color-mix(in oklch, var(--brand), black 15%); }   /* 15% 어둡게 */
.dimmer  { color: oklch(from var(--brand) calc(l * .9) c h); }            /* 상대 색상 문법: 밝기만 90% */
.complement { color: oklch(from var(--brand) l c calc(h + 180)); }       /* 보색 */

• color-mix(in 색공간 [방향], 색1 비율, 색2): 같은 두 색도 어느 색 공간에서 섞느냐에 따라 결과가 다르다. 색상이 있는 공간은 shorter(기본)·longer·increasing·decreasing으로 색상환을 도는 방향을 고른다.
• 상대 색상 문법 함수(from 원래색 채널…): 원래 색을 그 함수의 채널(l c h, r g b)로 풀어 주고, calc()로 바꾸거나 다른 값으로 갈아 끼운다.
• 동적으로 만든 색은 대비가 부족해지기 쉽다. 파생 색도 대비를 확인한다(색과 움직임의 접근성).

색은 <color> 타입을 받는 곳이면 어디든 같은 문법으로 쓴다: color, background-color, border-color, outline-color, text-decoration-color, text-shadow, box-shadow, 그라디언트(CSS 배경과 그라디언트).

글꼴 기울이기: font-style

이탤릭체는 font-style로 지정한다. Tailwind 같은 유틸리티 클래스(italic) 없이 SCSS나 순수 CSS를 쓸 때 필요하다.

.coming-soon { font-style: italic; }

속성 선언 순서

한 선택자 안에서 속성을 어떤 순서로 쓸지 정해 두면 코드를 훑기 쉽고 리뷰에서 빠진 속성이 잘 보인다. 네이버의 CSS 코딩 규칙을 참고한 순서는 다음과 같다. 레이아웃에 큰 영향을 주는 것부터 쓰는 흐름이다.

Stylelint의 stylelint-order 같은 플러그인으로 순서를 자동으로 맞출 수 있다.

브라우저 기본 스타일

브라우저는 요소마다 기본 스타일(User Agent Stylesheet)을 갖고, 그 값이 브라우저마다 조금씩 다르다. 한 브라우저에서만 확인하면 다른 브라우저에서 뒤늦게 어긋남을 발견한다. 대응은 두 겹이다. 작성한 CSS를 같은 출발점에서 시작하도록 기본 스타일을 먼저 정리하는 파일을 두고, 그래도 브라우저마다 다른 값은 명시한다.

리셋과 노멀라이즈

지금은 브라우저 간 차이가 많이 줄어 두 방식을 섞은 짧은 현대식 리셋을 쓰는 경우가 많다. Tailwind의 Preflight도 modern-normalize 위에 리셋을 얹은 형태다.

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

리셋은 컴포넌트 스타일을 이기면 안 된다. 리셋 전체를 @layer reset { … }에 넣거나, 선택자를 :where()로 감싸 명시도를 0으로 두면 어떤 클래스로도 덮을 수 있다(선택자와 우선순위). ITCSS에서는 이 자리가 Generic 층이다(CSS 설계 방법론). :focus-visible 윤곽선, prefers-reduced-motion 처리 같은 접근성 기본값은 지우지 않거나 다시 넣는다.

사례: Safari의 버튼 글자색

<button>에 color를 지정하지 않으면 iOS·macOS Safari는 버튼 글자를 파란색(-apple-system-blue)으로 표시한다. 다른 브라우저에서는 검은 글씨로 보여 Safari에서만 뒤늦게 발견되기 쉽다. -apple-system-blue는 Apple의 HIG(Human Interface Guidelines) 디자인 언어에 맞춘 시스템 색상 키워드다.

위 리셋의 button { color: inherit; } 한 줄이 이 문제를 미리 막는다. 폼 요소가 부모의 글꼴·색을 물려받지 않는 것도 같은 종류의 기본 스타일 차이다.

핵심 정리

• CSS = 선택자 + { 속성: 값; } 선언의 묶음.
• 공통 스타일은 외부 파일, 컴포넌트 단위 스타일은 내부/CSS-in-JS, 동적인 개별 값은 인라인으로 나눠 쓴다.
• 반응형에는 rem, %, vw/vh 같은 상대 단위가 유리하다. 글자 크기는 사용자 설정을 존중하도록 rem·em으로. 자세한 방법은 반응형 디자인에 있다.
• 속성은 레이아웃에 큰 영향을 주는 것부터 순서를 정해 쓴다.
• 브라우저마다 기본 스타일이 다르다. 짧은 리셋으로 출발점을 맞추고, 버튼 글자색 같은 기본값은 명시한다.
• 색 값을 손으로 조절할 땐 oklch(), 파생 색은 color-mix()와 상대 색상 문법으로 만든다.

관련 노트: CSS 함수: calc()·clamp()와 수학 함수, CSS 커스텀 속성으로 색상 체계 짜기, 반응형 디자인과 다국어 타이포그래피, CSS 선택자와 우선순위