CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다. HTML이 웹 페이지의 구조와 콘텐츠를 정의하는 데 중점을 둔다면, CSS는 그 구조를 어떻게 보여줄지를 제어합니다. 이를 통해 웹 페이지의 글꼴, 색상, 간격, 크기, 배경 등을 손쉽게 설정할 수 있습니다. 또한, CSS는 HTML 코드에서 디자인 요소를 분리하여 코드의 가독성과 유지 보수를 향상시킵니다.
예를 들어, HTML로 작성된 간단한 텍스트는 CSS 없이 기본적인 브라우저 스타일만 적용됩니다.
<p>Hello, World!</p>
하지만 CSS를 추가하면 스타일을 지정할 수 있습니다:
<style>
p {
color: blue;
font-size: 20px;
}
</style>
<p>Hello, World!</p>
위 코드는 파란색 글씨와 20px 크기의 텍스트로 표시됩니다. CSS 덕분에 우리는 웹 페이지의 시각적 디자인을 자유롭게 조절할 수 있습니다.
CSS의 역사와 발전
CSS는 1996년에 W3C(World Wide Web Consortium)에 의해 첫 번째 버전이 발표되었습니다. 그 당시 웹 디자인은 주로 HTML의 태그를 사용해 레이아웃을 만들었기 때문에 복잡한 구조를 표현하기 어려웠습니다. 이 한계를 해결하기 위해 CSS가 등장했고, HTML에서 시각적 요소를 분리하여 더 깔끔하고 효율적인 웹 페이지 제작이 가능해졌습니다.
CSS의 주요 발전 단계는 다음과 같습니다:
- CSS1 (1996): 폰트, 색상, 간격 등의 기본 스타일을 정의할 수 있었습니다.
- CSS2 (1998): 미디어 타입 지원, 포지셔닝, z-index 등의 레이아웃 요소가 추가되었습니다.
- CSS3 (2012): 애니메이션, 그라데이션, 트랜스폼 등 고급 기능들이 포함되었으며, 모듈화가 도입되어 CSS의 기능이 더욱 세분화되었습니다.
이후 CSS는 계속해서 진화하고 있으며, 최근에는 CSS4라는 용어도 일부에서 사용되지만, 정확히는 CSS는 버전 번호 없이 각각의 기능들이 개별 모듈로 발전하고 있습니다.
HTML과 CSS의 관계
HTML과 CSS는 웹 페이지의 두 가지 주요 요소로, HTML은 구조를, CSS는 스타일을 담당합니다. HTML은 문서의 뼈대를 구성하며, 요소의 배치를 정의하지만, 이 요소들을 어떻게 표현할지는 CSS가 결정합니다.
예를 들어, 다음과 같은 HTML 문서가 있습니다:
<!DOCTYPE html>
<html>
<head>
<title>CSS와 HTML의 관계</title>
</head>
<body>
<h1>웹 개발 배우기</h1>
<p>HTML은 웹 페이지의 구조를 나타냅니다.</p>
</body>
</html>이 문서는 기본적인 구조만을 정의한 상태입니다. 여기에 CSS를 추가하여 스타일을 적용하면 이렇게 바뀝니다:
<!DOCTYPE html>
<html>
<head>
<title>CSS와 HTML의 관계</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>웹 개발 배우기</h1>
<p>HTML은 웹 페이지의 구조를 나타냅니다.</p>
</body>
</html>이 예제에서 HTML은 페이지의 콘텐츠 구조(제목, 본문)를 제공하고, CSS는 배경색, 글꼴, 텍스트 정렬 등을 통해 그 콘텐츠를 어떻게 표시할지 결정합니다. 이렇게 HTML과 CSS는 서로 긴밀하게 연동되어 웹 페이지를 완성합니다.
참고 사이트
'HTML&CSS' 카테고리의 다른 글
| [CSS] 5. 우선순위와 상속 (0) | 2024.09.15 |
|---|---|
| [CSS] 4. 속성(Property)과 값(Value) (0) | 2024.09.14 |
| [CSS] 3. 선택자(selector) (0) | 2024.09.13 |
| [CSS] 2. 문법과 규칙 (0) | 2024.09.13 |
| #6 HTML 태그 (0) | 2024.08.25 |
| #5 HTML 시맨틱 태그 (0) | 2024.08.25 |
| #4 HTML5의 새로운 기능 (1) | 2024.08.25 |
| #3 HTML 요소와 속성 (0) | 2024.08.25 |