css는 html 요소를 꾸미기 위한 문법입니다. css를 html 적용시키는 방법은 3가지가 있습니다. 첫 번째는 html 요소의 속성에 style 속성을 사용하는 방법입니다. 두 번째는 <head> 태그 안에 <style> 태그를 만들고 태그 안에 적용할 html 요소를 정의하는 방법입니다. 세 번째는 css 파일을 만들고 <link> 태그를 사용해서 연결하는 방법입니다.
첫 번째 사용법
<!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>
</head>
<body>
<h1 style="color: blue">hello world</h1>
</body>
</html>
두 번째 사용법
<!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>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
세 번째 사용법
index.css 파일
h1 {
color: blue;
}
index.html 파일
<!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>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>hello world</h1>
</body>
</html>
결과
세 번째 방법이 많은 파일에 css를 적용시키기 좋기 때문에 가장 많이 사용이 됩니다.
'IT > css' 카테고리의 다른 글
| css id 선택자 (0) | 2023.03.14 |
|---|---|
| css 요소 선택자 (0) | 2023.03.14 |
| css 전체 선택자 (0) | 2023.03.14 |
| css 배경색 변경 (0) | 2023.03.06 |
| css 글자색 변경 (0) | 2023.03.05 |
댓글