CSS를 적용하는 방법
1. 인라인 스타일(Inline style)
2. 내부 스타일 시트(Internal style sheet)
3. 외부 스타일 시트(External style sheet)
인라인 스타일(Inline style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.
해당 요소에만 스타일을 적용할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
|
cs |
! 이 방식은 한 번 설정된 스타일을 변경하기가 매우어렵다.!
될 수 있으면 꼭 필요한 경우에만 사용해야 한다.
내부 스타일 시트(Internal style sheet)
내부 스타일이 <head> 부 내측의 <style> 요소 내에 정의된다.
해당 HTML 문서에만 스타일을 적용할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<head>
<meta charset="UTF-8">
<title>CSS Apply</title>
<style>
body {
background-color: green;
}
h2 {
color: pink;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>내부 스타일 시트를 이용하여 스타일 적용</h2>
</body>
|
cs |
외부 스타일 시트(External style sheet)
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
외부에 작성된 스타일 시트 파일은 .css확장자를 사용하여 저장된다.
스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야 한다.
|
1
2
3
4
5
6
7
8
9
|
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>외부 스타일 시트를 이용하여 스타일 적용</h1>
</body>
|
cs |
(위 예제에서 사용된 CSS 파일)
"mystyle.css"
body {
background-color : lightblue;
}
h1 {
color : navy;
margin-left : 20px;
}
참고!
속성 값과 단위 (예 : 사이에 공백을 추가X margin-left: 20 px; ).
올바른 방법 : margin-left: 20px;
'CSS' 카테고리의 다른 글
| 자주쓰는 속성(width,height,margin,padding,float,text-align,font) (0) | 2020.04.07 |
|---|---|
| CSS 링크 , 리스트 (0) | 2020.04.07 |
| CSS 기본 속성 - 텍스트 , font (0) | 2020.04.07 |
| CSS 기본 속성 - 색 , 배경 (0) | 2020.04.07 |
| CSS 문법, 선택자 (0) | 2020.04.07 |
