1강 - CSS의 기본 개념과 역할
✅ CSS란?
- HTML 요소에 스타일(색상, 글꼴, 레이아웃 등) 을 입히는 언어
- HTML은 구조, CSS는 디자인
✅ CSS의 역할
- 프레젠테이션 분리: 유지보수 용이
- 일관성 유지: 사이트 전반 스타일 일괄 적용 가능
- 반응형 웹 디자인: 화면 크기에 따라 자동 조정
✅ 기본 문법
선택자 {
속성1: 값1;
속성2: 값2;
}✅ CSS 통합 방법
- 인라인 스타일:
<h1 style=""> - 내부 스타일 시트:
<style>태그 - 외부 스타일 시트:
.css파일을<link>로 연결
🧾 요약: CSS는 웹의 시각적 표현을 담당하며, 구조와 디자인을 분리하여 웹 페이지 유지보수를 쉽게 만듭니다.
2강 - 선택자와 적용 우선순위
✅ 기본 선택자
- 태그 선택자:
p {} - 클래스 선택자:
.class {} - ID 선택자:
#id {}
✅ 속성 선택자
a[target] { color: red; }
input[type="text"] { border: 1px solid black; }✅ 가상 클래스 선택자
a:hover { color: orange; }
input:focus { border-color: blue; }
li:nth-child(odd) { background-color: lightgray; }✅ CSS 우선순위 (Specificity)
style="">#id>.class / :hover / [type="text"]>태그- 동일 우선순위일 경우 나중에 작성된 스타일이 적용
🧾 요약: CSS 선택자는 다양한 방법으로 HTML 요소를 지정하며, 충돌 시 우선순위 규칙에 따라 스타일이 결정됩니다.
3강 - 색상과 단위
✅ 색상 표현 방법
- 색상 이름:
red,blue - HEX:
#ff0000,#f00 - RGB:
rgb(255, 0, 0) - RGBA:
rgba(255, 0, 0, 0.5)(투명도 포함) - HSL:
hsl(0, 100%, 50%)
✅ CSS 단위
- 절대 단위:
px - 상대 단위:
em: 부모 기준rem: root(html) 기준%: 부모 비율 기준vw,vh: 뷰포트 기준
✅ rem이 선호되는 이유
- 반응형 웹에 유리
- 접근성 향상
- 유지보수 용이
- 미래 지향적 설계
🧾 요약: CSS에서 색상과 단위는 요소 스타일을 조정하는 핵심 도구이며, rem 단위는 반응형과 유지보수에 매우 적합합니다.
✅ 총정리
- CSS는 구조와 스타일을 분리하고, 다양한 선택자와 단위, 색상 표현법으로 유연한 디자인을 가능하게 합니다.
- 선택자 사용법과 우선순위 이해는 실전 스타일링에서 매우 중요합니다.
- rem 기반 설계는 반응형, 접근성, 유지보수에서 장점이 큽니다.
