오늘은 웹 페이지에서 배경색을 변경하는 방법에 대해 알아보겠습니다.
CSS(웹 페이지의 스타일을 정의하는 언어)를 사용하면 쉽게 배경색을 설정할 수 있습니다. 초보자도 이해하기 쉽게 설명해 드릴게요!
1. CSS 기본 개념
CSS는 HTML 요소의 스타일을 지정하는 데 사용됩니다. 배경색은 background-color 속성을 통해 설정할 수 있습니다. 이제 배경색을 변경하는 다양한 방법을 살펴보겠습니다.
2. 배경색 변경하는 방법
2.1. 인라인 스타일
HTML 요소에 직접 스타일을 추가하는 방법입니다. 이 방법은 간단하지만, 코드가 복잡해질 수 있습니다.
<div style="background-color: lightblue;">
이 DIV의 배경색은 연한 파란색입니다!
</div>2.2. 내부 스타일 시트
HTML 문서 내의 <style> 태그 안에 CSS를 작성하는 방법입니다. 여러 요소에 같은 스타일을 적용할 때 유용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경색 변경 예제</title>
<style>
body {
background-color: lightgreen; /* 본문 배경색 설정 */
}
.box {
background-color: lightcoral; /* 박스 배경색 설정 */
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
이 박스의 배경색은 연한 산호색입니다!
</div>
</body>
</html>
2.3. 외부 스타일 시트
CSS 파일을 별도로 만들어 HTML 문서에 연결하는 방법입니다. 여러 페이지에서 같은 스타일을 사용하고 싶을 때 유용합니다.
1. CSS 파일 생성 (styles.css)
body {
background-color: lightyellow; /* 본문 배경색 설정 */
}
.box {
background-color: lightpink; /* 박스 배경색 설정 */
padding: 20px;
margin: 10px;
}
2. HTML 문서에서 연결
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경색 변경 예제</title>
<link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 연결 -->
</head>
<body>
<div class="box">
이 박스의 배경색은 연한 분홍색입니다!
</div>
</body>
</html>
3. 색상 지정 방법
CSS에서는 다양한 방법으로 색상을 지정할 수 있습니다.
- 색 이름: red, blue, green 등
- Hex 코드: #ff0000 (빨간색), #00ff00 (초록색)
- RGB 값: rgb(255, 0, 0) (빨간색)
- RGBA 값: rgba(255, 0, 0, 0.5) (반투명 빨간색)
body {
background-color: #f0f0f0; /* Hex 코드 사용 */
}
.box {
background-color: rgb(255, 165, 0); /* RGB 값 사용 */
}
.transparent {
background-color: rgba(0, 0, 255, 0.3); /* 반투명 색상 사용 */
}4. 배경색 변경하기
CSS에서는 특정 이벤트에 따라 배경색을 변경할 수도 있습니다. 예를 들어, 버튼을 클릭했을 때 배경색이 바뀌게 할 수 있습니다.
예시: JavaScript와 함께 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경색 변경 예제</title>
<style>
body {
background-color: lightgray;
}
</style>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = "lightblue"; // 배경색 변경
}
</script>
</head>
<body>
<button onclick="changeBackgroundColor()">배경색 변경</button>
</body>
</html>5. 다양한 배경색 선택하기
CSS에서는 다양한 색상을 사용할 수 있습니다. 색상은 영문 이름뿐만 아니라 HEX 코드나 RGB 값으로도 지정할 수 있습니다.
1) 영문 이름 사용
background-color: red; /* 빨간색 */
background-color: green; /* 초록색 */
background-color: blue; /* 파란색 */2) HEX 코드 사용
background-color: #ff0000; /* 빨간색 */
background-color: #00ff00; /* 초록색 */
background-color: #0000ff; /* 파란색 */3) RGB 값 사용
background-color: rgb(255, 0, 0); /* 빨간색 */
background-color: rgb(0, 255, 0); /* 초록색 */
background-color: rgb(0, 0, 255); /* 파란색 */
CSS를 사용하면 웹 페이지의 배경색을 쉽게 변경할 수 있습니다.
인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 등 다양한 방법으로 배경색을 설정할 수 있습니다. 색상 지정 방법도 여러 가지가 있으니, 원하는 색상을 자유롭게 사용할 수 있습니다.
여러분의 웹 페이지에 배경색을 적용해 보세요! 질문이 있다면 댓글로 남겨 주세요.
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > CSS' 카테고리의 다른 글
| CSS에서 크기 조절하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
|---|---|
| CSS에서 글 정렬 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS에서 글자 크기와 굵기 설정하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS에서 글꼴 변경하는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
| CSS로 글자색 쉽게 넣는 방법 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
