CSS - Embedding Styles (HTML에 CSS 적용 방법)
▒ HTML에 CSS 적용 방법
01. 내부 스타일 시트 ( Internal CSS )
＇내부에 기입하는 방식
<html>
<head>
<style>
#welcome {
color: purple;
}
.welcome {
color: orange;
}
</style>
</head>
<body>
<p id="welcome">블로그 방문을 환영합니다.</p>
<p class="welcome">Welcome to My Blog.</p>
</body>
</html>
Result :
블로그 방문을 환영합니다.
Welcome to My Blog.
02. 외부 스타일 시트 (External CSS)
＇외부 CSS를 링크하는 방식
style.css 별도 작성
#welcome {
color: purple;
}
.welcome {
color: orange;
}
<html>
<head>
<link rel="stylesheet" href="/css 경로/style.css" type="text/css">
</head>
<body>
<p id="welcome">블로그 방문을 환영합니다.</p>
<p class="welcome">Welcome to My Blog.</p>
</body>
</html>
Result :
블로그 방문을 환영합니다.
Welcome to My Blog.
03. 인라인 스타일 시트 (Inline Style)
＇적용할 태그의 style 속성을 넣는 방식
<p style="color: purple">블로그 방문을 환영합니다.</p>
<p style="color: orange">Welcome to My Blog.</p>
Result :
블로그 방문을 환영합니다.
Welcome to My Blog.
04. 스타일 시트 임포트 방식
＇외부 CSS를 @import를 불러 드리는 방식
style.css 별도 작성
#welcome {
color: purple;
}
.welcome {
color: orange;
}
<html>
<head>
<style type='text/css'>
@import url("style.css");
</style>
</head>
<body>
<p id="welcome">블로그 방문을 환영합니다.</p>
<p class="welcome">Welcome to My Blog.</p>
</body>
</html>
Result :
블로그 방문을 환영합니다.
Welcome to My Blog.
