○스타일 시트 선언 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2. 내부방식 : head태그 내에 style태그를 사용해서 css적용 -->
<style>
#inner{
background-color: aqua;
}
</style>
<!-- 일반적인 방식 : 외부방식 -->
<!-- 3. 외부방식 : link태그를 사용해서 외부 css를 적용 -->
<!-- 특징 : link태그 순서대로 다운로드
병렬 다운로드를 진행(동시)
대신 link태그가 많아지면 코드가 지저분-->
<link rel="stylesheet" href="./Ex21_외부방식.css">
<!-- 4. 외부방식 : style태그 내에 import방식을 사용해서 css적용 -->
<!-- 특징 : 다운로드 순서 예측 불가능
병렬 다운로드 불가능(하나 다운받으면 그다음거 다운)
외부css파일이 많을 때 link태그보다 간결-->
<style>
@import url('Ex21_import방식.css');
</style>
</head>
<body>
<!-- 1. 인라인 방식 : html태그 내에 style속성을 사용해서 css적용 -->
<h1 style="background-color: greenyellow;"> 인라인 방식 </h1>
<h1 id="inner">내부 방식</h1>
<h1 id="out"> 외부 방식 : link태그</h1>
<h1 id="import">외부방식 : import방식</h1>
</body>
</html>Ex21_외부방식.css
#out{
background-color: tomato;
}Ex21_import방식.css
#import{
background-color: orange;
}
○스타일 시트 우선 순위
코딩공부