4장: CSS 이해하기 - 웹 스타일링 - 웹 개발 베이스캠프: HTML·CSS·JavaScript 입문 가이드

웹 개발 베이스캠프: HTML·CSS·JavaScript 입문 가이드

4장: CSS 이해하기 - 웹 스타일링

4장: CSS 이해하기 - 웹을 스타일링하다

CSS(Cascading Style Sheets)는 HTML 문서에 스타일을 입히는 언어입니다. 이를 통해 웹 페이지의 텍스트 색상, 폰트, 배경, 레이아웃 등이 정의되며, 사용자가 시각적으로 더욱 매력적이고 편리하게 웹사이트를 이용할 수 있도록 돕습니다.

CSS의 역할

HTML이 웹 페이지의 구조를 담당한다면, CSS는 그 구조에 "멋"을 더하는 것입니다. 예를 들어, 다음 HTML 코드와 CSS 코드가 결합되어 스타일링된 웹 페이지가 구성될 수 있습니다:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1 class="title">안녕하세요, CSS!</h1>
  <p class="content">이 문장은 CSS 스타일로 더욱 보기 좋게 만들 수 있습니다.</p>
</body>
</html>

/* style.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f8ff;
}
.title {
  color: #ff6347;
  text-align: center;
}
.content {
  color: #4682b4;
  margin: 20px;
  line-height: 1.5;
}

위 예제에서, CSS는 웹 페이지의 배경색, 타이틀의 텍스트 색상과 정렬, 문단의 색상을 지정하고 여백과 줄 간격을 조정했습니다.

CSS 사용 방법

CSS는 HTML에 세 가지 방식으로 적용할 수 있습니다:

인라인 스타일: HTML 요소에 직접 스타일을 작성.

<h1 style="color: blue; text-align: center;">CSS 예제</h1>

내부 스타일 시트: <style> 태그 안에 스타일 정의.

<style>
h1 {
    color: blue;
    text-align: center;
}
</style>

외부 스타일 시트: 별도의 CSS 파일 사용.

<link rel="stylesheet" type="text/css" href="style.css">

CSS가 중요한 이유

CSS는 웹 페이지의 디자인 요소를 정의함으로써 컨텐츠를 더욱 돋보이게 하고 사용자 경험을 개선하는 데 중요한 역할을 합니다. 또한, HTML 코드는 구조에 전념하고, CSS는 디자인에 집중함으로써 코드를 더 깔끔하고 관리하기 쉽게 만듭니다.

결론

이 장에서는 CSS의 기본 개념, 역할, 그리고 사용 방법을 학습했습니다. CSS는 HTML과 함께 사용되어 매력적인 웹 디자인을 구현하는 데 필수적인 기술입니다. 다음 장에서는 다양한 CSS 적용 사례와 고급 기법들을 알아봅니다.