한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
1. 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 '내부 스타일 시트'라고 합니다.
모든 스타일 정보는 <head>태그와 </head>태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성합니다.
<!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>
2. 외부 스타일 시트
웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다.사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와
사용하는 것이 일반적입니다. 이렇게 따로 저장해 놓은 스타일 정보를 '외부 스타일 시트'라고 하고 '.css' 라는 파일 확장자를 사용합니다.
외부 스타일 시트를 연결할 때는 <style>태그 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.
기본형 : <link href="외부 스타일 파일 경로" rel="stylesheet" type=""text/css>
다음은 스타일 정보를 'style.css'라는 외부 스타일 시트 파일로 저장한 후 <link>태그를 이용해 링크한 것입니다.
<!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>
3. 인라인 스타일
간단한 스타일 정보라면 스타일 시트(<style> </style>)를 사용하지 않고 스타일을 적용할 대상에 직접 표시합니다.
이런 방법을 '인라인 스타일'이라고 합니다. 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용하여
style="속성:속성 값;" 형태로 스타일을 바꿀 수 있습니다. 다음은 인라인 스타일을 사용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>인라인 스타일</title>
</head>
<body>
<h1 style="color:blue;">진심과 배려 - 논어의 말</h1>
<p>교사가 지녀야 할 마음가짐은 '진심'과 '배려'두 가지로 대변된다.<br>
즉 타인을 위해 할 수 있는 일을 성심껏 하고 타인의 기분을 헤아려 주는 것이다.<br>
언제나 이 두가지를 잊지 않는 한 누군가를 가르칠 자격이 있다.</p>
</body>
</html>