1. CSS란?
CSS(Cascading Style Sheet)란 HTML 문서에 스타일(디자인)을 적용하기 위한 - 꾸미기 위한 - 방법으로 사용된다.
2. CSS 작성 방법
- 문서 내부에 CSS 만들기
/* head 태그 안에 정의 */
<!doctype html>
<html>
<head>
<style type="text/css">
h3 {color: #0000ff;}
</style>
</head>
/* in-line 스타일시트 방법, body 안에 지정 */
/* css 사용의 원래 목적에 위배되므로 자주 사용되지 않음!! */
<body>
<h1>우리나라의 야생화</h1>
<h3 style="color: #0000ff">개망초</h3>
</body>- 문서 외부에 CSS 만들기
문서의 head 영역에서 link 태그를 이용하여 연결해 사용
/* mystyle.css 파일 작성 */
h3 {
font-size: 18px;
color: #0000ff;
}/* page1.html에서 link */
<head>
<link href="mystyle.css"
ref="stylesheet"
type="text/css">
</head>3. CSS의 종류
- 기존 태그 이름을 이용하는 CSS
<head>
<title></title>
<style type="text/css">
h1 {color: #0000ff;}
h3 {color: #ff0000;}
</style>
</head>
<body>
<h1></h1>
<h3></h3>
</body>- 사용자가 만들어 여러 곳에서 사용하는 class CSS
class CSS는 CSS의 이름(Selector)을 사용자가 자유롭게 지정하며 Selector 앞에 "."를 붙인다.
body안에서 여러 곳에 중복하여 사용하며 기존 태그의 속성 중의 하나처럼 사용한다.
<head>
<style type="text/css">
.mycss {color: blue;}
</style>
</head>
<body>
<h3 class="mycss">개망초</h3>
/* class에서 한번에 여러 개의 Selector를 지정할 수 있음 */
<h3 class="mycss1 mycss2 mycss3">개망초</h3>
</body>- 사용자가 만들어 한 곳에서만 사용하는 ID CSS
ID(IDendification) CSS는 의미 그대로 html 문서 안의 특정 요소 한군데에만 사용하기 위하여 - 다른 요소들과 구분되기 위하여 - 정의된다. CSS 이름 앞에 "#"을 붙인다.
<head>
<style type="text/css">
#text1 {color: #0000ff; font-size: 42px;}
#text2 {color: #ff0000; font-size: 42px;}
</head>
<body>
<div id="text1">우리나라의 야생화</div>
<div id="text2">한국의 야생동물</div>
</body>- 하이퍼링크(link) 문자 관련 CSS
<head>
<style type="text/css">
/* 순서가 중요 */
/* active, hover의 순서로 지정되면 효과가 나타나지 않음 */
a:link {color: green;}
a:visited {color: gray;}
a:hover {color:red;} /*마우스가 하이퍼링크에 위치했을 때 */
a:active {color:yellow;} /*하이퍼링크를 마우스로 클릭한 순간의 형태 */
</style>
</head>
<body>
<h1><a href="#">야생화</a></h1>
</body>4. CSS 정의 방법
- 하나의 Selector에 CSS 정의
h3 {
color: #ooooff;
font-size: 24px;
font-weight: bold;
}- 여러 개의 Selector에 동일한 CSS 정의
h1, h2, h3 {
color: #ooooff;
font-size: 24px;
font-weight: bold;
}- 기본 Selector 아래에 세부 Selector 지정
기본 Selector 뒤에 공백(space)을 하나 두고 다음 단계 Selector를 지정한 후 속성을 정의한다.
<head>
<style type="text/css">
ol li {color: gray;}
</head>기본 Selector 이름이 "#" 이나 "." 으로 시작하는 CSS도 세부 Selector를 지정하는 경우 공백을 넣고 세부 Selector 이름을 지정한다.
/* BOX1 안의 inbox와 BOX2 안의 inbox가 동일한 크기, 동일한 배경색을 가졌으나
BOX2 안의 inbox만 테두리 형태를 달리해야 한다면 */
<head>
<style type="text/css">
#box1 {~}
#box2 {~}
.inbox {~}
/* BOX2 안에 있는 inbox에게만 테두리 효과를 지정 */
#box2 .inbox {border: dashed;}
</head>
<body>
<div id="box1">BOX1
<div class="inbox">inbox</div>
</div>
<div id="box1">BOX2
<div class="inbox">inbox</div>
</div>
<div id="box2">BOX2
<div class="inbox">inbox</div>
</div>
</body>기본 Selector 이름이 기존 html 태그이고 다음 세부 Selector가 "#" 이나 "." 으로 시작하면 이들은 붙여서 사용한다.
<head>
<style type="text/css">
p {color: #ff0000; }
p.text1 {color: #0000ff;}
</style>
</head>
내가 할 수 있스까..?