1. 스타일 시트의 역할 :
스타일 시트는 HTML 요소를 선택하여 요소의 레이아웃(배치)와 스타일(Style)을 변경할 때 사용한다.
2. 스타일 시트의 적용 : 스타일 시트 적용 방법에는 세가지가 있다.
2-1. 인라인 스타일시트 적용 : 시작태그에 style 속성을 사용하여 스타일시트를 적용한다.
(스타일 적용 우선순위가 가장 높다.)
2-2. 내부 스타일시트 적용 : <head> 내부에 <style>을 작성하고 스타일시트를 적용한다.
2-3. 외부 스타일시트 적용 : 별도의 *.css 파일을 외부에 저장한 후
이 파일을 HTML 문서에 포함시켜 스타일시트를 적용한다. (적용 우선순위가 가장 낮다.)
3. 스타일시트 적용 우선순위 : 인라인 스타일시트 > 내부 스타일시트 > 외부 스타일시트
4. HTML 요소를 선택할 때는 '선택자(Selector)'를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<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>스타일시트 기본 문법</title>
<link rel="stylesheet" href="css/style.css">
<!--link 태그로 외부 스타일시트 파일을 HTML 문서에 포함시킨다. -->
<style>
.inner {font-size: 24px; color: brown;}
</style>
</head>
<body>
<h2>Stylesheet</h2>
<p style="font-size:24px; color:blue;">인라인 스타일시트 적용</p>
<p class="inner">내부 스타일시트 적용</p>
<p class="outer">외부 스타일시트 적용</p>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 자식+후손 선택자 (0) | 2022.09.26 |
|---|---|
| [HTML+CSS3] 기본 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 회원가입 화면 만들기 (0) | 2022.09.23 |
| [HTML+CSS3] gradient(그레디언트) (2) | 2022.09.23 |
| [HTML+CSS3] 박스그림자 (0) | 2022.09.23 |