CSS3 스타일 시트

1. 개요 및 핵심 개념

CSS(Cascading Style Sheets)는 HTML 문서의 외형을 지정하는 표준 웹 개발 기술로, 웹 페이지의 디자인을 쉽고 효율적으로 관리할 수 있게 해줍니다.

CSS란?

Cascading Style Sheet의 약자

색상, 폰트, 크기 등 HTML 요소의 시각적 스타일을 지정

웹 개발의 3대 축:

HTML: 문서의 구조와 내용

CSS: 문서의 스타일(디자인)

JavaScript: 문서의 동작(인터랙션)

CSS의 주요 특징

선택자(Selector): 스타일을 적용할 HTML 요소를 선택
삽입 방법: 외부, 내부, 인라인 등 다양한 방식으로 적용 가능
텍스트 스타일링: 색상, 폰트, 정렬, 그림자 등 다양한 속성 제공

CSS는 웹 페이지의 시각적 표현을 담당하는 핵심 기술로, HTML 및 JavaScript와 함께 현대 웹 개발의 표준을 이룹니다.
CSS3는 애니메이션, 변환, 다양한 효과 등 고급 기능을 포함하여 웹 디자인의 가능성을 크게 확장하고 있습니다.

2. CSS의 필요성과 장점

CSS는 웹 페이지의 디자인과 유지 관리를 효율적으로 만들어주는 핵심 기술입니다.
HTML만으로 스타일을 지정하던 시절에는 각 요소마다 개별적으로 속성을 지정해야 했기 때문에, 웹 페이지의 수정과 관리가 매우 번거로웠습니다.
CSS의 도입으로 다음과 같은 이점이 생겼습니다.

CSS의 필요성

구조와 디자인의 분리
HTML은 문서의 구조와 내용을 담당하고, CSS는 스타일(디자인)을 담당하여 역할을 분리합니다.
유지 보수의 용이성
한 번의 CSS 파일 수정만으로 전체 웹 사이트의 스타일을 일괄 변경할 수 있습니다.
일관성 있는 디자인
여러 페이지에 동일한 스타일을 적용하여 사이트 전체의 일관성을 유지할 수 있습니다.
다양한 사용자 환경 지원
다양한 기기와 환경(PC, 모바일 등)에 맞는 스타일을 손쉽게 적용할 수 있습니다.

CSS의 주요 장점

웹 디자인의 자유로움
텍스트의 크기, 글꼴, 줄 간격, 배경, 색상, 배열 위치 등 다양한 스타일을 자유롭게 지정할 수 있습니다.
작업 시간 단축
반복적인 스타일 지정 작업을 줄이고, 전체 문서에 빠르게 스타일을 적용할 수 있습니다.
대규모 사이트 관리 용이
대형 웹사이트에서도 효율적으로 스타일을 관리할 수 있습니다.
접근성 및 사용자 경험 향상
반응형 웹 디자인 등 다양한 접근성 기능을 쉽게 구현할 수 있습니다.

요약:
CSS는 웹 페이지의 디자인을 쉽고 효율적으로 관리할 수 있게 하며, 유지 보수와 확장성, 일관성 있는 웹 디자인을 가능하게 합니다.

3. CSS 문법 및 구성

CSS는 HTML 요소의 스타일을 지정하는 명령어의 집합입니다. 기본 구조와 작성 방법은 다음과 같습니다.

CSS의 기본 구조

선택자(Selector): 스타일을 적용할 HTML 요소를 지정합니다.
선언부(Declaration Block): 중괄호 {} 안에 스타일 속성과 값을 쌍으로 작성합니다.
속성(Property)와 값(Value): 각 스타일은 속성: 값; 형태로 작성합니다.

선택자 {
  속성1: 값1;
  속성2: 값2;
}

예시

p {
  background-color: yellow;
  color: blue;
}

