CSS 적용하기
- 인라인 방식
- 내부 스타일
- 외부 스타일
3가지 방식이 있다
1. 인라인 방식
- 태그 자체에 style 속성으로 스타일을 주는 방식이다
<p style="color:yellow; background-color:black;">Hello wold</p>2. 내부 스타일
- head 태그 안에 style 태그를 사용하여 스타일을 주는 방식
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>내부 스타일</title>
<style>
p {
color:yellow;
background-color:black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>코드가 길어질 수록 비효율 적이다!,, 가능하면 사용하지 않음
3. 외부 스타일
link- 현재 문서와 외부 리소스를 연결해줌
<link rel="stylesheet" href="style.css">- rel : relations, 관계, 대상 파일의 속성을 나타냄, css파일은 stylesheet 라고 함
- href : hyper-references 경로, 연결 시 참조할 파일의 위치를 나타냄
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>/* style.css */
p {
color:yellow;
background-color:black;
}
코드 한줄, 우동 한 그릇(?,,,)