CSS(Cascading Style Sheets)는 웹 페이지를 어떻게 장식할 것인가에 대한 문서입니다.
CSS는 웹 페이지가 표현되는 방식을 정의할 뿐이며 실제 컨텐츠는 HTML과 Javascript에서 구현됩니다.
HTML은 마크업(Markup) 언어로 구분되지만 CSS는 마크업 언어도 프로그램 언어도 아닙니다.
Style sheet 언어로 구분되며 HTML 문서에서 구현되는 Element가 표현되는 방식을 정의합니다.
CSS 적용 방법
HTML 문서에서 모든 문단(P, Paragraph)이 빨간색으로 표시되기를 원하면 다음과 같이 CSS 파일을 작성하고 .css 확장자로 저장합니다.
p {
color: red;
}CSS는 단독으로 사용되지 않습니다. 앞서 설명한 것처럼 Element가 표현되는 방식을 정의하기 때문에 HTML 문서가 필요합니다.
HTML 문서를 다음과 같이 작성하고 .html 확장자로 저장합니다(CSS 파일과 동일한 디렉토리에 저장합니다).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Sample</title>
</head>
<body>
<p>CSS Sample paragraph</p>
</body>
</html>HTML 문서를 저장하고 HTML 문서 우클릭 | 다음으로 열기 | 웹 브라우저를 선택합니다.
웹 브라우저가 열리고 다음과 같이 표시됩니다.
HTML 문서에서 CSS를 적용하려면 다음 코드를 <head></head> 사이에 추가합니다.
<link href="<CSS 파일 이름>.css" rel="stylesheet" type="text/css" />HTML 문서를 저장하고 다시 웹 브라우저에서 열면 CSS가 적용된 것을 확인 할 수 있습니다.
예시의 CSS를 다시 살펴봅니다.
p {
color: red;
}전체 구조는 Rule set이라고 부릅니다.
| 코드 | 비고 | |
어떤 Element를 꾸밀 것인가를 선택합니다. 예제에서는 |
||
예제에서는 텍스트 색상 |
||
| 값(Value)은 Property가 갖는 값입니다. 예제에서는 텍스트 색상을 |
||
하나의 Selector에서 여러 Rule이 배치 될 수 있으며 |
||
Rule set에는 여러 개의 Rule이 동시에 적용 될 수 있습니다.
예를 들어 p Element의 여러 Property를 동시에 수정하려면 다음과 같이 작성합니다.
p {
color: red;
width: 500px;
border: 1px solid black;
}여러 개의 Element 에 CSS 적용하기
Selector에서 여러 개의 Element를 선택 할 수 있습니다.
하나의 Rule set으로 여러 Element의 스타일을 동시에 수정하기 위해서 사용됩니다.
p,
li,
h1 {
color: red;
}예시의 Rule set은 p li h1 Element의 텍스트 색상을 동시에 변경합니다.
각 Element는 콤마(,)로 구분합니다.
선택자(Selector)의 종류
앞서 예시의 Selector는 Element selector입니다. Element selector는 어떤 Element를 꾸밀 것인지를 선택합니다.
Selector는 Element 외에도 더 다양하고 구체적인 상황을 선택 할 수 있습니다.
| Selector | 선택 | 예시 |
| 특정 유형의 요소(Element) | ||
| 특정 ID를 가지고 있는 Element (ID는 HTML 문서에서 유니크한 값) |
||
| 특정 클래스(Class)를 가지고 있는 Element | ||
| 특정 속성(Attribute)를 가지고 있는 Element | ||
| 특정 Element이지만 특정 상태와 일치하는 경우 |
정리 및 복습
CSS(Cascading Style Sheet)는 웹 페이지를 어떻게 장식할 것인가에 대한 정의입니다.- CSS는 단독으로 사용되지 않고 HTML 문서와 함께 사용됩니다.
- CSS에서 하나의 표현 식은
Rule set이라고 부릅니다. - Rule set은 여러 개의
규칙(Rule)으로 구성됩니다. 규칙은선언(Declaration)이라고도 부릅니다. - Rule은
선택자(Selector)속성(Property)값(Value)으로 구성됩니다. - Selector는 다음을 선택 할 수 있습니다.
| 특정 유형의 요소(Element) | 특정 ID를 가지고 있는 Element | 특정 클래스(Class)를 가지고 있는 Element | 특정 속성(Attribute)를 가지고 있는 Element | 특정 Element이지만 특정 상태와 일치하는 경우 |
'Web > HTML, CSS, JS' 카테고리의 다른 글
| HTML(Hypertext Markup Language) 기초 (0) | 2023.11.16 |
|---|
