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.
'Web Design > CSS & CSS3' 카테고리의 다른 글
| CSS Property (속성 ) : Font (0) | 2018.04.16 |
|---|---|
| CSS Vendor Prefixes (브라우저 접두사)로 부터 자유를... (0) | 2018.04.16 |
| CSS Vendor Prefixes = CSS browser prefixes (브라우저 접두사) (0) | 2018.04.14 |
| CSS 3 의 역사와 브라우저별 지원현황 (0) | 2018.04.14 |
| CSS[cascading style sheets]: 외부스타일시트 웹페이지 삽입 (1) | 2018.04.12 |
