<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="color:red">
<div style="background-color: brown;">
<h1 style ="color:white">스타일1</h1>
</div>
<div style="background-color: black;color:white">
스타일2
</div>
<div style="background-color: blue;">
스타일3
</div>
</body>
</html><div></div> 영역을 구분을 짓는 태그다. 태그만으로는 아무런 영향을 끼치지 않지만 CSS, 즉 스타일을 다르게 하기 위해 영역을 구분 지을 때 사용한다.
style = "css속성: 값" CSS 속성은 위 코드에서 보듯이 태그 안쪽에 들어가며 태그 안에서만 작동한다.
background-color: 색상 배경색을 지정할 때 사용한다.
color: 색상 글자색을 지정할 때 사용한다.
2개의 속성을 동시에 사용하고 싶을 때는 ;를 사용하여 잇는다.
상위 태그에서 지정한 속성을 하위 태그에서 재지정하면 하위태그 쪽 속성이 우선시된다.
위 코드에서는 body에서 글자색을 빨간색으로 지정했지만 스타일 1과 스타일 2는 자신의 태그가 우선시되는 것을 확인할 수 있다.
코드의 색상은 4가지 방식으로 나타낸다.
1. 색상 이름: red, blue 등. 다양하지 않아서 잘 사용하지는 않는다.
2. 색상코드: #000000 #으로 시작하고 빨강, 초록, 파랑을 255로 나누고 16진수로 연속으로 써놓은 값
3. RGB: rgb(0, 0, 0) 색깔 빨강, 초록, 파랑을 255를 10진수로 쓰면 된다.
4. RGBA: rgba(0, 0, 0, 0) RGB에서 불투명도를 추가한 값 마지막 불투명도가 0이면 투명 1이면 불투명하다.
'HTML, CSS > CSS' 카테고리의 다른 글
| [CSS] 여백 (0) | 2023.08.26 |
|---|---|
| [CSS] 너비, 높이 (1) | 2023.08.26 |
| [CSS] 정렬 (0) | 2023.08.26 |
| [CSS] 글자 크기, 굵기, 줄 높이 (0) | 2023.08.26 |
| [CSS] 글꼴 (0) | 2023.08.26 |
