반응형
CSS - css 기본문법 및 적용방법 (인라인스타일, 내부스타일, 외부스타일)
목차
- CSS란?
- CSS 기본 문법 및 적용방법
1. CSS란?
CSS (Cascade Style Sheet)란 HTML로 작성된 웹문서에 폰트, 색상, 크기 등 다양한 디자인 요소를 적용시킬 때 사용되는 언어를 말합니다.
2. CSS 기본 문법 및 적용방법
1) css 기본문법
2) css 적용방법
HTML로 작성된 웹 문서에 CSS를 적용시킬 수 있는 방법은 아래와 같이 3가지 형태가 있습니다.
- 인라인 스타일 (inline css style) : 해당 태그에 직접 적용하는 방법
- ex) <h1 style="color:red;"> 내용 </h1>
- 내부 스타일 (internal css style) : <head> 영역안에 <style> 태그를 통해 적용하는 방법
- ex) <style> h2 { color : blue; } </style>
- 외부 스타일 (external css style) : <head> 영역안에 외부 css 파일을 링크해 적용하는 방법
- ex) <link rel="stylesheet" href="style.css">
- style.css 파일내용 : h3 { color : green; }
만약 한 태그에 3가지 방식 모두가 동시에 적용되어 있다면 인라인 스타일 > 내부 스타일 > 외부 스타일 순으로 우선순위가 높습니다. 따라서 인라인 스타일로 태그에 직접 스타일 지정을 한다면 다른 방식으로는 해당 태그에 스타일 변경을 할 수 없게 됩니다.
단, 스타일에 !important 속성이 적용되어 있다면 해당 스타일이 가장 최우선순위로 적용됩니다.
- ex) p { background-color : green !important ; }
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="style.css">
<style>
h2 {
color : blue;
}
</style>
</head>
<body>
<h1 style="color:red;"> 1. 인라인 스타일 방식 </h1>
<h2> 2. 내부 스타일 방식 </h2>
<h3> 3. 외부 스타일 방식 </h3>
</body>
</html>
style.css
h3 {
color : green;
}
[실행결과]
반응형
'IT 개발 > HTML & CSS' 카테고리의 다른 글
| [CSS] 선택자 종류 및 사용방법 (태그, id, class, 속성, 자식, 하위, 형제, 가상클래스, 연결) (0) | 2023.12.17 |
|---|---|
| [HTML] form 태그 사용법과 input 태그 속성 정리 (0) | 2023.12.16 |
| [HTML] 꼭 알아야 하는 html 기본 개념 및 태그 종류 (0) | 2023.12.16 |