HTML 위치에 따른 스타일 적용

HTML

HTML 위치에 따른 스타일 적용

기련이 2020. 5. 14. 16:20

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>위치에 따른 스타일 적용</title>
<link type="text/css" rel="stylesheet" href="css/extern.css">
</link>
<link type="text/css" rel="stylesheet" href="css/extern2.css">
</link>
<style type="text/css">
/* 내부 스타일 */
p2 {
	color: blue;
}
p1 {
	color: maroon;
}
</style>
</head>
<body>

<!-- 1. 인라인 스타일 -->
<p1 style="color : red;"> 인라인 스타일 적용 시트</p1><br>
<!-- 2. 내부 스타일 -->
<p2>내부 스타일 적용</p2><br>
<!-- 3. 외부 스타일 -->
<p3>외부 스타일 적용</p3><br>

<p4>또 다른 외부 스타일 적용</p4>
</body>
</html>

스타일 적용 방법
1. 인라인 스타일 적용 : 각 태그에서 style 속성 설정.
2. 내부 스타일 적용 : style 태그에 설정.
3. 외부 스타일 적용 : css 파일을 생성하여 설정.

스타일 적용 우선 순위
- 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 스타일
(인라인 속성이 가장 마지막 순서에 실행됨)

@charset "UTF-8";
p3 {
	color: green;
	background-color: yellow;
}
p1 {
	color: purple;
	font-size : 18px; 
}
p1 {
	background-color: green;
}
/*
다른 스타일들 작성..
*/

위는 외부에서 받아오는 스타일(외부스타일) css파일로 연결시켜야한다

@charset "UTF-8";

p4 {
	color : aqua;
	font-size : 17px;
}

추가로 p4 코드에 외부스타일을 받아온 코드