CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어임.
태그 안에 한칸 띄우고 넣는 거
구조와 디자인을 분리하여 웹 페이지의 레이아웃, 색상, 폰트 등을 제어함
1. 기본 문법 구조
선택자 {
속성: 값;
속성: 값;
}- 예시:
h1 { color: blue; font-size: 24px; }
2. 선택자(Selector) 종류
(1) 기본 선택자
- 태그 선택자:
태그명(예:div,p) - 클래스 선택자:
.클래스명(예:.menu) - ID 선택자:
#아이디명(예:#header) - 전체 선택자:
*
(2) 조합 선택자
- 자식 선택자:
부모 > 자식(예:div > p) - 후손 선택자:
조상 후손(예:div p) - 그룹 선택자:
선택자1, 선택자2(예:h1, h2)
(3) 가상 클래스/요소
- 가상 클래스:
:hover,:active,:nth-child(n) - 가상 요소:
::before,::after
3. CSS 삽입 방법
(1) 내부 스타일 (HTML 문서 내부)
<head>
<style>
p { color: red; }
</style>
</head>(2) 외부 스타일 (별도 .css 파일)
<head>
<link rel="stylesheet" href="styles.css">
</head>(3) 인라인 스타일 (태그 내 직접 작성)
<p style="color: blue;">텍스트</p>4. 주요 속성 (Properties)
(1) 텍스트 & 폰트
p {
color: #ff0000; /* 글자색 */
font-size: 16px; /* 글자 크기 */
font-family: Arial; /* 폰트 종류 */
text-align: center; /* 정렬 방식 */
line-height: 1.5; /* 줄 간격 */
}(2) 배경 & 색상
div {
background-color: #f0f0f0; /* 배경색 */
background-image: url("image.jpg");
opacity: 0.8; /* 투명도 */
}(3) 박스 모델 (Box Model)
.box {
width: 200px; /* 너비 */
height: 100px; /* 높이 */
margin: 10px; /* 바깥 여백 */
padding: 20px; /* 안쪽 여백 */
border: 2px solid black; /* 테두리 */
box-sizing: border-box; /* 박스 크기 계산 방식 */
}(4) 레이아웃
.container {
display: flex; /* Flexbox 레이아웃 */
display: grid; /* Grid 레이아웃 */
position: relative; /* 위치 지정 방식 */
top: 10px; /* 위치 조정 */
}5. 반응형 디자인 (미디어 쿼리)
/* 화면 너비가 768px 이하일 때 적용 */
@media (max-width: 768px) {
.menu {
font-size: 14px;
}
}6. 애니메이션
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite;
}7. CSS 단위
- 절대 단위:
px(픽셀),cm,mm - 상대 단위:
%(부모 기준),em(폰트 크기 기준),rem(루트 폰트 기준),vw(뷰포트 너비 기준)
8. 주석
/* 이 부분은 주석입니다 */9. 구체성(Specificity) 규칙
- 우선순위:
!important> 인라인 스타일 >#id>.class>태그 - 예시:
#header .menu가.menu보다 우선 적용됨
10. 실전 예제
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: #f5f5f5;
}
.title {
color: navy;
text-align: center;
}
.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Hello CSS!</h1>
<button class="button">Click Me</button>
</div>
</body>
</html>주요 팁
- 외부 스타일시트 사용을 권장 (유지보수 편리)
- 클래스 이름은 의미 있게 작성 (예:
.main-nav❌.navigation✅) - 박스 모델 개념을 정확히 이해하기
- 브라우저 개발자 도구로 실시간 디버깅 가능
- CSS 프레임워크 (Bootstrap, Tailwind) 활용 시 효율적
CSS는 HTML을 꾸미는 거!
선택자와 속성을 조합해 원하는 디자인을 구현할 수 있음.
Flexbox/Grid를 잘 쓰면 예쁨
'Programming > HTML+CSS+JavaScript' 카테고리의 다른 글
| React 자주 쓰이는 문법 핵심 정리 (0) | 2025.02.14 |
|---|---|
| JavaScript 문법 정리 (0) | 2025.02.12 |
| HTML 기본문법 정리 (0) | 2025.02.12 |
| 웹개발+앱개발 풀스택 개발자 공부순서 추천 (0) | 2025.02.12 |
| Java, JavaScript 차이점 (0) | 2025.02.12 |