내부 스타일
1
2
3
4
5
6
|
<style type='text/css'>
h1 {
font-family: '돋움체';
font-size: 25px;
}
</style>
| cs |
위 코드를 <head>에다가 추가
h1태그를 정의
1
2
|
<h1> 내부 스타일 시트가 적용된 문장입니다.</h1>
<h1>모든 h1에 적용됩니다.</h1>
| cs |
body에서 <h1>태그를 이용하여 추가
1
2
3
4
5
6
|
<style type='text/css'>
h2 {
color:#808000;
margin-left: 20px;
}
</style>
| cs |
h2를 다른 폰트로 정의를 해보았다.
1
2
|
<h2>h2내부 스타일 시트가 적용된 문장입니다</h2>
<h2>모든 h1에 적용됩니다.</h2>
| cs |
인라인 스타일, <h1>, <h2>의내부 스타일을 적용하여 출력한 모습을 확인할 수 있다.
외부 스타일
만약 여러개의 HTML에서 같은 스타일을 사용한다라고 가정을 하자.
이 경우 내부 스타일을 사용하게 되면 여러개의 HTML에 있는 head에서 해당하는 style을 찾아서 바꾸어 주어야 하지만
만약 외부에있는 스타일을 가져오게 된다면, 외부에 존재하는 style하나만 바꿔도 모두가 적용이 된다.
외부 스타일을 하기 위해서는 우선 css 파일을 만들자.
1
2
3
4
5
|
@charset "utf-8";
h1{
color: #808000;
margin-left:20px;
}
| cs |
그럼 이렇게 만들어진 .css파일을 사용할 html파일에서 <link>를 이용하여 불러온다.
작성중....
댓글
댓글 쓰기