📌 CSS를 삽입하는 세 가지 방법
스타일 시트를 삽입하는 방법에는 세 가지가 있다.
- 외부 CSS(External Style Sheet)
- 내부 CSS(Internal Style Sheet)
- 인라인 CSS(Inline style)
● 외부 CSS ●
css라는 확장자를 가진 스타일 시트 파일을 따로 만들고
이 파일을 HTML 문서에 연결하여 사용하는 방법이다.
이 방법은 하나의 파일로 웹 사이트 전체의 스타일을 변경할 수 있도록 해준다.
스타일을 적용할 웹 페이지의 <head>태그에
<link>태그를 사용하여 외부 스타일 시트를 포함하면 스타일이 적용된다.
외부 .css 파일에는 HTML 태그가 포함되어서는 안된다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css"> <!--이것은 CSS파일을 따로 두어야 하는것이다-->
</head>
<body>
<h1>이것은 제목입니다</h1>
<p>이것은 단락입니다</p>
</body>
</html>이때 mystyle.css 라는 .css 확장명을 가진 파일을
따로 두어야 하는데
그 속성을 보면 다음과 같다.
body {
background-color: lightblue; /* 배경색은 lightblue */
}
h1 {
color: navy; /* 제목의 색은 navy */
margin-left: 20px;
}결과값은 다음과 같다
● 내부 CSS ●
이 방법은 HTML 문서 내의 <head></head>태그사이에
<style>태그를 사용하여 CSS 스타일을 적용한다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.
이는 HTML문서마다 스타일을 매번 지정해 주어야 하지만,
한 문서에만 해당되는 스타일을 지정할때 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: purple;
}
h1 {
color: white;
margin-left: 40px;
}
p{
color: yellow;
font-size: 150%
}
</style>
</head>
<body>
<h1>이것은 제목입니다</h1>
<p>이것은 단락입니다</p>
</body>
</html>결과값은 다음과 같다.
● 인라인 CSS ●
이 방법은 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.
위의 방법들 중에서 가장 좁은 적용범위를 나타낸다.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;text-align:center;">이것은 제목입니다. </h1>
<p style="color:red;font-size:150;text-align:center;">이것은 단락입니다.</p>
</body>
</html>결과값은 다음과 같다.
● 적용 순서 ●
1. 인라인 스타일 (HTML 요소 내부에 위치)
2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치)
3. 웹 브라우저 기본 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Apply</title>
<link rel="stylesheet" href="/examples/media/tcpschool_expand_style.css">
</head>
<body>
<h2>이 부분은 외부 스타일이 적용된다.</h2>
<h2 style="color:blue; font-size:200%; ">
이 부분은 인라인 스타일이 적용된다.
</h2>
</body>
</html>결과값은 다음과 같다.
인라인 부분은 내부 외부 스타일과 상관없이
무조건 인라인 부분만 적용이 된다.
보통, 작업을 할 때는 외부 스타일 적용이 유지 보수에 가장 적합하다.
