2 CSS 적용 방식
HTML 문서에 CSS를 적용하는 방법은 크게 세 가지가 있습니다.
1. 인라인(Inline) 스타일
<!-- HTML 코드 -->
<p style="color: red; font-size: 18px; font-weight: bold;">
빨간색 굵은 글씨
</p>
<div style="background: lightblue; padding: 10px; border-radius: 5px;">
파란색 배경의 박스
</div>
⚠️ 인라인 스타일의 단점
- HTML과 CSS가 섞여 코드가 복잡해짐
- 재사용성이 떨어짐
- 유지보수가 어려움
- 우선순위가 가장 높아 다른 스타일을 무시할 수 있음
2. 내부(Internal) 스타일
<head>
<style>
.highlight {
color: blue;
background-color: yellow;
padding: 5px;
border-radius: 3px;
}
#main-title {
font-size: 24px;
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1 id="main-title">중앙 정렬된 제목</h1>
<p class="highlight">하이라이트된 문단</p>
</body>
3. 외부(External) 스타일 (권장)
<!-- HTML 파일 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h3>카드 제목</h3>
<p>카드 내용</p>
</div>
</body>
/* styles.css 파일 */
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card h3 {
color: #333;
margin-top: 0;
}
✅ 외부 스타일의 장점
- 재사용성: 여러 HTML 페이지에서 공통 사용
- 유지보수: CSS 파일 하나만 수정하면 모든 페이지에 적용
- 캐싱: 브라우저가 CSS 파일을 캐시하여 로딩 속도 향상
- 협업: HTML과 CSS를 분리하여 역할 분담 가능
4 선택자(Selector)
선택자는 CSS의 핵심으로, 어떤 HTML 요소에 스타일을 적용할 것인지 결정합니다.
기본 선택자
클래스 선택자
.highlight {
background: yellow;
}
class="highlight" 요소에 적용
아이디 선택자
#main-content {
padding: 20px;
}
id="main-content" 요소에 적용
전체 선택자
* {
margin: 0;
padding: 0;
}
모든 요소에 적용 (초기화에 주로 사용)
그룹 선택자
h1, h2, h3 {
color: navy;
}
여러 태그에 동시 적용
자손 선택자
div p {
font-style: italic;
}
div 내부의 모든 p 요소에 적용
고급 선택자
결합자(Combinators)
/* 자손 선택자 (공백) */
div p {
color: red;
}
/* 자식 선택자 (>) */
div > p {
color: blue;
}
/* 인접 형제 선택자 (+) */
h2 + p {
font-weight: bold;
}
/* 일반 형제 선택자 (~) */
h2 ~ p {
margin-left: 20px;
}
가상 클래스 (Pseudo-class)
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: darkred;
}
input:focus {
border: 2px solid blue;
outline: none;
}
li:first-child {
font-weight: bold;
}
li:nth-child(even) {
background: #f0f0f0;
}
가상 요소 (Pseudo-element)
p::first-letter {
font-size: 2em;
color: red;
float: left;
margin-right: 5px;
}
p::before {
content: "★ ";
color: gold;
}
p::after {
content: " ✓";
color: green;
}
선택자 우선순위
기본 파란색 텍스트
클래스로 빨간색 텍스트
ID로 초록색 텍스트 (가장 높은 우선순위)
인라인 스타일로 보라색 텍스트 (최고 우선순위)
📊 우선순위 계산
인라인 스타일 (1000) > ID (100) > 클래스/속성/가상클래스 (10) > 태그 (1)
- 같은 우선순위면 나중에 작성된 규칙이 적용
!important를 사용하면 최고 우선순위 (남용 금지)
5 박스 모델(Box Model)
웹 페이지의 모든 요소는 하나의 "박스"로 취급됩니다. 이 박스는 네 개의 영역으로 구성됩니다.
박스 모델 구성 요소
- Content (콘텐츠): 텍스트나 이미지가 들어가는 실제 내용 공간
- Padding (패딩): 콘텐츠와 테두리 사이의 내부 여백
- Border (보더): 요소의 테두리
- Margin (마진): 요소와 다른 요소 사이의 외부 여백
박스 모델 속성
.box {
/* 콘텐츠 크기 */
width: 200px;
height: 100px;
/* 패딩 (내부 여백) */
padding: 20px;
/* 또는 개별 지정 */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
/* 테두리 */
border: 3px solid #007bff;
border-radius: 8px;
/* 마진 (외부 여백) */
margin: 20px;
/* 또는 개별 지정 */
margin: 10px 20px; /* 상하 좌우 */
margin: 10px 20px 30px 40px; /* 상 우 하 좌 */
}
200px × 100px
(+ padding + border)
박스 크기 계산
📏 실제 박스 크기
전체 너비 = width + padding-left + padding-right + border-left + border-right
전체 높이 = height + padding-top + padding-bottom + border-top + border-bottom
예시: width 200px + padding 20px + border 3px = 실제 너비 246px
box-sizing 속성
/* 기본값: content-box */
.box1 {
width: 200px;
padding: 20px;
border: 3px solid black;
box-sizing: content-box;
/* 실제 너비: 246px */
}
/* 권장: border-box */
.box2 {
width: 200px;
padding: 20px;
border: 3px solid black;
box-sizing: border-box;
/* 실제 너비: 200px */
}
content-box
(246px 너비)
border-box
(200px 너비)
💡 box-sizing: border-box 권장
대부분의 개발자들은 box-sizing: border-box를 선호합니다. 지정한 width/height가 곧 실제 요소의 크기가 되어 계산이 편리하기 때문입니다.
/* 모든 요소에 적용 */
* {
box-sizing: border-box;
}
6 레이아웃(Layout)
CSS에서 요소들을 배치하는 방법은 여러 가지가 있습니다. 현대 웹 개발에서는 주로 Flexbox와 Grid를 사용합니다.
Display 속성
/* 블록 레벨 */
.block {
display: block;
background: lightblue;
padding: 10px;
margin: 5px 0;
}
/* 인라인 */
.inline {
display: inline;
background: lightgreen;
padding: 5px;
}
/* 인라인 블록 */
.inline-block {
display: inline-block;
background: lightcoral;
padding: 10px;
width: 100px;
}
/* 숨김 */
.hidden {
display: none;
}
Flexbox (1차원 레이아웃)
Flexbox는 요소들을 한 방향(가로 또는 세로)으로 유연하게 배치하는 레이아웃 방법입니다.
기본 Flexbox
.flex-container {
display: flex;
background: #e9ecef;
padding: 20px;
gap: 10px;
}
.flex-item {
background: #007bff;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
Flexbox 정렬
/* 가로 정렬 (메인 축) */
.flex-center {
display: flex;
justify-content: center;
}
.flex-space-between {
display: flex;
justify-content: space-between;
}
.flex-space-around {
display: flex;
justify-content: space-around;
}
/* 세로 정렬 (교차 축) */
.flex-align-center {
display: flex;
align-items: center;
height: 100px;
}
CSS Grid (2차원 레이아웃)
Grid는 가로와 세로를 동시에 제어할 수 있는 강력한 2차원 레이아웃 시스템입니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: #e9ecef;
padding: 20px;
}
.grid-item {
background: #28a745;
color: white;
padding: 15px;
text-align: center;
border-radius: 5px;
}
/* 복잡한 그리드 */
.complex-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 60px 200px 60px;
gap: 10px;
}
Grid 영역 지정
.grid-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
gap: 10px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Position 속성
/* 기본값 */
.static {
position: static;
}
/* 상대 위치 */
.relative {
position: relative;
top: 10px;
left: 20px;
}
/* 절대 위치 */
.absolute {
position: absolute;
top: 0;
right: 0;
}
/* 고정 위치 */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
}
/* 스티키 */
.sticky {
position: sticky;
top: 0;
}
static (기본)
relative (상대)
absolute (절대)
7 스타일링 속성
색상 (Color)
CSS에서 색상을 지정하는 다양한 방법들이 있습니다.
red
#3498db
rgb(46, 204, 113)
rgba(231, 76, 60, 0.8)
/* 색상 지정 방법 */
.color-examples {
color: red; /* 색상 이름 */
color: #ff0000; /* 16진수 */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA (투명도 포함) */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA */
}
폰트 (Typography)
.typography {
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
font-style: italic;
line-height: 1.6;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 4px;
}
배경 (Background)
.background-demo {
background-color: #f0f0f0;
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* 단축 속성 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
단색 배경
') no-repeat center; background-size: 50px 50px; background-color: #f8f9fa; padding: 30px; margin: 10px 0; text-align: center; border-radius: 8px;">
패턴 배경
테두리와 그림자
.border-shadow {
border: 2px solid #007bff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
/* 개별 테두리 */
border-top: 3px solid red;
border-right: 3px solid green;
border-bottom: 3px solid blue;
border-left: 3px solid orange;
/* 텍스트 그림자 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
기본 테두리와 그림자
컬러풀 테두리와 텍스트 그림자
8 반응형 웹 디자인
다양한 크기의 기기(모바일, 태블릿, 데스크톱)에 대응하기 위해 미디어 쿼리(Media Queries)를 사용합니다.
미디어 쿼리 기본 문법
/* 기본 스타일 */
.responsive-box {
background: blue;
padding: 20px;
color: white;
}
/* 태블릿 (768px 이하) */
@media screen and (max-width: 768px) {
.responsive-box {
background: green;
padding: 15px;
}
}
/* 모바일 (480px 이하) */
@media screen and (max-width: 480px) {
.responsive-box {
background: red;
padding: 10px;
font-size: 14px;
}
}
반응형 박스 예시
브라우저 창 크기를 줄여보세요!
(600px 이하에서 색상이 바뀝니다)
자주 사용되는 브레이크포인트
| 기기 |
화면 크기 |
미디어 쿼리 |
| 모바일 |
~ 480px |
@media (max-width: 480px) |
| 태블릿 |
481px ~ 768px |
@media (max-width: 768px) |
| 데스크톱 |
769px ~ |
@media (min-width: 769px) |
| 대형 화면 |
1200px ~ |
@media (min-width: 1200px) |
반응형 기법들
/* 유연한 이미지 */
img {
max-width: 100%;
height: auto;
}
/* 유연한 컨테이너 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 반응형 그리드 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* 반응형 폰트 */
html {
font-size: 16px;
}
@media (max-width: 768px) {
html {
font-size: 14px;
}
}
9 애니메이션과 전환
CSS를 사용해 요소에 동적인 효과를 줄 수 있습니다.
Transition (전환 효과)
.transition-demo {
width: 100px;
height: 100px;
background: #28a745;
border-radius: 5px;
transition: all 0.3s ease;
cursor: pointer;
}
.transition-demo:hover {
transform: scale(1.2) rotate(45deg);
border-radius: 50%;
background: #007bff;
}
Animation (키프레임 애니메이션)
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
.animation-demo {
width: 100px;
height: 100px;
background: #007bff;
border-radius: 50%;
animation: bounce 2s infinite;
}
Transform 속성
/* 이동 */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
/* 크기 조절 */
transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5);
/* 회전 */
transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
/* 기울임 */
transform: skew(20deg, 10deg);
/* 조합 */
transform: translate(50px, 50px) rotate(45deg) scale(1.2);
애니메이션 속성
.animation-properties {
animation-name: bounce; /* 키프레임 이름 */
animation-duration: 2s; /* 지속 시간 */
animation-timing-function: ease; /* 타이밍 함수 */
animation-delay: 0.5s; /* 지연 시간 */
animation-iteration-count: infinite; /* 반복 횟수 */
animation-direction: alternate; /* 방향 */
animation-fill-mode: forwards; /* 채움 모드 */
/* 단축 속성 */
animation: bounce 2s ease-in-out 0.5s infinite alternate forwards;
}