이 글은 프로그래밍 경험이 없는 분들을 대상으로 자바스크립트 웹 앱 제작법을 알려드리는 ‘웹 개발 배우기’ 시리즈의 일부인데요.
지난 시간에는 아무런 꾸밈이 없는 콘텐츠를 HTML로 만드는 법을 배웠는데요.
이번 시간에는 바로 그 콘텐츠에 스타일을 입히는 기술, CSS를 사용해 콘텐츠의 스타일을 설정하는 방법을 알아볼 겁니다.
배경색을 바꾸고, 다양한 글꼴을 사용하고, 요소들 사이에 수직 간격을 추가하는 등 정말 많은 것을 할 수 있거든요.
이번 챕터는 꽤 많은 내용을 비교적 빠르게 다루지만, HTML에 어떻게 스타일을 입히는지 탐험하는 과정은 정말 재미있을 거고, 이 글을 다 읽고 나면 아주 탄탄한 기초를 갖추게 될 겁니다.
HTML은 콘텐츠, CSS는 표현 #
‘CSS’는 ‘Cascading Style Sheets’의 약자인데요.
여기서 ‘스타일 시트’는 색상이나 글꼴 같은 HTML 요소의 스타일을 지정하는 규칙들이 모여있는 하나의 CSS 코드 덩어리입니다.
그리고 이 스타일 시트들은 ‘캐스케이딩(Cascading)’, 즉 여러 개가 겹쳐서 HTML의 표현에 영향을 줄 수 있다는 특징을 가지고 있거든요.
이를 위해 CSS는 특정 HTML 요소에 적용되는 모든 규칙을 수집하고 조합해야만 합니다.
메리엄-웹스터 사전에 따르면 ‘캐스케이드’란 “각 단계가 이전 단계의 산물로부터 파생되거나 그에 따라 행동하도록 연속적인 단계로 배열되거나 발생하는 어떤 것"을 의미하는데요.
이는 CSS에서 ‘순서’가 중요한 역할을 한다는 것을 암시합니다.
CSS로 무엇을 설정할 수 있을까요? #
CSS를 통해 우리가 설정할 수 있는 것들에는 이런 것들이 있는데요.
-
배경: 배경에 색을 칠하거나 이미지를 넣는 등 다양하게 꾸밀 수 있습니다.
-
글꼴: 다양한 글꼴을 사용하고(웹에서 다운로드한 글꼴도 가능합니다), 글자 크기, 굵기, 스타일(기울임꼴 등), 장식(밑줄 등) 등을 변경할 수 있습니다.
-
간격: 마진이나 단락 사이의 간격 등을 조절할 수 있습니다.
-
테두리: 다양한 요소 주위에 테두리를 추가할 수 있습니다.
-
레이아웃: 웹 페이지의 여러 요소를 배열하는 다양한 방법이 있는데요.
예를 들어, 실제 콘텐츠가 페이지의 대부분을 차지하면서 왼쪽에 사이드바를 위한 공간을 남겨둘 수도 있습니다.
레이아웃에 대해서는 다음 챕터에서 배울 예정이고, 이번 챕터에서는 목록에 언급된 다른 주제들을 살펴볼 거거든요.
물론 CSS는 이보다 훨씬 더 많은 일을 할 수 있지만, 그 모든 것을 다루는 것은 이 시리즈의 범위를 벗어납니다.
CSS 문법 #
CSS 스타일 시트는 여러 개의 ‘규칙(rule)‘으로 이루어져 있는데요.
규칙의 한 예시는 다음과 같습니다.
p {
background-color: red;
}
이 스타일 규칙은 “모든 단락(<p>)의 배경색을 빨간색으로 만들어라!“라는 의미인데요.
그 문법은 두 부분으로 구성됩니다.
중괄호 {} 안의 블록은 하나 이상의 ‘선언(declaration)‘을 포함하는데요.
위 예시에는 단 하나의 선언만 있습니다.
맨 앞의 p와 같은 ‘선택자(selector)‘는 이 선언들이 어떤 HTML 요소에 적용될지를 결정하거든요.
각 선언은 선택된 HTML 요소의 특정 CSS ‘속성(property)‘에 대한 ‘값(value)‘을 지정합니다.
이 경우, 속성의 이름은 background-color이고 값은 red인데요.
속성과 값은 콜론(:)으로 구분되고, 선언은 세미콜론(;)으로 끝납니다.
규칙의 종류 #
사실 규칙에는 두 가지 종류가 있는데요.
우리가 방금 본 것은 ‘스타일 규칙’입니다.
이것이 가장 일반적인 종류의 규칙으로, HTML 요소의 스타일을 변경합니다.
p {
background-color: red;
}
그리고 스타일링과 직접적인 관련이 없는 지침을 제공하는 ‘엣 규칙(@-rule)‘도 있거든요.
한 가지 예로 @import 엣 규칙은 다른 CSS 파일의 규칙들을 현재 CSS 콘텐츠에 추가합니다.
@import "more-rules.css";
또한, CSS는 ‘주석(comment)‘을 지원하는데요.
주석은 CSS 코드가 어떤 역할을 하는지 사람을 위해 설명하는 메모입니다.
브라우저는 주석을 무시하며, 다른 어떤 효과나 목적도 없습니다.
/* Red is our corporate color */
CSS 속성값 #
CSS에는 다양한 종류의 값이 있는데요.
‘문법(Syntax)‘과 ‘의미(Semantics)‘를 구분하는 것이 중요합니다.
문법은 값이 어떻게 ‘쓰여지는지’에 대한 것이고, 의미는 그 문법에 의해 ‘만들어진 값’이 무엇인지에 대한 것이거든요.
마치 ‘이 나무’라는 단어(문법)와 실제 나무(의미)의 관계와 같습니다.
CSS 속성값의 문법 #
값에 대한 몇 가지 일반적인 문법은 다음과 같은데요.
-
red와 같은 ‘식별자(identifier)’(이름)는 일련의 문자로 구성됩니다. -
‘숫자’는 일련의 숫자로 구성되며 소수점을 가질 수 있습니다.
-
숫자 뒤에는
px(픽셀)과 같은 ‘단위’가 따라올 수 있습니다. -
숫자는 ‘백분율’을 나타낼 수도 있습니다.
-
‘따옴표로 묶인 문자열’은 작은따옴표나 큰따옴표 안의 임의의 문자 시퀀스입니다.
대략적으로 식별자는 첫 문자가 글자나 밑줄이어야 하고, 나머지 문자들은 글자, 숫자, 밑줄, 하이픈이 될 수 있다는 규칙을 따릅니다.
CSS 속성값의 타입 #
이번 챕터에서 살펴볼 속성값의 타입은 다음과 같은데요.
-
‘길이’는 종종
px(픽셀)과 같은 단위를 가진 숫자입니다. -
‘각도’는 종종
deg(도)와 같은 단위를 가진 숫자입니다. -
‘색상’은 다양한 문법을 사용하여 지정됩니다.
CSS 코드는 어디에 넣을까요? #
CSS 코드를 HTML에 적용하는 방법은 여러 가지가 있는데요.
첫째, <style> HTML 요소를 사용해 HTML 문서 내부에 직접 CSS 콘텐츠를 포함시킬 수 있습니다.
둘째, .css 파일에 대한 <link>를 HTML 문서의 <head> 안에 넣어서 규칙을 적용할 수 있습니다.
셋째, style HTML 속성을 사용해 단일 HTML 요소에 대한 CSS 선언을 직접 지정할 수 있습니다.
추가적으로, CSS 코드 내에서 다른 CSS 파일을 @import 할 수도 있습니다.
그렇다면 어떤 방법을 사용해야 할까요?
CSS 코드가 몇 줄 이상 되는 프로젝트에서는 <link>가 종종 선호됩니다.
작은 실험을 할 때는 HTML 파일과 CSS 파일을 번갈아 편집할 필요가 없어서 <style>이 편리하거든요.
style HTML 속성은 주로 작은 수정이나 임시방편으로 사용되며 가능한 한 피하는 것이 좋습니다.
@import는 큰 CSS 파일을 더 작고 관리하기 쉬운 파일로 나눌 수 있게 해줍니다.
선택자 (Selectors) #
선택자는 주어진 HTML 요소 집합에서 아무것도 선택하지 않거나, 일부를 선택하거나, 전부를 선택하는 역할을 합니다.
간단한 선택자와 복합 선택자 #
몇 가지 일반적인 간단한 선택자는 다음과 같은데요.
-
타입 선택자:
p처럼 태그 이름을 사용하여 모든 해당 HTML 요소를 선택합니다. -
클래스 선택자:
.first처럼 클래스 이름을 사용하여 해당 클래스를 가진 모든 HTML 요소를 선택합니다. -
ID 선택자:
#navigation처럼 ID를 사용하여 해당 ID를 가진 HTML 요소를 선택합니다. -
전체 선택자:
*는 주어진 집합 내의 모든 HTML 요소를 선택합니다.
‘복합 선택자’는 li.first처럼 하나 이상의 간단한 선택자가 공백 없이 바로 이어지는 시퀀스인데요.
이는 first 클래스를 가진 모든 <li> 요소를 선택합니다.
선택자 목록 #
선택자들을 쉼표로 구분하면, 각 선택자가 개별적으로 선택하는 모든 요소의 합집합을 선택하게 되는데요.
h1, h2, h3 { font-family: sans-serif }는 세 개의 h 태그 모두에 같은 스타일을 적용하는 것과 같습니다.
결합자 (Combinators) #
결합자는 >나 공백과 같은 기호로, 두 복합 선택자 사이에 놓여 새로운 선택자를 만들어 내는데요.
-
자손 결합자 (공백):
nav li는<nav>요소 안 ‘어딘가에’ 있는 모든<li>를 선택합니다. -
자식 결합자 (>):
li > *는 모든<li>요소의 ‘바로 아래에’ 있는 모든 자식 요소를 선택합니다. -
인접 형제 결합자 (+):
ul + hr는<ul>바로 ‘다음에 오는’<hr>요소를 선택합니다.
CSS 속성값 결정하기 #
하나의 HTML 요소에 대해, CSS는 각 속성값을 결정하기 위해 다음과 같은 단계를 수행하는데요.
-
선언된 값: 먼저 요소와 속성에 관련된 모든 선언을 수집합니다.
-
계단식 값(Cascaded value): 그 다음 ‘캐스케이드(cascade)‘라는 알고리즘을 사용해 선언된 값들 중 어느 것이 “이기는지” 결정합니다.
-
지정된 값(Specified value): 마지막으로, 속성이 값을 갖도록 보장하는데요.
계단식 값이 있으면 그것을 사용하고, 없으면 기본값을 사용합니다.
이때 기본값을 정하는 방식에는 두 종류가 있거든요.
‘상속(inherited)‘되는 속성은 부모 요소의 속성값에서 기본값을 가져오고, 나머지 속성은 각 속성의 표준 정의에 포함된 ‘초기값(initial value)‘을 기본값으로 사용합니다.
선택자의 명시도 (Specificity) #
가끔 여러 선택자들이 서로 경쟁할 때가 있는데요.
p.first { color: green; } 와 p { color: red; } 가 동시에 있을 때 CSS는 어떤 선택자가 더 나은지 어떻게 결정할까요?
바로 ‘선택자 명시도’를 사용합니다.
선택자의 명시도는 (A, B, C) 형태의 세 숫자로 구성되는데요.
-
A는 선택자에 ‘ID 같은’ 부분이 몇 개나 있는지 셉니다. -
B는 ‘클래스 같은’ 부분이 몇 개나 있는지 셉니다. -
C는 ‘요소 같은’ 부분이 몇 개나 있는지 셉니다.
두 명시도를 비교할 때는 왼쪽부터 차례대로 구성 요소를 비교하는데요.
어느 한 구성 요소가 다른 것보다 높으면, 그 선택자의 명시도가 더 높다고 판단합니다.
캐스케이드 관련 선언 수집하기 #
CSS가 특정 속성에 대해 선언된 모든 값을 수집한 후에는, 그중 하나를 선택해야 하는데요.
관련된 선택자들의 명시도를 보고 가장 명시도가 높은 선택자의 값을 선택합니다.
만약 가장 높은 명시도를 가진 선택자가 둘 이상이라면, 코드상에서 ‘가장 마지막에’ 언급된 값이 이깁니다.
CSS 속성의 기본값 상속된 값 vs. 초기값 #
특정 속성에 대한 명시적인 값을 제공하는 선언이 없는 경우, 기본값이 사용되는데요.
이때 두 가지 메커니즘이 작동합니다.
몇몇 CSS 속성은 ‘상속’되거든요.
이들은 부모(바로 둘러싼 HTML 요소)의 값을 사용합니다.
font-size와 color가 상속되는 속성의 대표적인 예입니다.
다른 모든 속성은 각 속성에 대해 정의된 ‘초기값’을 갖는데요.
흥미롭게도 background-color는 상속되지 않습니다.
예제 상속되는 font-size vs. 상속되지 않는 background-color
#
상속되는 font-size와 상속되지 않는 background-color의 차이점을 탐색해 보겠습니다.
다음과 같은 HTML이 있다고 가정해 보죠.
<div class="outer">
Outer text
<div class="inner">
Inner text
</div>
</div>
그리고 이 HTML은 다음과 같은 CSS로 스타일이 지정됩니다.
.outer {
font-size: 32px;
background-color: gainsboro; /* a light gray */
}
.inner {
border: thin solid black;
}
브라우저에는 다음과 같이 표시될 겁니다.
font-size는 상속되는데요.
.outer의 글자 크기는 명시적으로 더 크게 선언되었고, .inner는 선언된 값이 없으므로 부모의 글자 크기를 기본값으로 사용합니다.
background-color는 상속되지 않거든요.
.outer의 배경색은 명시적으로 선언되었지만, .inner는 선언된 값이 없으므로 기본값, 즉 초기값인 transparent(투명)를 사용합니다.
CSS에서 길이 지정하기 #
CSS에서 길이를 지정하는 방법은 여러 가지가 있습니다.
절대 길이 #
cm, mm, in, px 등 항상 동일하게 유지되는 ‘절대 길이’ 단위가 있는데요.
이 중에서 컴퓨터 화면에 HTML을 표시할 때는 px(픽셀)만 사용됩니다.
상대 길이 #
‘상대 길이’는 다른 길이를 기준으로 해석되는데요.
사용자가 브라우저의 기본 글꼴 크기를 변경했을 때, 상대 길이를 사용하면 레이아웃이 그에 맞춰 자동으로 조정될 수 있습니다.
em은 해당 요소의 font-size(종종 상속됨)와 같은 길이를 의미하고요.
ch는 현재 글꼴 크기에서 평균적인 문자 하나의 너비 또는 높이와 거의 같습니다.
rem과 rch는 항상 루트 요소(<html>)의 글꼴 크기를 기준으로 해석되거든요.
그래서 페이지의 모든 수준에서 동일한 상대 길이를 사용할 수 있어 UI 요소의 크기를 지정할 때 유용합니다.
어떤 길이 단위를 사용해야 할까요? #
대부분의 UI 길이(너비, 간격 등)와 글꼴 크기에는 rem이 보통 좋은 선택인데요.
px이 더 직관적이긴 하지만, 그 단위를 사용하면 UI가 사용자가 선호하는 글꼴 크기에 맞춰 조정되지 않습니다.
em은 현재 HTML 요소의 글꼴 크기에 맞춰 크기를 조정하고 싶을 때 좋은 선택이고요.
‘백분율(%)‘은 다음 챕터에서 살펴볼 레이아웃에 유용할 수 있습니다.
CSS에서 각도 지정하기 #
CSS는 색상의 색조를 지정하거나 글꼴을 기울일 때 ‘각도’가 필요한데요.
deg(도), grad(그라디언), rad(라디안), turn(회전)과 같은 단위를 지원합니다.
CSS에서 색상 지정하기 #
CSS에서 색상을 지정하는 방법은 여러 가지가 있는데요.
몇 가지 일반적인 방법을 살펴보겠습니다.
배경지식 색 공간 #
‘색 공간(color space)‘은 컴퓨터 화면 등 실제 세계에 존재하는 색상을 지정하는 시스템인데요.
CSS에서 사용되는 두 가지 색 공간은 sRGB와 Display P3입니다.
sRGB는 오랫동안 컴퓨터 화면에 사용되어 왔고, Display P3는 더 새로운 표준으로 sRGB보다 더 넓은 색 영역(특히 더 많은 빨간색과 녹색)을 표현할 수 있습니다.
색상 표기법 #
-
이름 있는 색상:
red,gray등 미리 정의된 이름을 사용합니다. -
RGB (Red Green Blue): 빛의 삼원색인 빨강, 초록, 파랑의 강도를 혼합하여 색을 표현합니다.
#FF0000이나rgb(255 0 0)와 같이 표기합니다. -
HSL (Hue Saturation Lightness): 색상(Hue), 채도(Saturation), 명도(Lightness)의 세 가지 요소로 색을 표현합니다.
hsl(0deg 100% 50%)와 같이 표기하며, 특히 회색 음영을 지정할 때 편리합니다. -
OKLCh (Oklab lightness, chroma, hue): HSL과 유사하지만, 인간의 색상 인식에 더 가깝게 정렬되어 있고 더 넓은 색 공간을 표현할 수 있는 최신 표기법입니다.
oklch(62.8% 0.258 29deg)와 같이 표기합니다.
어떤 색상 표기법을 사용해야 할까요? #
sRGB 색 공간을 넘어서는 생생한 색상을 표시하고 싶다면 OKLCh가 필요한데요.
하지만 OKLCh 색상을 직접 만드는 것은 복잡할 수 있으니, 먼저 HSL로 색상을 고른 다음 OKLCh로 전환하여 채도를 높이는 방법이 유용합니다.
RGB 색상, 특히 여섯 자리 16진수 표기법(#)은 간결함 때문에 CSS 자료에서 흔히 볼 수 있는 표기법입니다.
CSS 박스 모델 #
모든 HTML 요소가 차지하는 공간은 ‘CSS 박스 모델’에 따라 배치되는데요.
이는 다음과 같은 영역으로 구성됩니다.
-
가장 안쪽에는 실제 ‘콘텐츠’가 있습니다.
-
콘텐츠는 ‘패딩(padding)‘이라는 공간으로 둘러싸여 있습니다.
-
패딩은 ‘테두리(border)‘라는 프레임으로 둘러싸여 있습니다.
-
테두리는 ‘마진(margin)‘이라는 공간으로 둘러싸여 있습니다.
테두리는 요소의 경계를 구분하고, 패딩은 그 안쪽에 공간을 추가하며, 마진은 그 바깥쪽(요소 사이)에 공간을 추가한다고 생각하면 쉽습니다.
CSS 박스 사이징 #
box-sizing 속성은 width와 같은 크기가 ‘콘텐츠 박스’를 참조할지, 아니면 ‘테두리 박스’를 참조할지 결정하는데요.
기본값은 content-box이지만, border-box로 설정하면 패딩이나 테두리를 추가해도 요소의 전체 너비가 변하지 않기 때문에 보통 더 직관적입니다.
그래서 많은 개발자들이 모든 요소의 box-sizing 기본값을 border-box로 설정하는 것을 추천하거든요.
* {
box-sizing: border-box;
}
padding과 margin
#
padding과 margin 속성은 padding-top, padding-right 등 네 방향의 속성을 한 번에 지정하는 단축 속성인데요.
padding: 1rem 2rem 3rem 4rem; 처럼 시계 방향(위, 오른쪽, 아래, 왼쪽) 순서로 값을 지정합니다.
테두리 스타일링 #
border-width, border-style, border-color 속성으로 테두리의 두께, 모양, 색상을 지정할 수 있는데요.
border: thin solid gray; 처럼 border 단축 속성을 사용하면 이 세 가지를 한 번에 지정할 수 있습니다.
뷰포트 vs. 웹 페이지 #
‘뷰포트(viewport)‘는 우리가 웹 페이지를 들여다보는 창인데요.
데스크톱 브라우저에서는 창의 크기에 따라 변하고, 모바일 브라우저에서는 보통 화면 대부분을 채웁니다.
웹 페이지가 뷰포트보다 크면 스크롤바가 생깁니다.
배경지식 타이포그래피 #
타이포그래피에 대한 몇 가지 기본 지식은 CSS를 이해하는 데 큰 도움이 되는데요.
-
문자 vs. 글리프: ‘문자(character)‘는 우리가 컴퓨터로 다루는 추상적인 기호이고, ‘글리프(glyph)‘는 그 문자가 화면에 표시되는 실제 모양입니다.
-
서체는 글꼴의 가족: ‘서체(typeface)‘는 글자의 전체적인 디자인이고, ‘글꼴(font)‘은 그 서체의 특정 스타일(굵기, 기울기 등)입니다.
-
세리프 vs. 산세리프: ‘세리프(serif)‘는 글자 획 끝의 작은 장식인데요.
세리프가 있는 서체를 세리프체, 없는 서체를 산세리프체(‘산’은 프랑스어로 ‘없음’을 의미)라고 부릅니다.
-
이탤릭 vs. 오블리크: 둘 다 문자를 기울이는 스타일이지만, ‘이탤릭(italic)‘은 문자의 모양 자체를 변형시키는 반면, ‘오블리크(oblique)‘는 단순히 문자를 기울이기만 합니다.
글꼴 형식 #
웹에서 사용할 수 있는 글꼴 형식에는 .ttf, .otf, .woff, .woff2 등이 있는데요.
이 중 .woff2는 압축률이 가장 좋고 웹에 최적화되어 있어 일반적으로 가장 좋은 선택입니다.
‘가변 폰트(variable font)‘는 하나의 파일 안에 굵기, 너비 등 여러 스타일 축을 담고 있어, 사용자가 원하는 스타일을 더 자유롭게 선택할 수 있게 해주는 최신 글꼴 형식입니다.
CSS에서 글꼴 다루기 #
@font-face로 사용자 정의 글꼴 등록하기
#
사용자 정의 글꼴은 @font-face 규칙을 통해 CSS에 등록해야 하는데요.
@font-face {
font-family: "DejaVu Sans";
src: url("DejaVuSans.ttf") format("truetype");
font-weight: bold;
font-style: oblique;
}
이 규칙은 CSS에게 특정 .ttf 파일이 ‘DejaVu Sans’ 서체의 ‘bold’ 굵기와 ‘oblique’ 스타일을 가진 글꼴임을 알려줍니다.
font-family 속성
#
글꼴 가족을 등록한 후에는 font-family 속성을 통해 텍스트에 사용할 수 있는데요.
font-family: "DejaVu Sans", sans-serif; 처럼 여러 이름을 나열하면, CSS는 사용 가능한 첫 번째 글꼴 가족을 사용합니다.
font-weight와 font-style
#
font-weight는 글꼴의 굵기를, font-style은 이탤릭 또는 오블리크 스타일을 지정합니다.
사용자 정의 글꼴 다운로드하기 #
‘구글 폰트(Google Fonts)‘는 방대한 무료 사용자 정의 글꼴 저장소인데요.
구글 서버에서 직접 폰트를 로드하는 대신, 폰트 파일을 직접 다운로드하여 내 웹사이트에서 호스팅하면 개인정보 보호 및 안정성 측면에서 더 좋습니다.
CSS로 텍스트 스타일링하기 #
글꼴 변경 외에 텍스트를 스타일링하는 다른 방법들을 살펴보겠습니다.
-
text-align:left,right,center,justify등의 값으로 텍스트의 정렬 방식을 제어합니다. -
font-size:rem,em,px등의 단위로 글자 크기를 지정합니다. -
line-height: 줄 간격을 조절하여 텍스트의 가독성에 큰 영향을 줍니다. -
text-decoration:underline,overline,line-through등의 값으로 텍스트에 밑줄, 윗줄, 취소선 등을 추가합니다. -
color와background-color: 각각 글자색과 배경색을 설정합니다.
CSS 규칙 중첩하기 #
CSS 규칙을 중첩해서 작성할 수 있는데요.
div {
padding: 0.5rem;
.some-class {
color: yellow;
}
}
이 코드는 div .some-class { color: yellow; } 와 같습니다.
중첩은 코드를 더 읽기 쉽게 만들고 타이핑을 줄여주는 장점이 있습니다.
더 많은 선택자들 #
이번에는 좀 더 고급이지만 자주 사용되는 선택자들을 살펴보겠습니다.
가상 클래스 (Pseudo-classes) #
가상 클래스는 명시적인 클래스나 ID가 아닌, 요소의 특정 ‘상태’나 ‘위치’에 따라 요소를 선택하는 유연한 메커니즘을 제공하는데요.
-
:root: 문서 트리의 루트 요소(HTML에서는<html>요소)를 선택합니다. -
:hover: 사용자의 커서가 현재 위에 올려져 있는 요소를 선택합니다. -
:target: 현재 URL의 프래그먼트(#)가 가리키는 요소를 선택합니다. -
:nth-child():li:nth-child(odd)처럼 부모의 자식 중 특정 순서에 있는 요소를 선택합니다. -
:is()::is(h1, h2, h3)처럼 여러 선택자 중 하나라도 일치하면 요소를 선택합니다.
가상 요소 (Pseudo-elements) #
가상 요소는 HTML 요소 자체가 아닌, 요소의 특정 ‘부분’을 참조할 수 있게 해주는데요.
예를 들어, ::first-line 가상 요소는 문단의 첫 번째 줄에만 스타일을 적용할 수 있게 해줍니다.
CSS 변수 #
CSS 변수를 사용하면 CSS 값에 이름을 붙일 수 있는데요.
변수는 두 개의 하이픈으로 시작하는 사용자 정의 속성을 통해 정의합니다.
:root {
--highlight-color: yellow;
}
span.highlight {
background-color: var(--highlight-color);
}
CSS 변수는 상속되기 때문에, :root에 정의하면 문서의 모든 곳에서 접근할 수 있습니다.
변수를 사용하면 값의 용도를 명확히 알 수 있고, 나중에 값을 변경해야 할 때 정의 부분 한 곳만 수정하면 되므로 아주 유용합니다.
CSS 레시피 #
이 섹션에서는 몇 가지 측면에서 HTML 콘텐츠를 개선하는 CSS 레시피를 살펴보겠습니다.
모바일에서 페이지가 잘 보이도록 보장하기 #
<head> 태그 안에 다음과 같은 <meta> 태그를 추가하면, 모바일 기기가 데스크톱 사이트를 축소해서 보여주는 대신, 기기 너비에 맞는 좁은 뷰포트를 사용하게 되는데요.
<meta name="viewport" content="width=device-width">
콘텐츠 중앙 정렬 #
다음 CSS는 콘텐츠를 항상 수평 중앙에 배치하고 뷰포트 크기에 따라 자동으로 조정되도록 합니다.
body {
box-sizing: content-box;
margin: 0 auto; /* 수직 수평 */
padding: 0.5rem;
min-width: 10rem;
max-width: 35rem;
}
margin: 0 auto;는 사용 가능한 수평 공간을 좌우 마진에 균등하게 분배하여 body를 중앙에 배치하는 아주 흔한 기법입니다.
링크 스타일링 #
기본 링크 스타일이 마음에 들지 않을 수 있는데요.
다음과 같이 주변 텍스트와 같은 색상을 사용하고, 마우스를 올렸을 때만 밑줄이 나타나도록 변경할 수 있습니다.
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
제목 스타일링 #
<h2>에 하단 테두리를 추가하면 콘텐츠의 구조를 더 쉽게 파악할 수 있는데요.
h2 {
border-bottom: solid thin gray;
}
또한, 제목 끝에 # 기호가 있는 ‘셀프 링크’를 추가하면 사용자가 해당 섹션으로 바로 연결되는 URL을 쉽게 복사할 수 있습니다.
표 스타일링 #
기본 HTML 표는 보기 좋지 않은데요.
border-collapse: collapse;로 셀 테두리를 합치고, padding으로 셀 내부에 여백을 주며, text-align으로 텍스트 정렬을 맞추는 것만으로도 훨씬 가독성 높은 표를 만들 수 있습니다.
table.framed td, th {
text-align: left;
vertical-align: text-top;
border: thin solid var(--table-border-color);
padding: 0.3rem 0.6rem;
}
CSS 표준 탐색하기 #
공식 ‘CSS 스냅샷’은 다양한 CSS 표준을 탐색하기 위한 훌륭한 출발점인데요.
특히 용어, 선택자, 엣 규칙, 속성, 값에 대한 인덱스가 아주 유용합니다.