/* CSS 주석 예시 */인라인 스타일
HTML 태그의 style 속성에 직접 CSS를 작성하는 방식입니다. 간단한 테스트에 유용하지만, 유지보수와 재사용성이 낮아 실제 프로젝트에서는 지양하는 것이 좋습니다.
<p style="color: blue;">안녕하세요</p>내부 스타일 (임베디드 스타일)
하나의 HTML 파일 내에서 <head> 태그 안에 <style> 블록을 선언하여 CSS를 작성하는 방식입니다. 단일 페이지에만 적용됩니다.
<head>
<meta charset="utf-8">
<title>페이지 제목</title>
<style>
p { background-color: lightyellow; }
</style>
</head>외부 스타일 (링크 방식)
CSS 코드를 별도의 .css 파일로 분리하고, HTML의 <link> 태그로 불러오는 방식입니다. 여러 페이지에서 동일한 스타일을 공유할 수 있어 유지보수와 성능에 가장 효율적입니다.
<link rel="stylesheet" type="text/css" href="main-style.css">CSS 선택자 (Selectors)
태그 선택자 (Type Selector)
p { color: darkgreen; }ID 선택자 (ID Selector)
#unique-element { background-color: skyblue; }클래스 선택자 (Class Selector)
.highlight { font-weight: bold; }
p.special { text-decoration: underline; }
/* 주의: 클래스명은 숫자로 시작할 수 없습니다. */
/* HTML class 속성에 여러 값을 공백으로 구분해 지정할 수 있습니다. */전체 선택자 (Universal Selector)
* { margin: 0; padding: 0; box-sizing: border-box; }결합 선택자 (Combinators)
자손 선택자 (Descendant Selector)
li 내부에 있는 모든 a 태그 선택:
li a { color: navy; }자식 선택자 (Child Selector)
div의 바로 아래 자식인 p만 선택:
div > p { font-family: 'Courier New', monospace; }인접 형제 선택자 (Adjacent Sibling Selector)
div 바로 뒤에 오는 하나의 p 선택:
div + p { margin-top: 10px; }일반 형제 선택자 (General Sibling Selector)
#item 뒤에 오는 모든 p 형제 선택:
#item ~ p { border: 1px solid gray; }속성 선택자 (Attribute Selector)
/* title 속성이 있는 p */
p[title] { color: teal; }
/* title 속성값이 정확히 "notice"인 p */
p[title="notice"] { background-color: lightcoral; }그룹화 및 중첩
그룹 선택자 (Grouping Selector)
여러 요소에 동일한 스타일을 적용할 때 쉼표로 구분합니다.
h1, h2, h3 { color: darkslategray; }중첩 선택자 (Nesting)
클래스 .article 내부의 모든 p 태그에 스타일 적용:
.article p { line-height: 1.6; }가상 클래스 (Pseudo-classes)
/* 방문하지 않은 링크 */
a:link { color: blue; }
/* 마우스를 올렸을 때 */
a:hover { color: orange; }
/* 클릭하는 순간 (활성화) */
a:active { color: red; }
/* 방문한 링크 */
a:visited { color: purple; }
/* 입력 필드가 포커스를 받았을 때 */
input:focus { outline: 2px solid deepskyblue; background-color: lightcyan; }가상 요소 (Pseudo-elements)
/* 첫 글자 */
p::first-letter { font-size: 2em; color: crimson; }
/* 요소 앞에 내용 삽입 */
p::before { content: "★ "; color: gold; }
/* 요소 뒤에 내용 삽입 */
p::after { content: " ★"; color: gold; }
/* 참고: ::before와 ::after는 주로 플로트(float) 해제 등 레이아웃 용도로도 사용됩니다. */선택자 우선순위 (Specificity) 및 상속
CSS는 상속(inheritance) 특성이 있어, 부모 요소의 일부 속성(예: color, font-family)이 자식 요소에 전달됩니다.
우선순위는 가중치(점수)로 계산되며, 숫자가 클수록 우선 적용됩니다.
- 인라인 스타일: 1000점
- ID 선택자: 100점
- 클래스, 가상 클래스, 속성 선택자: 10점
- 태그(요소) 선택자, 가상 요소: 1점
우선순위 점수는 서로 다른 자리수끼리 합산되지 않으며, '올림'되지 않습니다.
!important 규칙을 사용하면 모든 우선순위를 무시하고 강제로 스타일을 적용할 수 있지만, 디버깅과 유지보수를 어렵게 만들 수 있으므로 꼭 필요한 경우에만 신중히 사용해야 합니다.
CSS 주요 속성
너비(width)와 높이(height)
블록 레벨 요소(예: div, p)에 적용 가능하며, 인라인 요소(예: span, a)는 콘텐츠 크기에 따라 결정됩니다.
.box { width: 300px; height: 200px; }폰트 속성 (Font Properties)
body { font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif; }글자 크기 (font-size)
p { font-size: 16px; }텍스트 정렬 (text-align)
.center-text { text-align: center; }
.left-text { text-align: left; }
.right-text { text-align: right; }
.justify-text { text-align: justify; }