1. 내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.
모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성합니다.
<사진 1.1> 내부 스타일 시트
- 다음은 내부 스타일 시트 예제입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>내부 스타일 시트</title>
<style>
ul{
color:blue;
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li>Korea</li>
<li>Japan</li>
<li>China</li>
</ul>
</body>
</html> |
cs |
<사진 1.2> 내부 스타일 시트
- <head>태그와 </head>태그 안에 있는 <style>태그와 </style>태그는 '내부 스타일 시트' 입니다.
2. 외부 스타일 시트
- 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.
사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와
사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css' 라는 파일 확장자를 사용합니다.
- 외부 스타일 시트를 연결할 때는 <style>태그 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.
기본형 : <link href="외부 스타일 파일 경로" rel="stylesheet" type=""text/css>
다음은 스타일 정보를 'style.css'라는 외부 스타일 시트 파일로 저장한 후 <link>태그를 이용해 링크한 것입니다.
|
|
ul{
color:orange;
list-style-type:square;
} |
cs |
<사진 1.3> style.css 파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>외부 스타일 시트<title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li>Korea</li>
<li>Japan</li>
<li>China</li>
</ul>
</body>
</html>
|
cs |
<사진 1.4> style.css파일과 연결된 외부 스타일 시트
- 다음은 결과 화면입니다.
<사진 1.4 결과 화면>
3. 인라인 스타일
- 간단한 스타일 정보라면 스타일 시트(<style> </style>)를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.
이런 방법을 '인라인 스타일'이라고 합니다. 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용하여
style="속성:속성 값;" 형태로 스타일을 바꿀 수 있습니다. 다음은 인라인 스타일을 사용한 예제입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>인라인 스타일</title>
</head>
<body>
<h1 style="color:blue;">진심과 배려 - 논어의 말</h1>
<p>교사가 지녀야 할 마음가짐은 '진심'과 '배려'두 가지로 대변된다.<br>
즉 타인을 위해 할 수 있는 일을 성심껏 하고 타인의 기분을 헤아려 주는 것이다.<br>
언제나 이 두가지를 잊지 않는 한 누군가를 가르칠 자격이 있다.</p>
</body>
</html>
|
cs |
<사진 1.5> 인라인 스타일 예제
- <h1>태그에 인라인 스타일을 적용 시켰습니다. 다음은 결과 화면입니다.
<사진 1.5 결과 화면>
