CSS 기본 문법과 선택자
선택자와 선언 블록의 문법을 익히고 인라인·내부·외부 스타일 시트의 적용 범위와 우선순위를 구분합니다.
2장에서 우리는 HTML을 사용하여 웹 페이지의 뼈대와 콘텐츠를 구성하는 방법을 학습했습니다.
이제는 텍스트를 정리하고, 이미지를 삽입하며, 링크를 만들고, 폼을 통해 사용자 입력을 받는 기본적인 웹 페이지를 만들 수 있게 되었습니다.
하지만 HTML만으로는 웹 페이지가 다소 투박하고 정보가 나열된 문서처럼 보일 수 있습니다.
여기서 등장하는 것이 바로 CSS(Cascading Style Sheets)입니다.
CSS는 HTML 문서의 스타일(Style)과 레이아웃(Layout)을 정의하는 언어입니다.
웹 페이지의 색상, 글꼴, 크기, 배치, 여백 등 시각적인 모든 요소를 제어하여 사용자에게 매력적이고 직관적인 웹 경험을 제공하는 것이 CSS의 역할입니다.
이 장에서는 CSS 기본 문법 규칙과, 특정 요소에 스타일을 적용하는 핵심 개념인 선택자(Selector)를 중심으로 다룹니다.
CSS 기본기를 익히면 원하는 디자인을 더 일관되게 구현할 수 있습니다.
CSS는 HTML 구조 위에 색, 여백, 글꼴, 배치 규칙을 입혀 같은 콘텐츠도 다른 시각적 우선순위로 읽히게 만드는 표현 언어입니다.
- CSS 개념
CSS는 HTML 요소들이 웹 브라우저에 어떻게 보일지를 설명하는 언어입니다. CSS(Cascading Style Sheets)
- CSS 기본 문법: 선언 블록과 속성-값 쌍
CSS는 매우 간단하고 직관적인 문법을 가지고 있습니다. 선택자(Selector)
- CSS 적용 방법: HTML과 CSS 연결하기
CSS 스타일을 HTML 문서에 적용하는 방법은 크게 세 가지가 있습니다. 내부 장식을 담당
- CSS 규칙 작성
분리 HTML에는 의미와 구조를 두고, 색상·글꼴·여백·배치는 CSS 규칙으로 옮깁니다. 문법 선택자로 대상을 고르고, 중괄호 안에 속성: 값; 형태의 선언을 쌓습니다. 연결 실습과 실제 프로젝트에서는 재사용 가능한 외부 스타일 시트를 기본값으로 둡니다. 선택자 태그, 클래스, ID, 속성, 가상 클래스가 어떤 요소를 고르는지 먼저 확인합니다.
- 분리 HTML에
의미와 구조를 두고, 색상·글꼴·여백·배치는 CSS 규칙으로 옮깁니다.
- 문법 선택자로 대상을 고르고, 중괄호 안에 속성
값; 형태의 선언을 쌓습니다.
- 연결 실습
실제 프로젝트에서는 재사용 가능한 외부 스타일 시트를 기본값으로 둡니다.
- 선택자 태그, 클래스, ID, 속성, 가상 클래스
어떤 요소를 고르는지 먼저 확인합니다.
CSS란 무엇인가? 웹 디자인의 핵심 언어
CSS는 HTML 요소들이 웹 브라우저에 어떻게 보일지를 설명하는 언어입니다.
HTML이 집의 뼈대와 방의 구조를 만드는 것이라면, CSS는 벽지 색깔, 가구 배치, 창문의 모양과 같은 내부 장식을 담당한다고 생각할 수 있습니다.
CSS의 필요성
- HTML과 스타일의 분리: HTML은 콘텐츠의 구조와 의미를 담당하고, CSS는 시각적인 표현을 담당합니다. 이렇게 역할을 분리함으로써 HTML 코드는 더 간결해지고, CSS 코드는 디자인 변경에 유연하게 대응할 수 있습니다.
- 일관된 디자인 적용: 하나의 CSS 파일을 통해 여러 웹 페이지에 동일한 스타일을 적용할 수 있습니다. 웹사이트 전체의 디자인을 변경할 때도 CSS 파일 하나만 수정하면 되므로 유지보수가 매우 효율적입니다.
- 반응형 웹 디자인: CSS 미디어 쿼리(Media Query)를 사용하여 다양한 화면 크기(PC, 태블릿, 모바일)에 맞춰 웹 페이지의 레이아웃과 스타일을 다르게 적용할 수 있습니다.
- 접근성 및 SEO 향상: 올바른 CSS 사용은 웹 접근성을 높이는 데 기여하며, 구조와 스타일의 분리는 검색 엔진이 콘텐츠를 더 효율적으로 분석하는 데 도움이 됩니다.
CSS 기본 문법: 선언 블록과 속성-값 쌍
CSS는 매우 간단하고 직관적인 문법을 가지고 있습니다.
CSS 규칙(rule)은 크게 선택자(Selector)와 선언 블록(Declaration Block) 으로 구성됩니다.
선택자 {
속성(property): 값(value);
속성(property): 값(value);
/* ...더 많은 속성-값 쌍 */
}- 선택자 (Selector): 스타일을 적용할 HTML 요소를 지정합니다. (예:
h1,p,.box,#main-header등) - 선언 블록 (Declaration Block): 중괄호
{}안에 들어가는 부분으로, 선택된 요소에 적용할 스타일 규칙들을 포함합니다. - 속성 (Property): 변경하고 싶은 스타일의 종류를 나타냅니다. (예:
color,font-size,background-color,margin등) - 값 (Value): 해당 속성에 적용할 구체적인 값입니다. (예:
red,16px,#f0f0f0,10px등) - 세미콜론 (
;): 각 속성-값 쌍의 끝에는 반드시 세미콜론을 붙여야 합니다. 마지막 속성-값 쌍에는 생략해도 오류는 아니지만, 일관성을 위해 붙이는 것이 좋은 습관입니다.
h1 { /* h1 태그를 선택하여 스타일 적용 */
color: blue; /* 글자 색상을 파란색으로 */
font-size: 32px; /* 글자 크기를 32픽셀로 */
text-align: center; /* 텍스트를 가운데 정렬 */
}
p { /* p 태그를 선택하여 스타일 적용 */
line-height: 1.8; /* 줄 간격을 1.8배로 */
margin-bottom: 1em; /* 아래쪽 여백을 1em으로 */
}아래 다이어그램은 하나의 CSS 규칙이 선택자, 선언 블록, 속성-값 쌍으로 나뉘는 구조를 시각적으로 정리한 것입니다.
선택자가 요소를 찾고, 중괄호 안의 선언들이 바꿀 모양을 지정합니다.
- 대상
선택자 .notice 처럼 스타일을 적용할 HTML 요소를 고릅니다.
- 선택 대상
속성 color , font-size 처럼 바꿀 스타일 종류를 씁니다.
- 적용 방식
값 콜론 뒤에 실제 색상, 크기, 간격 같은 값을 지정합니다.
.notice
{
color
: #e34f26;
font-size
: 18px;
}CSS 적용 방법: HTML과 CSS 연결하기
CSS 스타일을 HTML 문서에 적용하는 방법은 크게 세 가지가 있습니다.
인라인 스타일 (Inline Style)
HTML 태그의 style 속성에 직접 CSS 코드를 작성하는 방식입니다.
- 장점: 특정 요소에만 즉시 스타일을 적용할 때 편리합니다.
- 단점: 코드 가독성이 떨어지고, 재사용이 불가능하며, 유지보수가 어렵습니다. 권장되지 않는 방법입니다.
인라인 스타일은 일반 선택자 specificity 계산 밖에서 강하게 적용되므로, 나중에 외부 CSS에서 덮어쓰기 어렵습니다.
반복되는 스타일이나 컴포넌트 규칙은 class와 외부 스타일 시트로 옮기는 편이 안전합니다.
<p style="color: red; font-size: 18px;">이 문단은 인라인 스타일이 적용됩니다.</p>내부 스타일 시트 (Internal Style Sheet)
HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 CSS 코드를 작성하는 방식입니다.
- 장점: HTML 문서 하나에서 모든 스타일을 관리할 수 있어 간단한 페이지에 유용합니다.
- 단점: 여러 HTML 페이지에 동일한 스타일을 적용할 수 없으며, HTML 파일의 크기가 커집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: purple;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>내부 스타일 시트 예시</h1>
<p>이것은 내부 스타일 시트가 적용된 문단입니다.</p>
</body>
</html>외부 스타일 시트 (External Style Sheet)
별도의 .css 파일을 만들고, 이 파일을 HTML 문서에 연결하는 방식입니다.
대부분의 실제 웹 개발 프로젝트에서 사용되는 표준적인 방법입니다.
-
장점
- HTML과 CSS 코드를 완벽하게 분리하여 가독성과 유지보수성이 매우 뛰어납니다.
- 하나의
.css파일로 여러 HTML 페이지에 동일한 스타일을 적용할 수 있어 효율적입니다. - CSS 파일이 캐싱되어 웹 페이지 로딩 속도를 개선할 수 있습니다.
- 단점: HTML 파일과 CSS 파일 간의 링크가 깨지면 스타일이 적용되지 않습니다.
CSS 파일 생성: HTML 파일과 같은 폴더 또는 하위 폴더(css 폴더 등)에 style.css와 같은 이름으로 CSS 파일을 만듭니다.
style.css 파일 내용
body {
font-family: 'Malgun Gothic', sans-serif;
background-color: #e6e6fa;
}
h1 {
color: darkgreen;
text-align: left;
}
p {
font-size: 16px;
}HTML 파일에 연결: HTML 문서의 <head> 태그 안에 <link> 태그를 사용하여 CSS 파일을 연결합니다.
rel="stylesheet": 연결하는 문서가 스타일 시트임을 나타냅니다.href="경로/파일명.css": CSS 파일의 경로를 지정합니다.
index.html 파일 내용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일 시트</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<h1>외부 스타일 시트 예시</h1>
<p>이것은 외부 스타일 시트가 적용된 문단입니다.</p>
<p>HTML과 CSS 파일이 분리되어 있어 깔끔합니다.</p>
</body>
</html>인라인, 내부 스타일 시트, 외부 스타일 시트는 모두 같은 CSS 문법을 쓰지만 재사용성과 유지보수 비용이 다릅니다.
- 세 가지 적용 위치
태그의 style 속성에 바로 쓰기 때문에 빠르지만, 재사용이 어렵고 HTML 구조를 지저분하게 만듭니다.
- 내부 스타일 시트
한 HTML 문서의 안에서 관리합니다. 단일 예제는 편하지만 여러 페이지에 같은 디자인을 나누기 어렵습니다.
- 외부 스타일 시트
style.css를 만들고 로 연결합니다. 실습과 실제 프로젝트의 기본 선택입니다.
- 실습 확인 순서
index.html에는 구조를 두고, 색상·폰트·여백은 style.css로 옮겼는지 봅니다.
- href 경로가 맞는가
CSS 파일 경로가 틀리면 브라우저는 HTML만 표시하므로, 개발자 도구 Network 탭이나 화면 변화를 확인합니다.
CSS 선택자: 원하는 요소만 골라내기
선택자는 요소를 찾는 문법이고, 우선순위는 충돌했을 때 어떤 선언이 이기는지 결정하는 규칙입니다.
- 대상 좁히기
장 넓은 선택자부터 시작 · 태그 선택자는 넓고 클래스 선택자는 컴포넌트 단위 스타일에 적합합니다.
- 관계 표현
DOM 구조를 선택자에 반영 · 자손과 자식 선택자는 범위가 다르므로 구조 변화에 얼마나 약한지 함께 봅니다.
- 상태 분기
hover, focus, before처럼 상황을 표현 · 가상 클래스는 상태를, 가상 요소는 실제 DOM에 없는 조각을 스타일링합니다.
선택자(Selector)는 CSS의 핵심 중 하나입니다.
수많은 HTML 요소 중에서 정확히 어떤 요소에 스타일을 적용할지 지정하는 역할을 합니다.
올바른 선택자 사용법을 익히는 것은 CSS를 효과적으로 다루는 데 필수적입니다.
기본 선택자
*)- 문서의 모든 HTML 요소에 스타일을 적용합니다.
- 초기화 스타일 등에 사용되지만, 성능 문제로 남용하지 않는 것이 좋습니다.
* {
margin: 0; /* 모든 요소의 기본 마진 제거 */
padding: 0; /* 모든 요소의 기본 패딩 제거 */
}- 특정 HTML 태그 이름을 직접 사용하여 해당 태그의 모든 요소에 스타일을 적용합니다.
p { /* 모든 <p> 태그 */
color: #333;
font-family: sans-serif;
}
h2 { /* 모든 <h2> 태그 */
border-bottom: 1px solid #ccc;
}클래스 선택자 (.) - 가장 많이 사용!
- HTML 요소의
class속성 값으로 요소를 선택합니다. 한 HTML 문서 내에서 여러 요소에 동일한 클래스를 적용할 수 있으며, 하나의 요소가 여러 클래스를 가질 수도 있습니다. .클래스명형태로 사용합니다.
<h1 class="main-title">우리 회사</h1>
<p class="section-text">회사 소개입니다.</p>
<p class="section-text highlight">중요한 내용입니다.</p>.main-title { /* class가 "main-title"인 요소 */
font-size: 40px;
color: #2c3e50;
}
.section-text { /* class가 "section-text"인 요소들 */
line-height: 1.6;
color: #555;
}
.highlight { /* class가 "highlight"인 요소들 */
background-color: yellow;
}#)- HTML 요소의
id속성 값으로 요소를 선택합니다.id는 HTML 문서 내에서 유일해야 합니다. (하나의id는 오직 하나의 요소에만 사용되어야 함) #ID명형태로 사용합니다.- 특정 요소를 정확히 식별하여 스타일링할 때 유용합니다.
<div id="header">
<h1>환영합니다!</h1>
</div>
<div id="footer">
<p>저작권</p>
</div>#header { /* id가 "header"인 요소 */
background-color: #f8f8f8;
padding: 20px;
}
#footer { /* id가 "footer"인 요소 */
text-align: center;
font-size: 14px;
color: #888;
}id: 문서 내에서 고유한하나의 요소에 적용 (주로 JavaScript에서 특정 요소에 접근할 때 사용)class: 여러 요소에 반복적으로 적용 가능 (주로 CSS 스타일링에 사용)
복합 선택자
여러 선택자를 조합하여 더 구체적인 요소를 선택할 수 있습니다.
- 부모 요소 안에 있는 모든 자손 요소(하위 요소)를 선택합니다.
부모선택자 자손선택자형태로 사용합니다.
<div class="menu">
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
</ul>
</div>
<p>일반 문단</p>.menu ul li a { /* class가 "menu"인 요소 내부의 ul 내부의 li 내부의 a 태그 */
text-decoration: none; /* 밑줄 제거 */
color: #4CAF50; /* 초록색 */
}>)- 부모 요소의 바로 아래에 있는 자식 요소만 선택합니다.
부모선택자 > 자식선택자형태로 사용합니다.
<div class="container">
<p>자식 문단 1</p>
<span>
<p>손자 문단</p>
</span>
<p>자식 문단 2</p>
</div>.container > p { /* class가 "container"인 요소의 직계 자식인 <p> 태그만 */
border: 1px solid blue;
}
/* 위의 CSS는 "손자 문단"에는 적용되지 않습니다. */+)- 바로 다음에 오는 형제 요소(같은 부모를 가진 요소)를 선택합니다.
형제1선택자 + 형제2선택자형태로 사용합니다.
<h1>제목</h1>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<div>다른 요소</div>
<p>세 번째 문단</p>h1 + p { /* <h1> 태그 바로 뒤에 오는 <p> 태그 */
font-weight: bold;
color: red;
}
/* 이 스타일은 "첫 번째 문단"에만 적용됩니다. */~)- 다음에 오는 모든 형제 요소들을 선택합니다.
형제1선택자 ~ 형제2선택자형태로 사용합니다.
h1 ~ p { /* <h1> 태그 다음에 오는 모든 <p> 태그들 */
font-style: italic;
}
/* 이 스타일은 "첫 번째 문단", "두 번째 문단", "세 번째 문단" 모두에 적용됩니다. */속성 선택자
- 특정 속성을 가지거나 특정 속성 값을 가진 요소를 선택합니다.
[속성명]: 해당 속성을 가진 모든 요소[속성명="값"]: 해당 속성이 특정 값을 가진 요소[속성명^="값"]: 해당 속성 값이 특정 문자열로 시작하는 요소[속성명$="값"]: 해당 속성 값이 특정 문자열로 끝나는 요소[속성명*="값"]: 해당 속성 값이 특정 문자열을 포함하는 요소
a[target="_blank"] { /* target="_blank" 속성을 가진 모든 <a> 태그 */ background-color: lightblue; } input[type="text"] { /* type="text" 속성을 가진 모든 <input> 태그 */ border: 1px solid gray; } img[alt*="로고"] { /* alt 속성 값에 "로고"가 포함된 모든 <img> 태그 */ border: 2px solid green; }
가상 클래스 선택자 (Pseudo-classes)
- 요소의 특정 상태나 위치에 따라 스타일을 적용할 때 사용합니다.
:(콜론)을 사용하여 정의합니다.:hover: 마우스 커서가 요소 위에 올라갔을 때:active: 요소를 클릭하는 동안:focus: 폼 입력 필드처럼 요소에 포커스가 있을 때:link: 방문하지 않은 링크:visited: 방문한 링크:first-child: 부모의 첫 번째 자식 요소:last-child: 부모의 마지막 자식 요소:nth-child(n): 부모의 n번째 자식 요소 (n은 숫자,odd,even사용 가능):not(selector): 지정된 선택자가 아닌 요소
a:hover { /* 링크에 마우스 올렸을 때 */ color: orange; text-decoration: underline; } input:focus { /* input 필드에 포커스 있을 때 */ border-color: blue; box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); } li:first-child { /* 목록의 첫 번째 항목 */ font-weight: bold; } li:nth-child(even) { /* 목록의 짝수 번째 항목 */ background-color: #f2f2f2; } button:active { /* 버튼 클릭 시 */ transform: translateY(1px); /* 살짝 눌리는 효과 */ }
가상 요소 선택자 (Pseudo-elements)
- 요소의 특정 부분에 스타일을 적용할 때 사용합니다.
::(이중 콜론)을 사용하여 정의합니다. (단일 콜론도 허용되지만, 구분을 위해 이중 콜론이 권장됩니다.)::before: 요소의 콘텐츠 앞에 가상 콘텐츠를 생성::after: 요소의 콘텐츠 뒤에 가상 콘텐츠를 생성::first-letter: 텍스트의 첫 글자::first-line: 텍스트의 첫 줄::selection: 사용자가 텍스트를 드래그하여 선택했을 때
p::first-letter { /* <p> 태그의 첫 글자 */ font-size: 2em; color: #ff5733; float: left; /* 드롭캡 효과 */ line-height: 1; margin-right: 5px; } a::after { /* <a> 태그 콘텐츠 뒤에 화살표 아이콘 추가 */ content: " →"; font-size: 0.8em; vertical-align: super; }