[CSS] CSS를 적용하는 방법 (External, Internal , Inline)
2020. 2. 25. 22:37
728x90
반응형
HTML 파일에 CSS를 적용하는 방식에는 3가지 방식이 있습니다.
- External CSS
- Internal CSS
- Inline CSS
1) External CSS
- HTML 파일 외부에 .css 파일을 작성하고 link하여 적용하는 방식
- <head> 태그 안에 <link> 태그를 이용하여 css파일을 적용한다.
- ex) <head><link rel="stylesheet" type="text/css" href="test.css"></head>
예시)
/* 다음과 같이 css파일을 HTML 파일 외부에 만들어줍니다. */
/* test.css */
h1{
color:red;
}
/* html 파일에 적용 */
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>테스트 입니다.</h1>
</body>
</html>
2) Internal CSS
- HTML 파일 내부 <head>태그 안에 <style>태그를 이용하여 css를 적용
- ex) <head><style>h1{ color : red; }</style></head>
예시)
<html>
<head>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>테스트 입니다.</h1>
</body>
</html>
3) Inline CSS
- 적용하고자 하는 태그 안에 style 요소를 이용하여 css 적용
- ex) <h1 style="color : red; ">테스트입니다.</h1>
예시)
<html>
<head>
</head>
<body>
<h1 sytle="color : red;">테스트 입니다.</h1>
</body>
</html>
+
CSS의 적용 순서
External / Internal / Inline CSS가 동시에 사용 된다면 어떤 방식이 적용될까요?
Inline CSS > External CSS = Internal CSS 입니다.
(External 과 Internal은 소스 코드에서 밑에 있는 것이 적용됩니다.
ex)
예를 들어
<head>
<link>
<style>
</style>
</head>
이라면 Internal CSS가 적용됨
<head>
<style>
</style>
<link>
</head>
이라면 External CSS가 적용됨
참고 - "Learn CSS" W3School (https://www.w3schools.com)
반응형
'지식IT' 카테고리의 다른 글
| [CSS] Backgrounds 설정하기(color, image, repeat, attachment, position) (0) | 2020.02.27 |
|---|---|
| [CSS] Color 속성 ( Names, RGB, HEX, HSL) (0) | 2020.02.26 |
| [Cloud Computing] 클라우드 컴퓨팅의 유형 및 서비스 종류 (0) | 2020.02.17 |
| [JavaScript] var, let, const 자바스크립트 ES6 변수 구분하기 (0) | 2020.02.12 |
| [CSS] CSS의 속성 선택자(Attribute Selectors) (0) | 2020.02.03 |
이 글을 공유합시다
