CSS(Cascading style Sheet)는 여러 가지 속성을 이용해서 웹 디자인을 이루고 있는 태그들을 제어하는 역학을 하는데요. html은 웹 페이지를 이루는 뼈대를 만드는 역할을 한다면 CSS는 그 뼈대에 살을 붙이는 역할을 한다고 생각하면 되는데요. 글자의 색이나 크기, 이미지의 위치나 크기, 표의 색이나 위치 등 우리 눈에 보이는 웹페이지의 구성 요소들의 겉모습을 꾸미는 역할을 하는 것입니다.
웹 표준에 의해서 작성된 웹 문서의 내용(HTML)과 디자인(CSS)은 구분되어 있습니다. 어느 부분의 색이나 위치만 바꾸고 싶으면 CSS만 수정하면 되고, 내용을 수정하고 싶다면 HTML 부분만 수정하면 되기 때문에 내용이나 디자인을 수정하면서 서로의 영역을 침범할 일이 없습니다. 또한, 이 방법을 이용하면 엄청난 속도로 발달하고 있는 모바일의 웹페이지를 만들기도 간단합니다. 반응형 웹이라는 말은 한 번씩은 들어보셨을 거에요. PC나 모바일용 반응형 웹도 CSS만 조금씩 수정해주면 간단하게 만들 수 있게 된겁니다.
스타일의 형식은 p { color : #fff;} 입니다.
형식에서 p를 선택자라고 하고 color는 속성, #fff; 는 속성값입니다. 형식에서 입력한 내용은 웹 페이지의 <p>태그를 사용하는 모든 단락의 색을 하얀색으로 설정한다는 내용입니다. 수백 개의 단락으로 이루어진 웹 페이지라도 간단하게 속성값(색)만 바꿔주면 모든 <p> 태그를 사용한 단락의 색이 입력한 속성값으로 바뀌게 되는 것입니다.
그렇다면 이렇게 스타일 정보를 입력하는 <style> 태그는 어디에 입력해야 할까요? html 문서에 함께 입력할 수도 있고, 외부 문서로 작성하고 링크로 연결해서 사용할 수도 있습니다. 먼저 html 문서 안에 <style>을 입력할 때는 <head> 태그 안에 넣으면 됩니다.
이렇게 <head> 태그 사이에 입력하면 되구요. <style> 태그로 묶어서 그 안에 선택자(p)와 스타일 속성을 입력하면 됩니다. 이때 공백 값은 무시하기 때문에 소스를 보기 편하게 그림처럼 여러 줄로 나눠서 입력하는 게 좋구요. 각 속성값의 구분은 세미콜론(;)으로 합니다. 그림에서는 속성이 하나밖에 없어서 굳이 세미콜론을 안 해도 되지만 여러 개의 속성과 그 값이 있을 때는 (;)으로 구분을 합니다.
마지막으로 다른 문서에 CSS를 만들고 링크를 걸어서 적용하는 방법을 알아보겠습니다.
그림에서 오른쪽의 파일은 style.css 형식의 파일입니다.이 문서에서는 <style>태그를 생략해도 되구요. 파일의 형식은 .css로 저장하셔야 합니다. 모든 스타일 시트를 이 문서에 작성하고 html 문서에서 <head> 태그 안에서 링크 태그로 연결하면 됩니다. 이때 연결하는 형식은 다음과 같습니다.
<link href="외부 파일의 경로" rel="stylesheet" type="text/css">
형식에서 rel="stylesheet"는 현재 링크로 연결하는 파일이 스타일 시트 파일이라는 의미구요. type="text/css"는 이 소스가 텍스트 형식으로 작성된 CSS파일이라는 의미입니다.
이렇게 해서 간단하게 CSS의 개념과 형식에 대해서 알아봤는데요. 간단한 내용이니 메모장 열고 직접 입력해보고 테스트해보세요.수고하셨습니다.