위 예시는 모든 <p> 요소의 배경색을 노란색, 글자색을 파란색으로 지정합니다.

주석(Comment)

CSS에서 주석은 /* ... */ 형태로 작성합니다.
주석은 코드 실행에 영향을 주지 않으며, 설명이나 메모를 남길 때 사용합니다.

/* 이 부분은 주석입니다 */

작성 위치

일반적으로 CSS는 HTML 문서의 <head> 태그 내부에 <style>...</style>로 작성하거나, 별도의 .css 파일로 분리하여 사용합니다.

<head>
  <style>
    /* CSS 코드 작성 */
  </style>
</head>

Tip: CSS를 별도의 파일로 관리하면 여러 페이지에서 동일한 스타일을 쉽게 적용하고, 유지보수가 편리해집니다.

4. CSS 선택자 (Selector)

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 핵심 도구입니다. 다양한 선택자를 조합해 원하는 요소에 정밀하게 스타일을 지정할 수 있습니다.

주요 선택자 종류

선택자 유형	문법 예시	설명
타입 선택자	`p { ... }`	태그명으로 요소 선택 예: 모든 `<p>` 요소에 적용
전체 선택자	`* { ... }`	모든 요소에 스타일 적용 예: `* { color: blue; }`
아이디 선택자	`#header { ... }`	특정 id 속성의 요소 선택 예: `<div id="header">`
클래스 선택자	`.menu { ... }`	특정 class 속성의 요소(여러 개 가능) 선택 예: `<li class="menu">`
선택자 그룹	`h1, h2, h3 { ... }`	여러 선택자에 동일 스타일 적용
후손 결합자	`div em { ... }`	특정 요소 내부의 후손 요소 선택 예: `div` 안의 모든 `em`
자식 결합자	`ul > li { ... }`	특정 요소의 직계 자식만 선택
형제 결합자	`h2 + p { ... }`	특정 요소 바로 다음 형제 요소 선택
의사 클래스	`a:hover { ... }`	특정 상태(마우스 오버 등)에서 요소 선택
속성 선택자	`input[type="text"] { ... }`	특정 속성을 가진 요소 선택

선택자 예시

/* 타입 선택자 */
p {
  background-color: yellow;
}

/* 전체 선택자 */
* {
  color: blue;
}

/* 아이디 선택자 */
#main-title {
  font-size: 2em;
}

/* 클래스 선택자 */
.highlight {
  background: #ff0;
}

/* 선택자 그룹 */
h1,
h2,
h3 {
  font-family: sans-serif;
}

/* 후손 결합자 */
body em {
  color: red;
}

/* 자식 결합자 */
body > h3 {
  color: blue;
}

/* 의사 클래스 */
a:hover {
  text-decoration: underline;
}

/* 속성 선택자 */
input[disabled] {
  background: #eee;
}

Tip: 선택자를 적절히 조합하면, 복잡한 구조의 HTML에서도 원하는 요소에만 정확하게 스타일을 적용할 수 있습니다.

5. CSS 삽입 방법

CSS는 HTML 문서에 다음 세 가지 주요 방식으로 삽입할 수 있습니다.

외부 스타일 시트 (External Style Sheet)

별도의 .css 파일에 스타일을 작성하고, HTML 문서의 <head> 영역에서 <link> 태그로 연결합니다.
여러 웹 페이지에서 동일한 스타일을 공유할 수 있어 유지보수와 일관성에 매우 유리합니다.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

내부 스타일 시트 (Internal Style Sheet)

HTML 문서의 <head> 태그 내부에 <style> 태그를 사용하여 CSS를 직접 작성합니다.
해당 HTML 파일에만 스타일이 적용됩니다.

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

인라인 스타일 시트 (Inline Style Sheet)

HTML 요소의 style 속성에 직접 CSS를 작성합니다.
특정 요소에만 스타일을 적용할 때 사용하지만, 유지보수가 어렵고 권장되지 않습니다.

