반응형
CSS 추가하는 방법
스타일시트를 넣는 3가지 방법
- External CSS
- Internal CSS
- Inline CSS
External CSS
External CSS의 경우 하나의 파일만 수정하여 전체의 웹사이트 스타일을 바꿀 수 있다는 장점이 있다.
각각의 HTML page에 external style sheet를 <link> 요소를 통해 reference해야한다.
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="ex.css">
</head>
<body>
<h1>CSS확장자 파일 가져오기</h1>
<p>외부에서 css파일 가져오기</p>
</body>
</html>CSS 코드
body{
background-color: aqua;
}
h1{
color:red;
}결과
캐치패션 퀴즈를 풀면 현금처럼 사용 가능한 포인트 적립과 셀린느 선글라스 증정 이벤트에 응
deg.kr
Internal CSS
Internal 스타일 시트의 경우 <head>부분 안에 <style>을 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body {
background-color: aqua;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>CSS확장자 파일 가져오기</h1>
<p>외부에서 css파일 가져오기</p>
</body>
</html>
Inline CSS
Inline CSS의 경우 <h1> 또는 <p>에서 직접 CSS 스타일을 주는 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<h1 style="color:red">CSS확장자 파일 가져오기</h1>
<p style="font-size: 25px;">외부에서 css파일 가져오기</p>
</body>
</html>반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] CSS Backgrounds 배경 꾸미는 법 (0) | 2023.09.10 |
|---|---|
| [CSS] CSS 주석달기 (0) | 2023.09.09 |
| [CSS] CSS Selectors (0) | 2023.09.09 |
| [CSS] CSS 문법 (0) | 2023.09.09 |
| [CSS] CSS란 무엇인가? (0) | 2023.09.09 |
댓글