[웹 기초] CSS란

목차 (OPEN)

🎨 CSS란
🎯 CSS의 핵심 역할
🔧 CSS 사용 방법
🖇️ CSS의 계층구조

🎨 CSS란

CSS란 Cascading Style Sheets의 약자로,

HTML로 만든 웹 페이지에 디자인과 스타일을 입히기 위한 언어이다.

즉, HTML이 웹 페이지의 뼈대라고 하면,

CSS는 그 위에 옷을 입히는 디자이너의 역할을 한다고 보면 된다.

🎯 CSS의 핵심 역할

HTML은 구조만 만들 수 있기에

색상, 크기, 위치, 애니메이션 등 시각적인 요소는 CSS가 담당한다.

대표적인 역할들은 아래와 같다.

스타일 요소	설명	예시
🎨 색상	글자나 배경에 색을 칠함	color background-color
✏️ 글꼴	글씨체, 크기, 굵기 설정 등	font-family font-size
📐 배치	위치를 지정하거나 정렬함	margin padding position
🔲 테두리	박스나 요소에 선을 그림	border border-radius
🎞️ 애니메이션	움직이는 효과 추가	transition animation

🔧 CSS 사용 방법

1️⃣ 인라인 방식

HTML 태그 안에 직접 스타일을 적는 방법

<p style="color: red;">이 문장은 빨간색입니다.</p>

2️⃣ 내부 스타일 시트

HTML 문서 안의 <head>에다가 <style> 태그로 작성하는 방법

<head>
    <style>
    	h1 {
            color: blue;
        }
    </style>
</head>

3️⃣ 외부 스타일 시트

CSS 파일을 따로 만들어서 연결하는 방법

(보통 이 방법을 가장 많이 사용한다.)

<!-- HTML 파일에 연결 -->
<link rel="stylesheet" href="sytle.css">

/* style.css */
h1 {
    color: green;
    font-size: 36px;
}

🏷️ CSS 선택자란

CSS는 어떤 HTML 요소에 스타일을 적용할 건지를 선택자로 지정해줘야 한다.

주요 선택자들로는 아래와 같은 것들이 있다.

선택자	의미	예시
태그명	특정 태그 전체	p h1 div
.클래스	같은 클래스명을 가진 요소들	.menu .title
#아이디	특정 하나의 요 소	#header #main-btn

p {
    color: gray;
}

.title {
    font-size: 24px;
}

#main-btn {
    background-color: orange;
}

🖇️ CSS의 계층구조

CSS의 Cascading이란 말은 "위에서 아래로 흐르는" 특징을 의미한다.

즉, 스타일이 겹칠 경우 우선순위에 따라 결정되는 것이다.

적용 우선순위는 아래와 같다.

1️⃣ 인라인 스타일

2️⃣ ID 선택자 (#id)

3️⃣ 클래스 선택자 (.class)

4️⃣ 태그 선택자 (h1, p 등)

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

[웹 기초] 인터넷은 어떻게 작동하는가 (0)	2025.05.20
[웹 기초] 간단한 채팅창 만들기 실습 (0)	2025.05.13
[웹 기초] CSS의 속성 (0)	2025.05.11
[웹 기초] HTML이란 (2)	2025.05.07
[웹 기초] 웹(Web) 이란 (1)	2025.05.07

SSOSSO._.

[웹 기초] CSS란

🎨 CSS란

🎯 CSS의 핵심 역할

🔧 CSS 사용 방법

🏷️ CSS 선택자란

🖇️ CSS의 계층구조

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

티스토리툴바

[웹 기초] CSS란

🎨 CSS란

🎯 CSS의 핵심 역할

🔧 CSS 사용 방법

🏷️ CSS 선택자란

🖇️ CSS의 계층구조

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

'💻 웹/📌 웹 기초' Related Articles

티스토리툴바