강의 내용
1. CSS 기초와 선택자
CSS(Cascading Style Sheets)는 HTML 문서의 스타일을 정의하는 언어입니다.
CSS 기본 문법
선택자 {
속성: 값;
속성: 값;
}
/* 예시 */
h1 {
color: blue;
font-size: 24px;
}주요 선택자 종류
태그 선택자
p {
color: black;
line-height: 1.5;
}클래스 선택자
.highlight {
background-color: yellow;
font-weight: bold;
}
/* HTML: <p class="highlight">강조된 텍스트</p> */ID 선택자
#header {
background-color: #333;
color: white;
padding: 20px;
}
/* HTML: <div id="header">헤더 내용</div> */조합 선택자
/* 후손 선택자 */
nav ul {
list-style: none;
}
/* 자식 선택자 */
article > p {
margin-bottom: 15px;
}
/* 인접 선택자 */
h2 + p {
font-weight: bold;
}2. 색상과 단위
CSS에서 색상과 크기를 지정하는 다양한 방법을 알아봅시다.
색상 표현 방법
키워드
color: red;
background-color: blue;
border-color: green;HEX 코드
color: #ff0000; /* 빨간색 */
color: #00ff00; /* 초록색 */
color: #0000ff; /* 파란색 */
color: #333; /* 짧은 형태 */RGB / RGBA
color: rgb(255, 0, 0); /* 빨간색 */
color: rgba(255, 0, 0, 0.5); /* 반투명 빨간색 */
background: rgba(0, 0, 0, 0.8); /* 반투명 검은색 */HSL / HSLA
color: hsl(0, 100%, 50%); /* 빨간색 */
color: hsl(120, 100%, 50%); /* 초록색 */
color: hsla(240, 100%, 50%, 0.5); /* 반투명 파란색 */CSS 단위
절대 단위
px- 픽셀 (가장 일반적)pt- 포인트 (인쇄용)cm,mm- 센티미터, 밀리미터
상대 단위
%- 부모 요소 대비 백분율em- 현재 요소의 폰트 크기 기준rem- 루트 요소의 폰트 크기 기준vw,vh- 뷰포트 너비/높이의 1%
3. 폰트와 텍스트
텍스트의 외관을 제어하는 CSS 속성들을 알아봅시다.
폰트 관련 속성
body {
font-family: 'Noto Sans KR', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
}
h1 {
font-family: Georgia, serif;
font-size: 2.5em;
font-weight: bold;
font-style: normal;
}
.italic-text {
font-style: italic;
}
.small-caps {
font-variant: small-caps;
}텍스트 관련 속성
.text-styling {
color: #333;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 5px;
text-indent: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.no-decoration {
text-decoration: none; /* 링크 밑줄 제거 */
}
.justify-text {
text-align: justify;
}4. 박스 모델
CSS 박스 모델은 모든 HTML 요소를 둘러싸는 박스를 설명합니다.
margin
border
padding
content
박스 모델 속성
.box-example {
/* 내용 영역 크기 */
width: 300px;
height: 200px;
/* 안쪽 여백 */
padding: 20px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
/* 축약형: padding: 10px 15px; (상하 좌우) */
/* 테두리 */
border: 2px solid #333;
border-width: 2px;
border-style: solid;
border-color: #333;
/* 바깥쪽 여백 */
margin: 20px;
margin: 20px auto; /* 가로 중앙 정렬 */
/* 배경색 */
background-color: #f0f0f0;
}Box-sizing 속성
/* 기본값: content-box */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 2px solid #333;
/* 실제 너비 = 300px + 40px(padding) + 4px(border) = 344px */
}
/* 권장: border-box */
.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid #333;
/* 실제 너비 = 300px (padding과 border 포함) */
}
/* 전체 적용 */
* {
box-sizing: border-box;
}5. CSS 연결 방법
HTML 문서에 CSS를 적용하는 세 가지 방법이 있습니다.
1. 외부 스타일시트 (권장)
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR">
</head>장점: 여러 페이지에서 재사용 가능, 유지보수 용이, 캐싱 효과
2. 내부 스타일시트
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>사용 시기: 단일 페이지 전용 스타일, 특정 페이지만의 고유한 스타일
3. 인라인 스타일
<p style="color: red; font-weight: bold;">
이 텍스트는 빨간색이고 굵습니다.
</p>
<div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;">
스타일이 직접 적용된 박스
</div>주의: 유지보수가 어려우므로 특별한 경우가 아니면 사용 지양