- 태그내부 삽입형(In-line style) : HTML 태그안에 직접 삽입
- CSS파일 불필요
<html> <head> <title>css 적용방법</title> </head> <body> <h1 style="size: 24px; color: #06F; font-family: '돋움';">css를 직접 적용한 예</h1> <h1>아무것도 적용안함(결국 링크방식 h1)</h1> <p>css를 적용하는 방식을 알아 봅니다</p> </body> </html> ===================================================================== 예제 <h1 style="size: 24px; color: #06F; font-family: '돋움';">css를 직접 적용한 예</h1>
- 임베디드 방식은 말그대로 HTML문서에 CSS를 삽입하는 방식
- <head>와</head>사이에 <style type="text/css"> ~ </style>를 넣어주면 된다
- css파일 불필요
<html>
<head>
<title>css 적용방법</title>
<style type="text/css">
h1 { size: 24px; color: #06F; fint-family: '돋움';
}
</style>
</head>
<body>
<h1>css적용도는 내용</h1>
<p>css를 적용하는 방식을 알아 봅니다</p>
</body>
</html>
- 외부에 별도로 .css 파일을 만들어 적용하는 방식
- <head>와</head>사이에 <link rel="stylesheet" type="text/css" href="경로/파일이름.css">를 삽입한다
- css파일 필요
<html>
<head>
<title>01_Link_style.html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<P>style.css 링크 방식을 이용한 스타일 시트 예제입니다.</P>
</body>
</html>
==============================================
+++ style.css 파일 +++
h1 {
size: 24px; color: #06F; fint-family: '돋움';
}
'블로그 > Reference' 카테고리의 다른 글
| tables (0) | 2014.05.31 |
|---|---|
| blockquote (0) | 2014.05.05 |
| 포스팅시 사용할만한 tag정리 (0) | 2013.11.21 |
| block 모양 정리 (0) | 2013.11.10 |
| code.hr (0) | 2013.11.09 |