✅CSS (Cascading Style Sheets)
📌 CSS 구문
CSS는 선택자(Selector), 속성(Property), 값(Value)으로 구성됩니다. 기본적인 구문 구조는 다음과 같습니다.
선택자 {
속성: 값;
}✅ 예제
h1 {
color: red;
font-size: 30px;
}- h1 → 선택자(Selector)
- color → 속성(Property)
- red → 값(Value)
- font-size: 30px; → 선언(Declaration)
🔹 CSS 스타일 시트 종류
CSS는 스타일을 적용하는 방식에 따라 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.
1️⃣ 인라인 (Inline) 스타일
HTML 요소 내부에 style 속성을 사용하여 적용합니다.
<h1 style="color: blue; background-color: yellow;">Hello World!</h1>📌 단점: 유지보수가 어렵고 코드가 지저분해질 수 있음.
2️⃣ 내부 (Internal) 스타일 시트
HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 스타일을 정의합니다.
<head>
<style>
h1 {
color: blue;
background-color: yellow;
}
</style>
</head>📌 장점: 별도 파일 없이 간단한 스타일 적용 가능.
📌 단점: 여러 페이지에 적용하기 어렵고 코드가 길어질 수 있음.
3️⃣ 외부 (External) 스타일 시트
별도의 CSS 파일을 생성하여 HTML 문서에서 <link> 태그를 사용해 불러옵니다.
<head>
<link rel="stylesheet" href="style.css">
</head>/* style.css */
h1 {
color: blue;
background-color: yellow;
}📌 장점: 여러 페이지에서 동일한 스타일을 적용 가능.
📌 단점: HTML 파일과 분리되어 있어 초기에 로딩 시간이 다소 걸릴 수 있음.
'Web > CSS' 카테고리의 다른 글
| CSS Box Model (3) | 2025.02.26 |
|---|---|
| CSS Inheritance (CSS 상속) (3) | 2025.02.25 |
| Specificity (명시도) (1) | 2025.02.25 |
| CSS Selectors (CSS 선택자) (1) | 2025.02.25 |