CSS
CSS의 정의
CSS는 Cascading Style Sheets의 약자
HTML로 작성된 문서가 사용자에게 어떻게 보여질지(색상, 글꼴, 크기, 배치 등)를 정의하는 스타일 시트 언어
HTML이 웹사이트의 '뼈대"를 만든다면, CSS는 그 위에 입히는 옷과 같은 역할을 한다
스타일시트를 사용하는 이유
웹 개발에서 CSS를 사용하는 이유는 크게 세 가지로 요약 가능하다
디자인과 구조의 분리
HTML은 정보 전달에만 집중하고, CSS는 디자인에만 집중하여 코드가 깔끔해진다
유지보수의 용이성
수백 페이지의 웹사이트라도 하나의 CSS파일만 수정하면 전체 디자인을 변경할 수 있다
다양한 기기 대응
같은 HTML이라도 CSS만 다르게 적용하여 스마트폰, 태블릿, PC 들 각 기기 화면에 최적화된 레이아웃을 제공할 수 있음
스타일 규칙 작성 방법
CSS는 선택자(Selector)와 선언 블록(Declaration Block)으로 구성 된다
h1 {
color: blue;
font-size: 20px;
}
선택자 (Selector)
스타일을 적용할 대상을 지정한다 (위 예시에서는 h1)
속성 (Property)
바꾸고 싶은 디자인 요소 (위 예시에서는 color, font-size)
값 (value)
속성에 적용할 구체적인 수치나 설정 (위 예시에서는 blue, 20px)
선언 (Declaration)
속성: 값;의 한 상을 의미하며, 반드시 끝에 세미콜론(;)을 붙여야한다
스타일 주석 표기 방법
코드 내에 설명을 남기거나 특정 코드를 실행되지 않게 처리할 때 사용한다
CSS 주석은 /*로 시작해서 */로 끝난다
/* 메인 배너 스타일 시작 */
.banner {
background-color: #f0f0f0; /* 배경색 지정 */
}
/* .banner { display: none; } <- 이 코드는 실행되지 않습니다. */
CSS 코드 경량화 (Minification)
웹사이트의 로딩 속도를 높이기 위해 CSS 파일의 용량을 줄이는 기법
방법
코드 내의 불필요한 공백, 줄 바꿈, 주석을 모두 제거
효과
파일 크기가 작아져 브라우저가 CSS파일을 다운로드하고 해석하는 시간이 단축 된다
결과
보통 배포용 파일에는 .min.css 라는 확장자를 붙여 사용한다
CSS는 HTML의 구조를 아름답게 꾸며주는 언어이다
선택자 { 속성: 값; } 이라는 기본 구조만 기억하면 시작할 수 있다
작성 중에는 주석을 잘 달고, 실제 사이트를 오픈할 때는 경량화 과정을 거쳐 성능을 최적화하는걸 습관 들여야한다
Types of styes sheet
스타일시트의 종류와 특징
스타일시트가 어디에 위치하느냐에 따라 적용되는 방식과 우선순위가 달라진다
Browser Style (User Agent Style)
브라우저가 기본으로 가지고 있는 스타일 (CSS 작성하기 전)
설명
크롬, 사파리, 엣지 등 각 브라우저는 <h1>은 크게, <a>는 파란색에 밑줄 등
기본 디자인 가이드라인을 보유하고 있음
특징
웹 페이지의 가장 기초가 되지만, 브라우저마다 조금씩 다르기 때문에 개발자들은 이를 초기화하는 Reset CSS나 Normalize CSS를 자주 사용한다
Inline Style (인라인 스타일)
HTML 태그 안에 style 속성을 사용하여 직접 스타일을 입히는 방식
작성법
<div style="color: red;"> ... </div>
장점
특정 요소에만 즉각적으로 스타일을 적용할 때 매우 빠르고 편리하다
단점
우선순위가 매우 높아 나중에 수정하기 어렵고, 코드의 가독성을 떨어뜨리며 재사용이 불가능하다
Internal Style (내부 스타일)
HTML 문서의 <head> 섹션 안에 <style> 태그를 사용하여 작성하는 방식입니다.
설명
보통 해당 HTML 페이지 한 곳에만 적용되는 고유한 스타일이 있을 때 사용합니다.
특징
외부 파일을 불러올 필요가 없어 로딩 속도가 미세하게 빠를 수 있지만, 페이지가 많아지면 관리가 힘들어집니다.
External Style (외부 스타일)
별도의 .css 파일을 만들고 HTML 문서에서 <link> 태그로 연결하는 방식입니다.
작성법
<link rel="stylesheet" href="style.css">
장점
전 세계 웹 표준이며, 하나의 CSS 파일로 수백 개의 페이지를 관리할 수 있어 유지보수에 가장 유리합니다.
포함과 제외에 관한 보충 설명
일반적으로 CSS에서 **Include(포함)**와 **Exclude(제외)**는 아래와 같은 맥락으로 사용됩니다.
Include Style (스타일 포함)
한 CSS 파일 안에서 다른 CSS 파일을 불러오고 싶을 때 사용하는 @import 규칙이 대표적입니다.
여러 개의 작은 CSS 파일들을 하나의 큰 스타일시트에 포함시켜 구조화할 때 사용합니다.
CSS
/* main.css */
@import url("header.css");
@import url("footer.css");
Exclude Style (스타일 제외)
특정 요소에 적용된 스타일을 제거하거나 예외를 두고 싶을 때 사용하는 기법입니다. 가장 대표적으로는 가상 클래스인 :not() 선택자를 사용해 특정 조건의 요소만 스타일 적용에서 제외할 수 있습니다.
CSS
/* .btn 클래스 중에서 .disabled를 가진 요소만 '제외'하고 스타일 적용 */
.btn:not(.disabled) {
cursor: pointer;
background-color: blue;
}
스타일시트 우선순위 요약
스타일이 충돌할 경우, 아래 순서대로 힘이 강해집니다.
Browser Style
가장 약함
External / Internal Style
중간 (소스 하단에 있을수록 강함)
Inline Style
매우 강함
!important
절대적 (우선순위 파괴자)
실무에서는 관리의 편의성을 위해 External Style 방식을 기본으로 사용합니다.
아주 특수한 상황(이메일 템플릿 등)이 아니라면 Inline Style은 사용을 지양하는 것이 좋습니다.
Types of Selectors
CSS 스타일을 적용할 대상을 지목하는 **CSS 선택자(Selectors)**의 종류에 대해 알아보겠습니다.
Universal Selector (전체 선택자)
페이지에 있는 모든 요소를 한꺼번에 선택합니다.
기호
별표(*)를 사용합니다.
용도
브라우저마다 조금씩 다른 기본 여백(margin, padding)을 초기화하거나, 모든 요소에 동일한 글꼴이나 박스 크기 기준(box-sizing)을 정할 때 주로 사용합니다.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Type Selector (타입 선택자 / 요소 선택자)
특정 HTML 태그 이름을 직접 사용하여 해당 태그를 모두 선택합니다.
특징
페이지 내의 모든 해당 태그에 스타일이 일괄 적용됩니다.
용도
웹사이트 전체의 기본 문단 스타일(p)이나 제목 스타일(h1)을 정할 때 유용합니다.
p {
color: #333;
line-height: 1.6;
}
Class Selector (클래스 선택자)
HTML 요소의 class 속성값을 기준으로 선택합니다.
기호
점(.) 뒤에 클래스 이름을 붙여 사용합니다.
특징
한 페이지 내에서 여러 번 반복해서 사용할 수 있어 가장 활용도가 높습니다.
용도
비슷한 스타일을 여러 요소에 공통적으로 입힐 때 사용합니다.
.highlight {
background-color: yellow;
font-weight: bold;
}
ID Selector (아이디 선택자)
HTML 요소의 id 속성값을 기준으로 선택합니다.
기호
샵(#) 뒤에 아이디 이름을 붙여 사용합니다.
특징
한 페이지 내에서 단 하나의 요소에만 고유하게 사용해야 합니다.
용도
페이지 내에서 유일한 영역(예: #header, #footer, #main-nav)을 지정할 때 주로 쓰입니다.
#main-banner {
width: 100%;
height: 400px;
}
Group Selector (그룹 선택자)
여러 선택자에 동일한 스타일을 한꺼번에 적용하고 싶을 때 사용합니다.
기호
쉼표(,)를 사용하여 선택자들을 나열합니다.
특징
코드를 중복해서 쓰지 않아도 되므로 파일 용량이 줄어들고 가독성이 좋아집니다.
/* h1, h2, p 태그 모두 가로 중앙 정렬을 적용 */
h1, h2, p {
text-align: center;
}
선택자 종류 및 우선순위 요약
| 선택자 종류 | 기호 | 예시 | 우선순위 점수 |
| Universal | * | * { ... } | 0점 |
| Type | 태그명 | div { ... } | 1점 |
| Class | . | .container { ... } | 10점 |
| Id | # | #header { ... } | 100점 |
| Group | , | h1, h2 { ... } | 각자 계산 |
가급적 **클래스 선택자(.)**를 중심으로 스타일을 짜는 것이 재사용성과 확장성 측면에서 가장 유리합니다.
아이디 선택자(#)는 우선순위가 너무 높아서 나중에 스타일을 덮어쓰기 힘들 수 있으니 꼭 필요한 경우에만 신중히 사용하세요.
그룹 선택자(,)를 잘 활용하면 CSS 파일의 전체 길이를 획기적으로 줄일 수 있습니다.
CSS Precedence and Inheritance
CSS의 이름(Cascading Style Sheets) 그 자체이자 가장 중요한 작동 원리
**캐스케이딩(Cascading), 우선순위(Precedence), 상속(Inheritance)**
Cascading (캐스케이딩)
캐스케이딩은 '폭포수처럼 위에서 아래로 흐른다'는 뜻입니다.
하나의 요소에 여러 CSS 규칙이 적용될 때, 충돌을 해결하고 최종적으로 어떤 스타일을 적용할지 결정하는 원칙입니다.
결정 방식은 크게 세 가지 기준을 따릅니다.
중요도(Importance)
!important가 있는지 확인합니다.
우선순위(Specificity)
어떤 선택자가 더 구체적인지 계산합니다.
소스 순서(Source Order)
나중에 작성된 코드가 이전 코드를 덮어씁니다.
CSS Precedence (우선순위/명시도)
우선순위는 선택자의 **'구체성'**에 따라 결정됩니다.
더 특정 요소를 콕 집어 가리킬수록 점수가 높아지며, 높은 점수의 스타일이 적용됩니다.
우선순위 점수 계산표
| 우선순위 | 선택자 종류 | 설명 | 점수 |
| 1순위 | !important | 무조건 최우선 적용 (사용 자제 권장) | - |
| 2순위 | Inline Style | HTML 태그 내에 style="..."로 직접 작성 | 1000점 |
| 3순위 | ID 선택자 | #header, #main 등 | 100점 |
| 4순위 | Class/가상 선택자 | .container, :hover 등 | 10점 |
| 5순위 | Element 선택자 | div, h1, p 등 태그 이름 | 1점 |
| 6순위 | 전체 선택자 | * | 0점 |
꿀팁: 같은 점수라면 나중에 작성된 스타일이 이깁니다.
CSS Inheritance (상속)
상속은 부모 요소에 적용된 스타일 속성들이 자식 요소에게 자동으로 전달되는 현상을 말합니다.
상속되는 속성 vs 안 되는 속성
100% 신뢰는 하지 말기
상속되는 속성 (텍스트 관련)
color, font-family, font-size, font-weight, line-height, text-align 등.
상속되지 않는 속성 (레이아웃 관련)
width, height, margin, padding, border, display, position 등.
실전 예제 코드
<style>
/* 1. 상속: 부모인 div에 color를 주면 내부 p와 span도 파란색이 됨 */
.parent {
color: blue;
border: 2px solid black; /* border는 상속되지 않음 */
}
/* 2. 우선순위 충돌: class(10점) vs tag(1점) */
p { color: red; } /* 1점 */
.text-blue { color: blue; } /* 10점 -> 파란색 적용 */
/* 3. 소스 순서: 같은 점수(10점)라면 아래에 있는 것이 이김 */
.box { background-color: yellow; }
.box { background-color: orange; } /* 최종: 오렌지색 */
</style>
<div class="parent">
부모 영역 (파란 글자, 검정 테두리)
<p class="text-blue">나는 무슨 색일까요? (파란색)</p>
<span>나도 상속받아 파란색!</span>
</div>
<div class="box">나중에 쓴 색이 이깁니다.</div>핵심 요약표
| 개념 | 핵심 내용 |
| Cascading | 스타일 적용의 우선순위를 정하는 전체적인 시스템 |
| Precedence | 선택자의 종류에 따라 부여되는 점수 (ID > Class > Tag) |
| Inheritance | 부모의 스타일(주로 텍스트)이 자식에게 대물림되는 특성 |
스타일이 의도대로 나오지 않는다면 **개발자 도구(F12)**의 'Computed' 탭을 확인해 어떤 규칙에 의해 덮어씌워졌는지 확인해 보세요.
**!important**는 우선순위 시스템을 무너뜨리므로, 정말 필요한 경우가 아니면 사용을 피하는 것이 유지보수에 좋습니다.
CSS font Property
웹 디자인의 시각적 언어이자 가독성의 핵심인 CSS 폰트(font) 속성에 대해 정리해 드리겠습니다.
폰트 속성은 글꼴의 종류, 크기, 굵기 등을 제어하여 텍스트에 생명력을 불어넣는 역할을 합니다.
font-family (글꼴 종류)
텍스트에 적용할 글꼴을 지정합니다.
기본 원칙
사용자의 컴퓨터에 해당 폰트가 없을 경우를 대비해 여러 개의 후보 글꼴을 쉼표로 구분하여 작성합니다.
Generic Family (태그)
마지막에는 반드시 sans-serif(고딕 계열)나 serif(명조 계열) 같은 일반적인 글꼴 유형을 써서 대체 폰트가 작동하게 합니다.
주의
폰트 이름에 공백이 있다면 반드시 따옴표(" ")로 감싸야 합니다.
body {
font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
}
font-size (글자 크기)
글자의 크기를 결정합니다.
절대 단위
px(픽셀) - 기기 화면의 화소 단위로 고정된 크기를 가집니다.
상대 단위
em, rem - 부모나 최상위 요소의 크기에 비례하여 변하므로 반응형 웹에 적합합니다.
키워드
small, medium, large 등으로도 지정할 수 있습니다.
font-style (글자 스타일)
글자를 기울일지 말지를 결정합니다.
normal
일반적인 형태입니다. (기본값)
italic
이탈릭체(기울임꼴)로 표시합니다.
oblique
글자를 강제로 비스듬히 기울입니다. (italic과 비슷하지만 방식이 다릅니다.)
font-weight (글자 굵기)
텍스트의 두께를 조절하여 강조 정도를 정합니다.
키워드
normal(기본), bold(굵게)를 주로 사용합니다.
숫자 값
100부터 900까지 100 단위로 세밀하게 조절할 수 있습니다.
400은 normal과 같고, 700은 bold와 유사합니다.
font (축약형 속성)
위의 속성들을 한 줄로 합쳐서 작성할 수 있습니다.
순서
style weight size family (크기와 글꼴은 필수 입력 사항입니다.)
예시
font: italic 700 16px "Arial", sans-serif;
폰트 주요 속성 요약표
| 속성 | 설명 | 주요 값 예시 |
| font-family | 서체 지정 | "Roboto", sans-serif |
| font-size | 글자 크기 | 16px, 1.2rem |
| font-style | 기울임 여부 | italic, normal |
| font-weight | 굵기 조절 | bold, 400, 700 |
웹 접근성을 높이기 위해 본문 텍스트의 크기는 px보다는 rem 단위를 사용하는 것이 좋습니다.
웹 폰트(Google Fonts 등)를 사용할 때는 로딩 속도를 고려해 필요한 **font-weight**만 골라 담는 것이 성능 최적화의 팁입니다.
코드예제
방금 설명해 드린 폰트 속성들을 한눈에 확인하고 직접 실습해 볼 수 있는 코드 예제를 준비했습니다.
CSS 폰트 속성 실전 예제
이 코드는 구글 폰트를 연동하여 글꼴, 크기, 굵기, 스타일을 다양하게 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
/* 1. 웹 폰트 외부 연결 (예시: 나눔고딕) */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
body {
/* font-family: 기본 서체 설정 (시스템 폰트 -> 샌세리프 순) */
font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
line-height: 1.6;
}
.title {
/* font-size: 상대 단위 rem 사용 (1rem = 보통 16px) */
font-size: 2.5rem;
/* font-weight: 숫자로 세밀하게 굵기 지정 */
font-weight: 800;
color: #333;
}
.subtitle {
/* font-style: 기울임꼴 적용 */
font-style: italic;
font-size: 1.2rem;
font-weight: 400;
color: #666;
}
.bold-text {
/* font-weight: 키워드로 굵게 지정 */
font-weight: bold;
}
.shorthand {
/* font 축약형: [style] [weight] [size] [family] */
font: italic 700 18px "Nanum Gothic", sans-serif;
margin-top: 20px;
color: royalblue;
}
</style>
</head>
<body>
<h1 class="title">나만의 웹 타이포그래피</h1>
<p class="subtitle">CSS 폰트 속성을 활용한 스타일링 예제입니다.</p>
<p>이 문장은 일반적인 굵기의 텍스트입니다.</p>
<p class="bold-text">이 문장은 font-weight: bold가 적용되어 강조되었습니다.</p>
<div class="shorthand">
축약형 속성(shorthand)을 사용하여 한 줄로 정의한 스타일입니다.
</div>
</body>
</html>
코드 설명 및 팁
rem 단위 사용
font-size에서 px 대신 rem을 사용하면, 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹사이트 전체 글꼴도 함께 유동적으로 변하여 웹 접근성에 매우 좋습니다.
font-weight 숫자 값
구글 폰트처럼 웹 폰트를 불러올 때 해당 굵기(400, 700 등)를 명시적으로 포함해야 숫자로 제어할 수 있습니다.
축약형 주의사항
font 축약형을 쓸 때는 **font-size와 font-family**가 반드시 포함되어야 하며, 순서가 틀리면 속성이 무시될 수 있으니 주의하세요.
'코딩 > CSS' 카테고리의 다른 글
| [TIL] CSS: 패딩(Padding), 디스플레이(display), 플롯(float) 및 포지션 제어 (1) | 2026.03.19 |
|---|---|
| [TIL] CSS: 리스트, 테이블, 박스 모델과 마진/보더 정리 (2) | 2026.03.18 |
| [TIL] CSS : 아이콘 폰트와 텍스트 제어 및 컬러 속성 (2) | 2026.03.17 |
| [TIL] CSS: 실무에 쓰이는 웹 폰트 적용법과 트래픽 최적화 전략 (1) | 2026.03.16 |
| [TIL] CSS 기초 : CSS를 적용하는 3가지 방법, 우선순위, 실습 (0) | 2026.03.12 |