반응형
CSS 기초적인 구문 규칙
CSS(Cascading Style Sheet) 문법은 (X)Html 문법과는 다릅니다. 하지만 그다지 복잡하지는 않아요. HTML이 웹문서의 구조와 내용이라면, CSS는 그 구조와 내용들이 어떻게 웹페이지에서 표현되어야 하는지를 정의합니다. 흔히 사용하는 MS워드나 아래한글 같은 문서 편집기로 문서를 만든다고 생각해보세요. 텍스트로 주르륵 나열한 문서는 읽기도 싫어지고 보기에도 좋지 않습니다. 그래서 폰트크기를 조절하고 색상을 입히고 글배치를 보기 좋게 만들죠. 바로 이런 역할을 담당하는 것이 CSS입니다. 웹페이지는 html, 흔히들 이야기하는 태그만으로도 만들 수 있지만, 보다 화려하고, 멋지게 표현해내기 위해서 꼭 필요한 것이 바로 CSS입니다.
CSS의 구조
CSS는 기본적으로 아래와 같이 세 부분으로 이루어져 있습니다.선택자(selector) { 속성(property): 값(value) }
선택자는 스타일을 정의내리고자 하는 (X)HTML의 요소입니다. 선택자는 복수의 속성을 가질 수 있고 선택자에 속한 각각의 속성들은 독립된 속성값을 가질 수 있습니다. 속성과 값은 :(콜론)으로 구분되지요.
그런데 선택자는 복수의 속성을 가질 수 있다고 했는데 여러가지 속성을 하나의 선택자에 표현하려면 어떻게 해야 할까요? 그럴때는 세미콜론(;)으로 구분하여 나열하면 됩니다. 속성은 복수의 값을 가질 수도 있는데 그럴때는 콤마(,)로 구분합니다. 그리고 값에서 공백을 가지는 것은 따옴표("")로 묶어야 합니다.
body{
font-family:"맑은 고딕", 굴림, Gulim, AppleGothic, sans-serif;
background:#fff;
}
상속 (Inheritance)
기본적으로 (X)HTML에서 웹페이지에 표현되는 부분은 <body>...</body> 영역입니다. CSS에서 body의 스타일을 다음과 같이 정의했다고 가정해보죠.body{
font-family: Verdana, serif;
}
이렇게 하면, <body>...</body> 사이의 모든 내용 그러니까, 웹페이지로 표현되는 모든 영역에 Verdana 또는 serif 글꼴이 적용됩니다. 상위 태그에서 지정된 스타일 속성은 하위 태그에도 그대로 유지된다는 것. 이것이 바로 상속의 개념입니다. 너무 쉬운가요? 조금 더 생각해보죠. 아래와 같이 소스코드를 작성해보겠습니다.
< test.html >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="wrap"> <div id="header"> 소 제 목 </div> <div id="contents"> 내 용 설 명 </div> </div> </body> </html>
< test.css >
body{
font-family: Verdana, serif;
width:300px;
}
#wrap{
border: 1px solid #000;
background-color: gray;
}
#header{
background-color: #e7bc9c;
}
#contents{
} < 결과화면 >
#wrap은 #header와 #contenes를 포함하고 있으며, 배경색이 gray입니다. 따라서 만약 #header와 #contents에서 따로 스타일을 지정해주지 않으면 #wrap의 스타일 속성이 그대로 하위요소에 상속됩니다. 하지만 코드에서는 #header에 배경색을 #e7bc9c로 따로 지정하여 주었습니다. 그래서 #header는 배경색부분의 상속이 깨지고 고유의 색을 가지게 되었고, #contents는 그대로 상속된 색상을 물려받았습니다.
선택자 결합
하나의 선택자에 스타일이 중복되는 여러 엘리먼트들을 한꺼번에 나열하여 선언 할 수 있습니다.h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
주석 처리
CSS 코드를 작성하면서 참고할만한 주석을 적어놓는 것이 유지보수 측면에서 도움이 많이 됩니다. 코드를 작성할때 주석을 남기는 습관을 기르는 것이 좋습니다. 주석영역은 브라우저에서 읽어들일때 무시되는 영역이므로 특별한 규칙없이 임의대로 보기 편한 방식으로 작성해도 됩니다. /* 와 */사이에 적어 넣으면 됩니다 ^^/* 여기는 주석입니다 */
고도를 기다리며 zenith5.tistory.com by 킥스
반응형
'정보' 카테고리의 다른 글
| 티스토리에서 댓글창 위로 올리는 방법 (8) | 2011.12.29 |
|---|---|
| 유튜브 음원의 블로그 사용에 관한 저작권협회의 회신 (19) | 2011.12.28 |
| 오렌지 캬라멜(Orange Caramel) 퍼니 허니(Funny Hunny) 뮤비/듣기/가사 (2) | 2011.12.23 |
| 트랙백, 뭔가 했더니... (35) | 2011.12.22 |
| Inline elements 와 Block level elements (2) | 2011.12.21 |
댓글