흔히 CSS 스타일 시트라 불리는 캐스케이딩 스타일 시트(Cascading Style Sheets)는 HTML이나 XML로 작성된 문서의 외관을 제어하는데 사용되는 언어입니다. CSS를 통해 웹 디자이너는 웹사이트의 레이아웃, 색상, 글꼴 및 기타 시각적 측면을 제어함으로써 매력적이고 사용자 친화적인 웹사이트를 만들 수 있습니다. 프로그래밍 언어 분류에서 CSS는 프론트엔드 언어(Front-end Language)이자 마크업 언어(Markup Language)에 속합니다.
CSS 스타일 시트 기본 문법
CSS의 기본 구문은 ‘선택자’와 ‘선언 블록’이라는 두 가지 주요 구성 요소로 구성됩니다.
- 선택자 : 선택자는 스타일을 적용하려는 HTML 요소를 대상으로 하며, 요소 선택자, 클래스 선택자, ID 선택자, 속성 선택자 또는 의사 클래스/의사 요소 선택자등으로 구분됩니다. 각 유형의 예를 살펴보겠습니다.
- 요소 선택자: 태그 이름을 기준으로 HTML 요소를 타겟팅합니다.
p {
/* CSS rules here */
}- 클래스 선택자: 특정 클래스 속성을 가진 HTML 요소를 대상으로 합니다.
.classname {
/* CSS rules here */
}- ID 선택자: 고유한 ID 속성을 가진 특정 HTML 요소를 대상으로 합니다.
idname {
/* CSS rules here */
}- 속성 선택자: 특정 속성을 가진 HTML 요소를 대상으로 합니다.
[attribute="value"] {
/* CSS rules here */
}- 선언 블록 : 선언 블록에는 각각 속성과 값으로 구성된 하나 이상의 선언이 포함됩니다. 여러 선언은 세미콜론으로 구분됩니다. 그 모습은 다음과 같습니다.
selector {
property1: value1;
property2: value2;
/* More properties and values */
}예를 들어:
h1 {
color: blue;
font-size: 24px;
}위의 예에서 color와 font-size가 속성, blue와 24px가 값에 해당합니다. CSS의 기본 사용법은 이와 같이 선택자와 선언 블록을 결합하여 HTML의 특정 요소에 적합한 스타일을 적용하는 작업이라 할 수 있습니다.
CSS 스타일 시트 적용 예
1. 텍스트 CSS 스타일 시트
<!DOCTYPE html>
<html>
<head>
<title>Styling Text</title>
<style>
/* CSS styles */
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>HTML 요소인 body, h1, p에 글꼴 유형, 크기, 색 등의 스타일 시트 값을 지정해보았습니다.
해당 스타일 시트가 적용된 웹페이지는 위와 같이 표현됩니다.
2. 배경색 CSS 스타일 시트
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
<style>
/* CSS styles */
body {
background-color: lightgray;
}
.container {
background-color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome</h2>
<p>This is a paragraph with some text.</p>
</div>
</body>
</html>HTML 요소인 body에 배경색, 그리고 .container 클래스에도 배경색과 패딩 값 스타일 시트를 선언하고 적용하였습니다.
스타일 시트를 이용하여 전체 배경과 클래스 배경을 다르게 적용한 모습입니다.
3. 메뉴 CSS 스타일 시트
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar</title>
<style>
/* CSS styles */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</body>
</html>navbar 클래스를 이용하여 메뉴바에 스타일 시트를 적용하였습니다.
메뉴바의 기본 배경색, 디스플레이 방식, 링크 설정시, 마우스 오버시 각각의 표현 방법을 선언하고 이를 적용한 모습입니다.
