CSS 에서 길이를 표현하는 단위
절대값을 나타내는 단위)
in : 인치
cm : 센티미터
mm : 밀리미터
pt : 포인트(1포인트=1/72인치)
pc : 파이카 (1파이카=12포인트)
상대값을 나타내는 단위)
em : 폰트의 높이를 1로 하는 단위
ex : 폰트의 소문자'x' 높이를 1로 하는 단위
px : 1픽셀을 1로하는 단위
% : 기준이 되는 크기에 대한 비율
CSS 에서 색상 지정 방법
#369 : 16진수의 한 항목만 지정
rgb(255,0,0) : 10진수로 지정
rgb(100%, 0%, 0%) : %로 지정
red : 색이름으로 지정
CSS의 사용 형식
형식) 선택자 {속성 : 값 ; }
선택자에는 스타일을 적용할 대상을 지정하고, {}안에 적용할 스타일을 지정한다. 스타일은 속성을 기록하고 ' :'으로 구분한 후 값을 기록한다. 값을 기록한 뒤에 ';'로 마무리 한 뒤엔 추가로 속성과 값을 계속 넣을 수 있다.
예) P { font-size : 11px ; color : red }
1. HTML문서에 스타일시트 삽입하기
스타일시트를 HTML문서에 삽입할 때는 <STYLE type="text/css"> ~ </STYLE> 태그를 <HEAD> ~ </HEAD>태그사이에 삽입한다.
예문)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>스타일 지정하기</title>
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p {color:red;}
</style>
</head>
<p>선택자, 선택자, 선택자 {속성:값;}</p>
</body>
</html>
2. 태그에 직접 삽입하기
스타일시트를 태그에 직접 삽입할 때는 <태그명 style="속성:값;" > ~ </태그명> 의 형식으로 삽입한다.
예문)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>스타일 지정하기</title>
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8">
</head><body>
<p style="color:red;">선택자, 선택자, 선택자 {속성:값;}</p>
</body>
</html>
3. head요소 안에 link 요소를 사용하여 외부스타일시트를 참조한다.
스타일시트파일을 만들 때는 확장자를 .css로 하여야 하고, 그 스타일시트 파일에서는 <style type="text/css"> ~ </style> 태그를 써서는 안된다.
<HEAD>태그에는 <link rel="stylesheet" href="style.css" type="text/css">를 써서 링크를 설정한다.
예문)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>스타일 지정하기</title>
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body>
<p>선택자, 선택자, 선택자 {속성:값;}</p>
</body>
</html>
4. head안에 @import 외부 스타일시트를 참조한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>스타일 지정하기</title>
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">@import url(style.css);
<style>
</head>
<body>
<p>선택자, 선택자, 선택자 {속성:값;}</p>
</body>
</html>
'html' 카테고리의 다른 글
| CSS 기초 (0) | 2011.01.11 |
|---|---|
| 색상 코드 표 (0) | 2011.01.11 |
| 서식의 작성방법, 종류 (0) | 2011.01.11 |
| 링크의 표현 <a href=" ">~</a> (0) | 2011.01.11 |
| 표(table)의 작성 (0) | 2011.01.11 |