<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_css의 다양한 선언방식</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<h1>css를 선언하는 3가지 방식</h1>
<ol>
<li>인라인 방식</li>
<li>내부선언 방식 internal</li>
<li>외부선언 방식 external</li>
</ol>
<h2 style="background-color: #CDDB7D;">인라인 방식</h2>
<p>태그에 style 속성명을 지정하고 속성값을 따옴표로 감싸서 스타일을 지정하는 방식으로 다른 방식과 함께 혼용했을 때에는 가장 강력하게 스타일을 덮어쓴다.</p>
<h2>내부선언 방식 internal</h2>
<p>html문서 안에 head 태그 안에 선언하는 방식으로 style태그 안에 선택자를 쓰고 스타일은 {} 안에 기술한다. 외부선언 방식과 함께 혼용하여 사용했을 때는 힘이 더 세서 스타일을 덮어쓴다.</p>
<div>
<h2>외부선언 방식</h2>
<p>파일을 따로 만들어서 스타일을 기술하는 방식으로 선택자 <span>{스타일을 기술}</span> 하는 방식이다. 파일명.css 확장자를 활용하여 파일을 생성하고 html안에 link 태그로 해당 파일을 연결한다.</p>
</div>
<h3>세가지 방식을 모두 사용해서 같은 선택자에 스타일을 다르게 주고 있다면 적용되는 우선순위는 인라인방식>내부선언방식>외부선언방식이다.</h3>
</body>
</html>
'CSS, Javascript, jQuery > code' 카테고리의 다른 글
| stabucks sub page Ex (0) | 2023.03.30 |
|---|---|
| 다양한 커서의 활용 (0) | 2023.03.30 |
| favicon의 활용 (0) | 2023.03.30 |
| 외부스타일 시트의 적용 (0) | 2023.03.30 |
| 다양한 선택자와 스타일 (0) | 2023.03.30 |