[프론트엔드] CSS(Cascading Style Sheets)란?
CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하기 위한 언어입니다
HTML이 웹 페이지의 내용을 구조화하는 데 사용되는 반면, CSS는 이러한 구조에 시각적인 스타일을 적용하여 웹 페이지를 디자인하고 꾸밀 수 있습니다
CSS의 기본 구조
CSS는 일련의 규칙 집합으로 구성되어 있습니다
각 규칙은 선택자(selector), 속성(property), 값(value)으로 이루어져 있습니다
선택자는 스타일을 적용할 HTML 요소를 선택하는 데 사용되며, 속성은 선택한 요소의 스타일을 지정하고 값은 해당 속성에 적용할 스타일의 값을 나타냅니다
선택자 {
속성: 값;
}
예를 들어, 모든 `<h1>` 요소의 글꼴 색상을 빨간색으로 지정하려면 다음과 같이 작성할 수 있습니다
h1 {
color: red;
}
CSS의 적용 방법
CSS는 웹 페이지에서 3가지 방법으로 적용될 수 있습니다
1. 내부 스타일 시트(Internal Style Sheet)
HTML 문서 안에 `<style>` 태그를 사용하여 CSS를 포함시키는 방법입니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
</body>
</html>
2. 외부 스타일 시트(External Style Sheet)
별도의 CSS 파일을 만들고 HTML 문서에서 이를 참조하는 방법입니다
<!-- style.css -->
h1 {
color: red;
}<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, CSS!</h1>
</body>
</html>
3. 인라인 스타일(Inline Style)
HTML 요소의 `style` 속성을 사용하여 개별적으로 스타일을 지정하는 방법입니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color: red;">Hello, CSS!</h1>
</body>
</html>
CSS의 주요 속성
CSS는 다양한 속성을 제공하여 웹 페이지를 다양한 방식으로 스타일링할 수 있습니다
몇 가지 주요 속성은 다음과 같습니다
- color : 텍스트의 색상 지정
- font-family : 글꼴 지정
- font-size : 글꼴 크기 지정
- background-color : 배경 색상 지정
- margin, paddin : 요소의 외부 여백 및 내부 여백 지정
- border : 테두리 스타일 및 크기 지정
- width, height : 요소의 너비와 높이 지정
CSS의 상속과 우선 순위
CSS는 상속을 지원합니다
이는 부모 요소의 스타일이 자식 요소에게 상속된다는 것을 의미합니다
그러나 모든 속성이 상속되는 것은 아닙니다
일부 속성은 상속되지 않거나 초기 값으로 설정됩니다
CSS 규칙이 충돌하는 경우, 우선 순위에 따라 결정됩니다
인라인 스타일이 가장 높은 우선 순위를 가지며, 그 다음이 ID 선택자, 클래스 선택자, 태그 선택자, 일반 선택자 순서로 우선 순위가 낮아집니다