CSS 1-이론

이종찬·2025년 3월 28일

웹 문서를 디자인하는 스타일시트 언어

CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어입니다. HTML이 문서의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다.

CSS의 기본 구조는 주로 HTML 문서의 <head> 요소 안에서 <style> 태그를 사용하여 정의됩니다. 또는 외부 CSS 파일을 연결하여 사용할 수 있습니다.

인라인 스타일:

<style> 요소 내부에 CSS 속성을 직접 입력할 수 있습니다.

외부 CSS 파일:

<link> 요소에 href 속성으로 css파일명을 입력하면 HTML 문서와 외부에 있는 CSS 파일이 연결됩니다.
스타일 속성이 많지 않다면 인라인 스타일로 작성할 수 있으나 일반적으로는 외부 CSS파일을 사용하는 것을 권장합니다.

선택자(Selectors)

CSS는 HTML 요소를 선택하기 위해 선택자를 사용합니다. 선택자는 스타일을 적용할 대상을 지정합니다.

/* 선택자 예제 */
body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    font-size: 16px;
}

위의 코드에서 body, h1, p는 각각 <body> 요소, <h1> 요소, <p> 요소를 선택하는 선택자입니다. 같은 요소가 두 개 이상 있어서 각각의 스타일을 지정하고 싶을 때는 id, class 선택자를 사용합니다.

class 선택자

사용법: .클래스
class 선택자는 여러 요소를 그룹화하고, 해당 그룹에 스타일을 적용합니다. 하나의 요소가 여러 클래스를 가질 수 있으며, 여러 요소가 동일한 클래스를 가질 수 있습니다.

id 선택자

사용법: #아이디
ID 선택자는 문서 내에서 유일한 식별자를 가진 요소를 선택합니다. HTML 문서 전체에서 동일한 ID를 가지는 두 개 이상의 요소가 있으면 안 됩니다. ID는 유일성을 보장하기 위해 사용됩니다.

속성과 값

스타일을 지정하기 위해서는 속성과 값의 쌍을 사용합니다.

/* 속성과 값 예제 */
body {
    background-color: #f4f4f4; /* 배경색 지정 */
    font-family: Arial, sans-serif; /* 글꼴 지정 */
}

h1 {
    color: #333; /* 글자색 지정 */
}

p {
    font-size: 16px; /* 글자 크기 지정 */
}