HTML 파일(문서)에 CSS 스타일을 적용하는 방법은 3가지가 있다.
바로,
- 인라인 스타일(Inline style)
- 내부 스타일 시트(Internal style sheet)
- 외부 스타일 시트(External style sheet)
1. 인라인 스타일(Inline style)
: HTML 요소 내부에 style속성을 사용하여 CSS스타일을 적용하는 방법.
해당 요소에만 스타일을 적용할 수 있다.
<h2 style="color:green; text-decoration:underline">인라인스타일</h2>위 예시에서는 해당 h2 요소에만 color:green, text-decoration:underline 스타일을 적용할 수 있다.
인라인스타일 방식은 한번 설정된 스타일을 변경하기 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다. 따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야한다.
2. 내부스타일 시트(Internal Style Sheet)
: HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS스타일을 적용.
해당 HTML 문서에만 스타일을 적용할 수 있다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body { background-color: lightyellow;}
h2 { color: red; text-decoration: underline;}
</style>
</head>
3. 외부 스타일 시트(External Style Sheet)
: 웹사이트 전체의 스타일을 하나의 파일에 따로 작성하여 쉽게 변경할 수 있도록 해준다.
외부에 작성된 이러한 style sheet는 .css 확장자를 사용하여 저장된다.
스타일을 적용할 웹 페이지의 <head> 태그에 <link>태그를 사용하여 외부 style sheet를 연결해야만 스타일이 적용된다.
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css"> <!--외부스타일시트 연결-->
</head>
expand_style.css
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
# 스타일 적용의 우선순위
위 3가지 스타일 적용방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 우선순위에 따라 결정된다.
1. 인라인 스타일 : 인라인스타일이 최우선 적용된다.
2. - 내부 스타일시트 / 외부 스타일시트
내부 스타일시트& 외부 스타일시트 둘 다 있는 경우, 더 아래쪽에 적혀있는 스타일시트가 적용된다.
아래 예시의 경우, 외부 스타일시트가 더 아래쪽에 적혀있으므로 외부 스타일시트가 적용된다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--내부 스타일시트-->
<style>
.testp {
color: #0000FF;
}
p {
color: #00FF00;
}
</style>
<!--외부 스타일시트-->
<link rel="stylesheet" href="test.css">
</head>
</html>- 동일레벨(ex: 같은 내부스타일시트)에서 class 스타일/ 태그 스타일이 공존하는 경우
: class 스타일이 우선적용된다.
- 여러 개의 외부 스타일인 있는 경우
: 가장 마지막 외부 스타일이 우선 적용된다.
한번 예시를 통해 확인해보자.
/* test.css */
p {
color: #FFFF00;
}
.testp {
color: #00FFFF;
}
div {
color: #FFFF00;
}
.testdiv {
color: #00FFFF;
}/* test2.css */
.testdiv {
color: #000000;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<!--내부 스타일 시트-->
<style>
.testp {
color: #0000FF;
}
p {
color: #00FF00;
}
</style>
<!--외부 스타일 시트-->
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="test2.css">
</head>
<body>
<!--인라인스타일이 최우선 적용된다.-->
<p style="color: #FF0000;">
#FF0000
</p>
<!--내부 스타일시트 & 외부 스타일시트 둘 다 있는 경우, 더 아래쪽에 적혀있는 스타일시트가 적용-->
<p><!--p태그에 관하여 내부스타일시트vs외부스타일시트 test.css, 아래에 적혀있는 test.css 승!-->
#FFFF00 <!--test.css파일에 있는 p태그 color 적용!-->
</p>
<!--동일레벨에서 class 스타일/ 태그 스타일이 공존하는 경우, class 스타일이 우선적용-->
<p class="testp"><!--test.css내에서 p태그, testp class스타일 둘다있다. class스타일 승!-->
#00FFFF
</p>
<!-- 여러개의 외부 스타일이 있는 경우, 가장 마지막 외부 스타일이 우선 적용 -->
<div class="testdiv"> <!--마지막 외부스타일시트인 test2.css 우선 적용-->
#000000
</div>
</body>
</html>
참고
http://www.tcpschool.com/css/css_intro_apply
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
https://www.skyer9.pe.kr/wordpress/?p=1433
CSS 적용 우선순위 – 상구리의 기술 블로그
CSS 적용 우선순위 인라인 스타일(inline style) 인라인 스타일(inline style) 이 최우선 적용됩니다. 내부 스타일(internal style) 과 외부 스타일(external sytle) 내부 스타일(internal style) 과 외부 스타일(external
www.skyer9.pe.kr
'CSS' 카테고리의 다른 글
| 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ by 드림코딩 (0) | 2023.12.10 |
|---|---|
| 가상 클래스 셀렉터(Pseudo-Class Selector) (0) | 2023.10.17 |
| [CSS] transition (트랜지션) (0) | 2023.10.10 |
| 박스를 가운데정렬해주는 방법 margin: 0 auto (0) | 2022.09.06 |
| text-align : center (0) | 2022.09.05 |
