티스토리 뷰
1. CSS의 개념은?
CSS(Cascading Style Sheets)는 HTML 요소를 화면에 어떻게 표시할 것인지 스타일을 정의하는 시트입니다. HTML에서 태그를 이용하여 문서의 구조 및 내용을 정의할 수 있었지만 글의 색상, 폰트, 크기와 같은 스타일은 지정할 수 없었습니다. 하지만 CSS를 사용하여 웹 페이지의 레이아웃과 디자인을 변경함으로써 사용자가 더욱 편리하게 이용할 수 있도록 시각적 효과를 적용할 수 있습니다. 예를 들어 내가 원하는 문단의 글씨 크기를 키우거나, 글씨 바탕색을 노란색으로 하고 싶을 때 CSS를 사용하여 원하는 대로 스타일을 바꿀 수 있습니다. 그렇기 때문에 CSS는 W3C(World Wide Web Consortium)의 권고 사항이 되었으며 1996년에 CSS1, 1998년에 CSS2를 권고하였고 현재도 작성 중인 규격인 CSS3를 HTML에서 완전히 지원하도록 하고 있습니다. 우리가 한 웹 사이트를 운영할 때 굉장히 많은 페이지로 이루어지게 됩니다. 사실 HTML에서도 해당 요소에 스타일을 지정할 수 있지만 만약 그렇게 된다면 내가 웹 사이트의 글씨 색 전부를 초록색으로 바꾸고 싶을 때 모든 문서 페이지를 수정해야 하는 골치 아픈 일이 생기게 됩니다. 이때 CSS에 스타일 정보들을 저장하였다면 각 페이지들은 동일한 CSS 파일을 참조하게 되어 CSS 파일 한 번만 변경하여도 전체적으로 모두 스타일이 적용이 될 수 있기 때문에 관리하기에 매우 용이하고 문서 전체의 일관성을 지킬 수 있는 장점이 있습니다.
2. CSS의 문법을 알아보자
CSS의 문법은 생각보다 매우 간단하게 '선택자(selector)'와 '선언(declaration)'이라는 이 2가지로 작성할 수 있습니다. 선택자는 스타일을 변경하고자 선택한 HTML 요소를 말합니다. 그리고 선언은 그 선택한 요소를 원하는 스타일로 변경하기 위해 속성을 "이름:값" 형식으로 작성하는 것을 말합니다. 아래 예시를 통해서 CSS 문법을 살펴보도록 하겠습니다.
p {
color: #FFFFFF;
font-size: 24px;
background-color: yellow;
border: 2px solid red;
margin-bottom: 3px;
}위의 코드에서 선택자는 단락을 의미하는 p 태그를 말합니다. 그리고 중괄호 { } 안에 들어 있는 것이 선언입니다. 콜론 (:) 기준으로 왼쪽에 작성된 것이 속성의 이름이고 오른쪽은 속성의 값입니다. 선언을 해석하자면 "p라는 태그의 글자색을 #FFFFFF 색으로 변경하고 폰트 크기는 24px로, 글자 배경색은 노랑색으로, p의 요소의 테두리는 두께가 2px인 빨간색 단색 테두리로, 아래쪽 마진을 3px로 지정해라"라는 뜻입니다. 그리고 각 CSS 속성 선언은 항상 세미콜론 (;)으로 끝나야 합니다. 선택자는 다양한 방법으로 표현할 수 있습니다. 페이지 안의 모든 요소를 선택하는 전체 선택자 (*), 특정한 요소 단 하나를 선택할 수 있는 아이디 선택자 (#id), 다른 태그들을 묶어서 동시에 요소를 정의하는 클래스 선택자 (.class) 등이 있습니다. 요소들에 대한 자세한 내용은 앞으로의 포스팅으로 소개하겠습니다.
3. CSS은 어떻게 사용하나요?
CSS를 웹 페이지에 적용시키고 싶다면 총 3가지 방법이 있습니다. 외부 스타일 시트, 내부 스타일 시트, 인라인 시트 방법들을 살펴보도록 하겠습니다.
우선 가장 먼저 외부 스타일 시트는 여러분이 작성하고 외부에 저장한 CSS 파일을 HTML 문서에 포함시키는 방법입니다. 보통 다수의 많은 페이지에 동일한 스타일을 동시에 적용하려고 할 때 효과적인 방법입니다. CSS 파일들은 각 HTML 문서 페이지의 <link> 태그를 이용해서 아래와 같이 헤드 부분에 포함시켜야 합니다.
<link type="text/css" rel="stylesheet" href="mystyle.css">여기서 type은 외부 파일의 종류가 CSS라는 것을 의미하고, rel은 HTML 문서와 외부 파일의 관계(relationship)을 의미하며 href는 외부 파일의 위치를 URL 형식으로 말해줍니다.
두 번째로 내부 스타일 시트는 HTML 문서 안에 CSS를 정의하게 되는 방법입니다. 아래와 같이 HTML 문서의 <head>태그 안에 <style> 요소를 이용하여 CSS를 선언해 주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; }
p { color: #FFFFFF; }
</style>
</head>
<body>
</body>
</html>마지막으로 인라인 스타일 시트는 각각의 요소 태그마다 스타일을 지정하는 방법입니다. 매우 빠르고 간편하게 해당 요소에 스타일을 지정해줄 수 있지만 CSS의 사용하는 목적을 잃게 될 수 있습니다. 그렇기 때문에 꼭 필요한 경우에만 사용하는 것을 추천합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: red;">Headline one</h1>
</body>
</html>이번 포스팅에서는 웹 개발을 시작하는 데 있어 웹 페이지의 스타일을 정의할 수 있는 CSS에 대해 알아보게 되었습니다. CSS에는 수많은 속성들과 적용 방법들이 있으며 이러한 방법들을 이용하여 사용자가 원하는 디자인의 페이지를 만들 수 있습니다.