개발자 Saaad
[HTML,CSS]HTML 문서에 CSS를 적용하는 3가지 방법과 우선순위 본문
1. 인라인 스타일
- HTML 안에서 Style 속성을 이용하는 방법
<p style="font-size: 20px;">안녕하세요</p>태그 내부에서 style 속성값을 이용해 직접 css를 적용할 수 있다.
2. 내부 스타일 시트
- <style> 태그를 이용해 HTML 문서 내부에서 이용하는 방법
<head>
<style type="text/css">
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>안녕하세요</h1>
</body><head> 태그 안에서 <style> 태그를 이용해 문서 내에서 사용할 스타일을 지정할 수 있다.
3. 외부 스타일 시트
- 별도로 CSS 파일을 분리하여 HTML 문서에 연결하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube</title>
<link rel="stylesheet" href="styles/general.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/sidebar.css">
<link rel="stylesheet" href="styles/video.css">
</head>
<body>
</body>위처럼 외부의 css파일들을 불러와 사용하는 방법이다.
스타일 적용 우선순위
1. 인라인 스타일
2. 내부 스타일 시트, 외부 스타일 시트
3. 웹 브라우저 기본 스타일
'학습 > kakao X goorm 풀스택12회차' 카테고리의 다른 글
| [CSS]Flexbox 관련 CSS (중요) (0) | 2024.11.18 |
|---|---|
| [CSS]Transform, Animation 사용방법 (0) | 2024.11.18 |
| [CSS]Float, Clear CSS 속성 (0) | 2024.11.18 |
| [HTML]HTML 문서의 구조 정리 (0) | 2024.11.17 |
| [HTML]HTML(Hyper Text Markup Language) 개념 및 구성요소 (0) | 2024.11.17 |
'학습/kakao X goorm 풀스택12회차' Related Articles
more
