728x90
반응형
✅ 기본 문법
HTML에서 style 속성을 사용하여 배경색을 설정하려면 다음과 같은 문법을 사용합니다:
<태그 style="background-color: 색상;">
내용
</태그>위 문법에서 background-color는 CSS 속성이고, 색상은 적용할 색깔 값입니다. 색상 값은 이름, 16진수, RGB, RGBA 등 다양한 방식으로 지정할 수 있습니다.
⬇️ 예시
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit</title>
<meta charset="utf-8">
</head>
<body>
<div style="background-color: #7542e0;">
<h1>Weekly <span>Codeit</span></h1>
<p>금요일에 만나는 코딩 한 스푼</p>
</div>
</body>
</html>Weekly Codeit
금요일에 만나는 코딩 한 스푼
✅ 다양한 색상 값 사용하기
⚪ 색상 이름
<div style="background-color: blue;">
이 영역의 배경색은 파란색입니다.
</div>이 영역의 배경색은 파란색입니다.
⚪ 16진수 색상 값
<div style="background-color: #ff5733;">
이 영역의 배경색은 주황빛 빨간색입니다.
</div>⚪ RGB 색상 값
<div style="background-color: rgb(0, 255, 0);">
이 영역의 배경색은 녹색입니다.
</div>이 영역의 배경색은 주황빛 빨간색입니다.
⚪ RGBA 값 (투명도 포함)
<div style="background-color: rgba(255, 0, 0, 0.5);">
이 영역의 배경색은 반투명 빨간색입니다.
</div>이 영역의 배경색은 반투명 빨간색입니다.
✅ 다양한 HTML 요소에 사용하기
⚪ 문단 배경색 설정
<p style="background-color: yellow;">
이 문단의 배경색은 노란색입니다.
</p>이 문단의 배경색은 노란색입니다.
⚪ 제목 배경색 설정
<h1 style="background-color: lightblue;">
이 제목의 배경색은 연한 파란색입니다.
</h1>이 제목의 배경색은 연한 파란색입니다.
⚪ 버튼 배경색 설정
<h1 style="background-color: lightblue;">
이 제목의 배경색은 연한 파란색입니다.
</h1>이 제목의 배경색은 연한 파란색입니다.
728x90
반응형
'연구원생활' 카테고리의 다른 글
| [html]div와 span을 이용하여 영역 나누기 (0) | 2025.04.07 |
|---|---|
| [html] 이미지 추가하기 (0) | 2025.04.07 |
| [html] html 속성 (0) | 2025.04.07 |
| [html] 링크 추가하기 (0) | 2025.04.07 |
| [html] <br> 태그 : 줄 바꿈 (0) | 2025.04.07 |
