2장 CSS3의 종류와 기본 작성법
웹 페이지는 스타일시트를 사용해 스타일을 적용합니다. 이 절에서는 앞에서 작성한 HTML 페이지에 다음 두 가지 방법으로 스타일시트를 적용해 보겠습니다.
내부 스타일시트
스타일시트를 가장 손쉽게 사용할 수 있는 방법으로 , style 태그를 사용해 HTML 페이지 내부에 스타일시트를 직접 입력합니다. 내부 스타일시트를 사용하는 방법은 간단하므로 [기본 예제 2-2]에서 설명합니다.
외부 스타일시트
스타일시트가 짧다면 HTML 페이지 내부에 입력해도 괜찮습니다. 하지만 여러 사람이 함께 협업을 해야 하고 프로젝트의 규모가 클 때는 HTML 페이지 내부에 스타일시트를 삽입하는 것보다는 외부 스타일시트를 사용하면 좋습니다. 외부 스타일시트는 스타일시트를 별도로 생성하고 link 태그의 href 속성을 사용해 HTML 페이지로 불러옵니다.
기본 예제 2-2 내부 스타일시트 작성
<코드 2-2> 내부 스타일시트 작성
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Basic</title>
<style>
h1 {
color: white;
background: black;
}
</style>
</head>
<body>
<h1>Hello World..!</h1>
</body>
</html>
기본 예제 2-3 외부 스타일시트 작성
CSS를 확장자로 선택하고 코드를 파일로 저장
[
h1 {
color: white;
background: black;
}
]
3. HTML 페이지에 외부 스타일시트 적용하기
외부 스타일시트를 HTML페이지로 불러올 때는 link 태그를 사용합니다. HTMLPageWithLink.html을 만들고 다음 코드를 작성합니다.
<코드 2-4> 외부 스타일시트 추가
<!DOCYTPE html>
<html>
<head>
<title>External Stylesheet Basic</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello CSS ... !</h1>
</body>
</html>
'프로그래밍 > HTML' 카테고리의 다른 글
| 2장 검사를 이용한 오류 확인 (0) | 2017.08.21 |
|---|---|
| 2장 자바스크립트의 종류와 기본 작성법 (0) | 2017.08.19 |
| 2장 HTML5 기본 구조와 작성법 (0) | 2017.07.29 |
| 1장 웹 개요와 실습 환경 구축 (0) | 2017.07.28 |
| Part 1 웹 프로그래밍 첫 걸음 Preview (0) | 2017.07.28 |
