CSS는 'Cascading Style Sheets'의 약어로서 웹 페이지에서 HTML 태그를 보조하여 웹 페이지를 디자인적으로 꾸미고 페이지의 요소를 화면에
배치하는 역할을 수행합니다.
CSS를 이용하면 글자의 색상, 글꼴, 글자의 크기를 변경하고 요소에 경계선, 배경 색상, 배경 이미지 등을 삽입할 수 있습니다.
1996년 12월 CSS가 나오기 이전에는 HTML에 디자인적 요소를 포함하여 웹 페이지를 제작하였습니다. 최근에는 웹 표준 국제 기구인
W3C에서 가능한 모든 디자인적 요소는 CSS를 이용하도록 권고하고 있습니다.
따라서 HTML은 웹 페이지의 구조화된 뼈대만을 만드는 데 사용되고, 디자인적인 요소는 모두 CSS에서 전담하여 서로 간의 역할을
명확히 분리하는 방식으로 웹 페이지가 제작되고 있습니다.
■ CSS 기본 구조
일반적으로 CSS는
태그 내에 있는 태그 안에 삽입됩니다.
CSS 기본 구조
ex1-1.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> h2 { font-family: "돋움";
color: red;
} p { font-size: 20px;
color: blue;
} </style> </head> <body> <h2>기타</h2> <p>기타는 현을 튕겨 소리를 내는 악기로, 프랑스 지방에서 유래하였다.
머리, 목, 몸체로 구성되어 있으며, 목 부분에는 20여 개의 프렛으로 구성된다.</p> </body> </html>
ex1-1.html의 실행 결과
CSS의 기본 구조는 다음과 같습니다.
위에서 h2와 같은 것을 선택자라고 합니다. 선택자는 CSS가 적용되는 영역을 선택합니다. 이와 같이 CSS의선택자는 CSS를 적용할 영역을 선택하는
역할을 수행하고, 선택된 영역에 해당 CSS 속성과 속성 값이 적용되는 것입니다. 그리고 CSS 명령은 속성과 속성 값으로 구성됩니다.
■ CSS 삽입 방법 세 가지
다음 예제를 통하여 CSS를 삽입하는 세 가지 방법에 대해 알아봅니다.
CSS 삽입 방법
ex1-2.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <style> h2 { color: red;
} </style> </head> <body> <h2>클래식 기타</h2> <h3>개요</h3> <p style="color:green;">클래식 기타는 기타 악기의 하나로, 나일론이나 양의 창자로
만든 거트로 제작한 현을 뜯어서 소리를 내는 류트족 현악기의 일종이다. </p> <h3>수명</h3> <p>기타의 수명은 20~30년에 불과하다는 말이 있는데 이는 잘못된 정보이다.
잘 건조된 고품질의 목재를 재료로 하여 튼튼한 구조로 제대로 제작하여
일정한 온습도로 관리하면 기타의 수명은 100년 이상이다.</p> </body> </html>
