**CSS(Cascading Style Sheets)**는 HTML 문서의 색상, 폰트, 크기, 배치 등 외형적인 디자인을 지정하여 보기 좋게 꾸미는 스타일 시트 언어입니다.
1. CSS 적용 3가지 방법
- 외부 스타일시트 (External): 별도의
.css파일을 만들고<link>태그로 연결 (가장 권장). - 내부 스타일시트 (Internal): HTML 문장의
<head>안에<style>태그로 작성. - 인라인 스타일 (Inline): HTML 태그에 직접
style=""속성으로 지정 (유지보수가 어려워 비권장).
<!-- 외부 CSS 연결 표준 방법 -->
<link rel="stylesheet" href="style.css">
2. CSS 기본 문법과 핵심 선택자 (Selector)
/* 선택자 { 속성: 속성값; } */
h1 {
color: #ff6b35;
font-size: 24px;
}
/* 클래스 선택자 (. 사용): 여러 요소에 재사용 가능 */
.highlight {
background-color: yellow;
}
/* 아이디 선택자 (# 사용): 페이지 내 유일한 1개 요소 */
#main-header {
font-weight: bold;
}
3. CSS 적용 우선순위 (Cascading Order)
동일한 HTML 요소에 여러 스타일이 동시에 적용될 때 다음 명시도(Specificity) 순서에 따라 최종 디자인이 결정됩니다.
!important(최우선 강제 적용)- 인라인 스타일 (
style="...") - 아이디 선택자 (
#id) - 클래스 / 가상클래스 선택자 (
.class,:hover) - 태그 선택자 (
h1,p,div) - 전체 선택자 (
*) 및 상속된 스타일
4. 자주 묻는 질문 (Q&A)
Q. 클래스(.class)와 아이디(#id)는 언제 나누어 써야 하나요?
A. 아이디(#id)는 페이지 내에서 단 하나만 존재하는 독보적 요소(예: 최상단 헤더, 메인 레이아웃)에만 사용하고, 클래스(.class)는 버튼 스타일, 카드 디자인처럼 여러 곳에 반복적으로 재사용될 스타일 스타일에 지정합니다.