CSS(Cascading Style Sheets)는 웹 개발에서 HTML로 작성된 문서를 꾸미기 위한 스타일링 언어입니다. CSS는 웹 페이지의 레이아웃, 색상, 글꼴, 간격, 크기 등을 제어하여 사용자에게 더 나은 시각적 경험을 제공합니다. 이번 글에서는 CSS의 기초 개념, 작성 방법, 주요 속성, 그리고 사용 예제를 다룹니다.
1) CSS란 ?
1. CSS의 정의
CSS는 HTML 문서의 시각적 표현을 설정하는 스타일링 언어입니다. HTML은 웹 페이지의 구조를 정의하지만, CSS는 이를 꾸미고 배치하는 역할을 합니다.
2. CSS의 주요 특징
- 구조와 스타일의 분리 : CSS를 사용하면 HTML 문서의 구조와 스타일 정보를 분리할 수 있어 코드의 가독성과 유지보수가 용이해집니다.
- 재사용성 : 한 번 정의한 CSS코드는 여러 HTML요소에 재사용할 수 있습니다.
- 계층적 스타일링 : CSS는 계층적 구조(Cascading)를 통해 스타일 우선순위를 결정합니다.
2) CSS 작성 방법
CSS는 세가지 주요 방식으로 작성할 수 있습니다.
1. 인라인 스타일
HTML 요소 내에서 style속성을 사용하여 css를 직접 정의합니다.
<p style="color: red; font-size: 16px;">이 문장은 빨간색입니다.</p> - 장점 : 간단한 스타일링에 유용
- 단점 : 코드가 지저분해지고, 재사용성이 떨어짐
2. 내부 스타일(Internal CSS)
HTML 파일의 <head>태그 내 <style>태그를 사용하여 작성합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 문장은 파란색입니다.</p>
</body>
</html> - 장점 : HTML과 CSS가 같은 파일에 있어 관리가 간편
- 단점 : 여러 페이지에서 같은 스타일을 적용하기 어려움
3. 외부 스타일 (External CSS)
CSS 파일을 별도로 작성하고, HTML 파일에 링크하여 사용합니다.
/* style.css */
p {
color: green;
font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>이 문장은 녹색입니다.</p>
</body>
</html>- 장점
- 여러 HTML 파일에서 동일한 스타일을 공유 가능
- 유지보수가 쉽고, 코드가 깔끔
- 단점
- HTML 파일과 별도로 관리해야 함
3) CSS의 기본 문법
CSS는 선택자(Selector), 속성(Property), 값(Value)로 구성됩니다.
선택자 {
속성: 값;
}
h1 {
color: red;
font-size: 24px;
}- 선택자(Selector) : h1 - 스타일을 적용할 HTML 요소를 지정
- 속성 (Property) : color, font-size - 수정하고자 하는 스타일의 유형
- 값 (Value) : red, 24px - 속성에 적용할 값
4) 주요 CSS 선택자
1. 기본 선택자
- 요소 선택자 : 특정 HTML 태그에 스타일 적용
p { color: blue; }- 클래스 선택자 : class 속성을 사용해 특정 그룹에 스타일 적용
.highlight { background-color: yellow; }- 아이디 선택자 : id 속성을 사용해 특정 요소에 스타일 적용
#header { text-align: center; } 2. 복합 선택자
- 자손 선택자 : 특정 요소의 자식 요소에 스타일 적용
div p { color: gray; }- 그룹 선택자 : 여러 요소에 동일한 스타일 적용
h1, h2, h3 { font-family: Arial; }
5) CSS의 주요 속성
1. 텍스트 스타일링
- color : 텍스트 색상
p { color: red; }- font-size : 글꼴 크기
h1 { font-size: 36px; } - text-align : 텍스트 정렬
2. 배경 스타일링
- background-color : 배경 색상
body { background-color: lightgray; }- background-image : 배경 이미지
body { background-image: url('background.jpg'); }
3. 레이아웃
- margin : 외부 여백
div { margin: 20px; }- padding : 내부 여백
div { padding: 10px; }- border : 테두리
div { border: 1px solid black; }
6) CSS 우선순위
CSS의 우선순위는 다음과 같은 기준에 따라 결정됩니다.
1. 인라인 스타일 (style 속성)
2. 아이디 선택자 (#id)
3. 클래스 및 속성 선택자 (.class, [attribute])
4. 요소 선택자 (div, p 등)
같은 요소에 여러 스타일이 겹치면, 우선순위가 높은 스타일이 적용됩니다.
7) CSS 예제
다음은 간단한 HTML과 CSS를 이용한 웹 페이지 스타일링 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>CSS 기초 예제</title>
</head>
<body>
<header id="header">
<h1>CSS의 기초</h1>
</header>
<main>
<p class="highlight">이 문장은 배경이 노란색입니다.</p>
<p>이 문장은 기본 텍스트입니다.</p>
</main>
<footer>
<p>© 2025 CSS 기초</p>
</footer>
</body>
</html>/* styles.css */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
#header {
background: #333;
color: white;
padding: 10px 0;
text-align: center;
}
.highlight {
background-color: yellow;
}
footer {
text-align: center;
margin-top: 20px;
}8) 결론
CSS는 웹 페이지의 디자인과 레이아웃을 제어하는 강력한 도구입니다. CSS의 기초를 잘 이해하면 웹 사이트를 더욱 사용자 친화적이고 매력적으로 만들 수 있습니다.
'프로그래밍' 카테고리의 다른 글
| 오라클 JOIN (0) | 2025.01.14 |
|---|---|
| Java 17의 주요 기능 및 변화 (0) | 2025.01.12 |
| OpenCV와 Python을 활용한 이미지 처리 기초 (1) | 2025.01.05 |
| Java 람다식(Lambda Expressions) (0) | 2025.01.04 |
| Python Pandas로 데이터 분석 기초 (1) | 2025.01.02 |