coyojo10의 개발블로그!
프론트엔드 - css 적용 방법 3가지 본문
<!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>
<!--css 적용 방법 2 head태그 내부에 스타일태그를 줘서 쓰는법-->
<style>
p.second {
color:blue;
}
p.third{
color: green;
}
</style>
<!-- css 적용방법 3 외부 css파일 link태그 이용해서 쓰는법--->
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- css 적용방법 1 태그 내부에 직접 css 적용하는 방법-->
<p style="color:red;">1번 - 빨강색</p>
<p class="second">2번 - 파란색</p>
<p class="third">3번 - 초록색</p>
</body>
</html>css 적용방법 1 ) 태그 내부에 직접 css 적용하는 방법
<p style="color:red;">1번 - 빨강색</p>
<h1 style="color:yellow"> h1 태그 - 노란색</h1>
css 적용 방법 2) head태그 내부에 스타일태그를 줘서 쓰는법
<head>
<style>
p.second {
color:blue;
}
p.third {
color: green;
}
</style>
</head>
css 적용방법 3) 외부 css파일 link태그 이용해서 쓰는법
==> href 에 적용할 css 파일을 적어준다.
<head>
<link rel= "stylesheet" href= "style.css"/ >
</head>
'프론트엔드' 카테고리의 다른 글
| HTML 기본 태그 정리 (0) | 2023.01.18 |
|---|---|
| 네트워크 기본 지식 (0) | 2023.01.18 |
| <input> 태그 속성 - type="hidden" (0) | 2022.12.12 |
| 자바스크립트 내장 객체 (0) | 2022.10.01 |
| 자바스크립트 함수 실습 (0) | 2022.10.01 |