[CSS] html 내부에 css 적용하는 법
html만으로 웹 사이트를 디자인하는 것에는 한계가 있습니다. 그리고 html의 한계를 보완해주는 것이 바로 css입니다. css를 적용하는 방법에는 크게 html 내부에 css를 작성하는 방법과 외부의 css파일을 불러와 적용하는 방법이 있습니다. 이 글은 html 내부에 css를 작성하는 방법에 대해 다루고 있습니다. html 내부에 css를 작성하는 방법은 <head> 구역에서 css를 작성하는 방법과 <head> 구역이 아닌 디자인을 적용하고자 하는 태그에 직접 css를 작성하는 방법 총 2가지 방법이 있습니다.
1. <head> 구역에 css 작성하기
<head> 구역에 css를 작성하면 이 css는 해당 html 파일 내부에서만 유효하고 다른 html 파일에서는 사용할 수 없습니다. <head> 구역에 css를 작성하실 때는 먼저 <head> 구역에 <style> 태그를 추가해야합니다. 그리고 <style> 태그 내부에 css를 적용하고자 하는 대상, 수정할 속성, 값을 입력해주어야합니다.
'대상 { 속성 : 값; }'의 형태로 작성하시면 됩니다.
| 유형 | 예시 |
| 대상 | 태그 이름, 클래스, id 등 변경 대상 |
| 속성 | 색, 크기 등 변경 유형 |
| 값 | 색상 코드, 숫자 등 변경 값 |
아래 코드는 화면의 배경색과 텍스트의 색을 지정하는 코드입니다.
<head>
<style>
body{
background-color : skyblue;
}
h1 {
color : blue;
}
</style>
</head>
<body>
<h1> css 적용 예제</h1>
</body>
화면의 배경색과 <h1>의 텍스트의 색이 변경된 것을 확인할 수 있습니다.
2. 특정 태그에 직접 css 작성하기
특정 태그에만 css를 적용하고 싶다면 직접 태그에 css를 작성하시면 됩니다. 이 css는 해당 태그에서만 유효하고 다른 태그에는 적용되지 않습니다. 작성 방법은 css를 적용하고 싶은 태그 옆에 style=" "를 입력해주시면 됩니다. 그리고 따옴표(" ") 내부에 적용하고자 하는 css의 속성과 값을 입력해주시면 됩니다. <h1 style=" color : blue;">는 <h1> 태그의 텍스트의 색을 파란색으로 지정한다는 의미입니다.
아래 코드는 화면의 배경색과 텍스트의 색을 지정하는 코드입니다.
<head>
</head>
<body style="background-color : skyblue;">
<h1 style="color : blue"> css 적용 예제2</h1>
</body>
