✅ CSS란?
- Cascading Style Sheet의 줄임말
- HTML / XML 같은 마크업 언어의 **시각적 표현(디자인)**을 담당하는 스타일 시트 언어
- 색상, 글꼴, 레이아웃, 크기 등을 정의
- 웹 콘텐츠(HTML 구조)와 디자인(CSS)을 분리하는 핵심 역할
✅ CSS의 주요 역할
- 콘텐츠와 디자인의 분리
HTML은 구조를, CSS는 디자인을 담당 → 구조 변경 없이 스타일만 손쉽게 수정 가능 - 일관된 스타일 적용
여러 HTML 문서에 동일한 CSS 적용 → 사이트 전체의 일관성 유지 - 반응형 디자인 지원
PC / Mobile / Tablet 등 기기별 최적화된 레이아웃 가능
✅ CSS 적용 방법
1. 인라인 스타일 (Inline Style)
<p style="color:red;">Hello World</p>- 태그에 직접
style속성 작성 - HTML과 CSS가 분리되지 않아 유지보수 어려움 → 특별한 경우 외에는 잘 사용하지 않음
2. 내부 스타일 시트 (Internal Style Sheet)
<head>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>Hello CSS</p>
</body><head>내부에<style>태그 작성- 문서 하나에만 적용할 경우 사용
3. 외부 스타일 시트 (Linking Style Sheet, 권장)
<!-- HTML -->
<link rel="stylesheet" href="style.css">
<p>Hello CSS</p>/* style.css */
p { color: green; }- HTML과 CSS 파일을 분리 후 연결
- 하나의 CSS 파일로 여러 HTML 문서에 적용 가능
- 가장 권장되는 방식
👉 외부 CSS는 로컬 파일뿐 아니라 외부 URL을 직접 불러올 수도 있음
<link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-06/html.css">✅ 선택자 (Selector)
1. 기본 선택자
* { margin: 0; padding: 0; }2. 태그 선택자
p { color: red; }3. 클래스 선택자
.text-blue { color: blue; }👉 . 으로 시작
4. 아이디 선택자
#unique { color: green; }👉 # 으로 시작
5. 그룹 선택자
h1, h2, p { font-weight: bold; }📌 우선순위
id > class > 태그 > 기본(*)
✅ 결합자 & 가상 클래스
자손 / 자식 결합자
div p { color: red; } /* 자손 전체 */
div > p { color: blue; } /* 직계 자식 */형제 결합자
h1 + p { color: green; } /* 바로 뒤 */
h1 ~ p { color: orange; } /* 모든 뒤 */가상 클래스
a:hover { color: hotpink; }✍️ 글자와 텍스트 스타일
✅ 글자 스타일
p {
font-style: italic; /* 기울임 */
font-weight: bold; /* 굵게 */
font-size: 20px; /* 크기 */
}font-style: italic / obliquefont-weight: normal / bold- HTML 태그(
<i>,<em>,<b>,<strong>)로도 비슷하게 가능하지만, CSS로 스타일을 통합 관리하는 게 표준적 방식
✅ 글자 크기 단위
px: 절대 단위 (픽셀 기준)pt: 절대 단위 (인쇄용, 1pt = 1/72인치)%,em: 부모 요소 기준 상대 크기rem:<html>기준 상대 크기 (중첩 영향 없음)
예시:
html { font-size: 16px; }
p { font-size: 1.5rem; } /* 24px */✅ 글자 꾸미기
text-decoration
p {
text-decoration: underline; /* 밑줄 */
text-decoration: line-through; /* 취소선 */
}text-transform
p {
text-transform: uppercase; /* 모두 대문자 */
}👉 DB에서 가져온 데이터 표준화 등에 유용 (예: 신용카드 이름 대문자 표기)
text-shadow
p {
text-shadow: 2px 2px 5px gray;
}
/* x좌표, y좌표, 흐림 정도, 색상 */📌 요약
- CSS = HTML 구조에 디자인 입히기
- 적용 방식 : 인라인 < 내부 < 외부(권장)
- 선택자 :
id > class > 태그 > * - 글자 스타일 :
font-style,font-weight,font-size - 꾸미기 속성 :
text-decoration,text-transform,text-shadow
