반응형
앞에 HTML에서 CSS를 적용하기 위해 <HEAD>부분에 Style를 정의해서 사용했습니다.
이번에는 <HEAD>부분에 Style를 정의 하지 않고 미리 정의된 스타일시트를
링크를 통해 적용하는 방법입니다.
이번에는 <HEAD>부분에 Style를 정의 하지 않고 미리 정의된 스타일시트를
링크를 통해 적용하는 방법입니다.
CSS <LINK>를 사용하는 방법
1.HTML에서 간단하게 "안녕하세요" 를 출력 하도록 작성합니다.
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
</head>
<body>
안녕하세요
</body>
</html>
2. '새항목추가'-'스타일시트'를 선택 하고 추가 시켜줍니다. (이름 : 02.StyleSheet.css)
생성한 스타일시트에 다음과 같이 작성해 줍니다.
body
{
color:Blue;
font-size:12px;
font-family:Verdana;
} body부분에 스타일시트를 적용시키기 위함 입니다.
3. 다시 1번에서 작성한 <HTML>로 이동합니다. <HEAD>부분에 추가시켜줍니다.
<link rel="Stylesheet" type="text/css" href="02.StyleSheet.css" />
< css의 파일 명을 입력해 주셔야 합니다. >
미리 정의된 스타일 시트를 불러와서 적용시키는 방법입니다.body
{
color:Blue;
font-size:12px;
font-family:Verdana;
} body부분에 스타일시트를 적용시키기 위함 입니다.
3. 다시 1번에서 작성한 <HTML>로 이동합니다. <HEAD>부분에 추가시켜줍니다.
<link rel="Stylesheet" type="text/css" href="02.StyleSheet.css" />
< css의 파일 명을 입력해 주셔야 합니다. >
웹브라우저에 적용된것을 확인 할 수 있습니다.
02.StyleSheet.css
02.외부스타일시트.htm반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 04.CSS - 점클래스 (0) | 2009.07.27 |
|---|---|
| 03.CSS - 태그에 직접 적용 (0) | 2009.07.27 |
| 01.CSS - 스타일 시트 시작 (0) | 2009.07.27 |
| 24.XHTML- META태그 (0) | 2009.07.27 |
| 23.XHTML- 동영상 실행 (0) | 2009.07.27 |
Comments