<p style="color: blue; font-size: 18px;">인라인 스타일 예시</p>

팁

외부 스타일 시트를 사용하면 여러 페이지에서 동일한 스타일을 쉽게 적용하고, 전체 사이트의 디자인을 한 번에 변경할 수 있습니다.

다중 스타일 시트 및 우선순위

여러 스타일 시트가 하나의 요소에 적용될 경우, 다음과 같은 우선순위가 적용됩니다 (아래로 갈수록 우선순위가 낮아집니다):

인라인 스타일 시트 (style 속성)
내부 스타일 시트 (<style> 태그)
외부 스타일 시트 (<link> 태그)
브라우저 기본 스타일

참고:
상속 가능한 속성의 경우, 조상 요소에 지정된 스타일이 자식 요소에 적용될 수 있습니다.

여러 스타일 시트가 하나의 요소에 적용될 경우, 다음과 같은 우선순위를 따릅니다 (아래로 갈수록 우선순위가 낮음).

인라인 스타일 시트
헤드 섹션에 저장된 내부 스타일 시트
외부 스타일 시트
웹 브라우저 디폴트값

상속: 조상 요소에 지정된 속성은 후손 노드로 상속됩니다. 이는 보다 간결하게 CSS를 작성할 수 있게 합니다.

6. 텍스트의 색상, 폰트, 스타일

텍스트는 웹 페이지에서 큰 비중을 차지하며, CSS의 폰트 속성은 페이지 디자인에 중요한 영향을 미칩니다.

텍스트 색상

색상 표현: 빛의 삼원색(RGB: Red, Green, Blue)을 혼합하여 표현
표현 방법:
- 이름: "red"
- 16진수: #FF0000
- 10진수(RGB 값): rgb(255,0,0) 또는 %로 표현: rgb(100%,0%,0%)
안전한 색상(Web Safe Color): 과거 256가지 색상만 지원되던 시절, 모든 컴퓨터에서 지원되던 약 216가지 색상

텍스트 폰트

주요 속성: font, font-family, font-size, font-style, font-weight
font-family: 여러 폰트 이름을 쉼표로 나열
Serif와 Sans-serif:
- Serif: 글자의 끝에 삐침
- Sans-serif: 삐침 없음
폰트 패밀리: Serif, Sans-serif, Monospace, Cursive, Fantasy 등
웹 폰트: @font-face 문법 사용
font-size: 크기 단위로 px, %, em, 키워드 사용 가능
font-weight: 굵기(bold, normal, 숫자)
font-style: 이탤릭체(normal, italic, oblique)
폰트 축약 기법: font 속성 사용, 순서와 필수 항목(font-size, font-family) 주의

텍스트 스타일 설정

color: 텍스트 색상
text-align: 수평 정렬(왼쪽, 중앙, 오른쪽, 양쪽)
text-decoration: 줄(위, 가운데, 밑줄)
text-transform: 대소문자 변환
text-shadow: 그림자(이동거리, 흐림, 색상)
word-wrap: 긴 단어 자동 줄넘김
다중 컬럼: column-count, column-gap, column-rule로 여러 단 구성

1. 개요 및 핵심 개념​

CSS의 주요 특징​

2. CSS의 필요성과 장점​

CSS의 필요성​

CSS의 주요 장점​

3. CSS 문법 및 구성​

CSS의 기본 구조​

예시​

주석(Comment)​

작성 위치​

4. CSS 선택자 (Selector)​

주요 선택자 종류​

선택자 예시​

5. CSS 삽입 방법​

외부 스타일 시트 (External Style Sheet)​

내부 스타일 시트 (Internal Style Sheet)​

인라인 스타일 시트 (Inline Style Sheet)​

다중 스타일 시트 및 우선순위​

6. 텍스트의 색상, 폰트, 스타일​

텍스트 색상​

텍스트 폰트​

텍스트 스타일 설정​