CSS란?

✅ 1. CSS란?

CSS (Cascading Style Sheets)
→ HTML 요소의 색상, 크기, 위치, 정렬, 애니메이션 등을 꾸미는 언어

---

✅ 2. CSS 적용 방법 3가지

① 인라인 스타일 (비추천)

 

<div style="color:red; font-size:14px;">텍스트</div>

② 내부 스타일 (페이지 1개용)

 

<style> p { color: blue; } </style>

③ 외부 스타일 (가장 추천 👍)

 

<link rel="stylesheet" href="style.css">

---

✅ 3. CSS 기본 문법

 

선택자 { 속성: 값; }

 

div { color: red; font-size: 16px; }

---

✅ 4. 선택자(selector) 기초

🔹 태그 선택자

 

p { color: black; }

🔹 클래스 선택자 (.)

 

.box { border: 1px solid #000; }

 

<div class="box"></div>

🔹 아이디 선택자 (#)

 

#header { background: #eee; }

 

<div id="header"></div>

🔹 자식 / 후손 선택자

 

div p { color: red; } /* div 안 모든 p */ div > p { color: blue; } /* div 바로 아래 p */

---

✅ 5. 박스 모델(Box Model) ⭐ 중요

 

.box { width: 200px; padding: 10px; border: 1px solid #000; margin: 10px; }

구조:

 

margin └ border └ padding └ content

🔥 실무 필수

 

* { box-sizing: border-box; }

---

✅ 6. 자주 쓰는 CSS 속성

🔹 글자

 

color: #333; font-size: 14px; font-weight: bold; text-align: center;

🔹 배경

 

background: #ffffcc; background-color: red; background-image: url(bg.jpg);

🔹 테두리

 

border: 1px solid #0033cc; border-radius: 5px;

🔹 크기

 

width: 100px; height: 50px;

---

✅ 7. 정렬 (실무 핵심)

🔹 가운데 정렬 (텍스트)

 

text-align: center;

🔹 가운데 정렬 (박스)

 

margin: 0 auto;

🔹 flex 정렬 (강력 추천)

 

.box { display: flex; align-items: center; /* 세로 */ justify-content: center; /* 가로 */ }

---

✅ 8. display 속성

 

display: block; /* div */ display: inline; /* span */ display: inline-block; display: none; /* 숨김 */ display: flex; /* 레이아웃 최강 */

---

✅ 9. hover / active

 

button:hover { background: red; } button:active { transform: scale(0.95); }

---

✅ 10. position (레이아웃 핵심)

 

position: relative; position: absolute; position: fixed;

 

.badge { position: absolute; top: 5px; right: 5px; }

---

✅ 11. z-index

 

.popup { position: absolute; z-index: 999; }

---

✅ 12. 실무 예제 (숫자 박스)

 

.num-box { border: 1px solid #0033cc; background: #ffffcc; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; }

 

<div class="num-box">1</div>