반응형
CSS를 삽입하는 세 가지 방법
스타일 시트를 삽입하는 방법에는 세 가지가 있습니다.
- 외부 CSS
- 내부 CSS
- 인라인 CSS
외부 CSS
외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹사이트의 모양을 변경할 수 있습니다!
각 HTML 페이지에는 head 섹션 내부의 <link> 요소 내부에 외부 스타일 시트 파일에 대한 참조가 포함되어야 합니다.
외부 스타일은 HTML 페이지의 <head> 섹션 내부에 있는 <link> 요소 내에 정의됩니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있으며 .css 확장자로 저장해야 합니다.
외부 .css 파일에는 HTML 태그가 포함되어서는 안 됩니다.
"mystyle.css" 파일의 모습은 다음과 같습니다.
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
반응형