728x90
CSS 배경 색상 변경하기
배경 색상의 변경 방법은 여러가지가 있지만
쉽게 적용할수 있는 대표적인 방법으로 두가지가있다.
첫번째는 HTML상에서 태그에 style속성을 이용하여
배경색상을 입히는 방식과
두번째는 CSS 파일에서 CSS Selector를 통해
배경색상을 입히는 방식이 있다.
1. HTML 상에서 태그 직접 입력
기본형태
//HTML 태그 내 Style 속성을 이용한 배경 색상의 변경
<태그명 style="background-color: #ffffff;"></태그명>샘플코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>배경 색상 변경 예제 (HTML 직접입력)</title>
</head>
<body>
<div class="red" style="background-color:#d44000;width:100px;height:100px;margin-bottom:5px;"></div>
<div class="yellow" style="background-color:#f0c929;width:100px;height:100px;margin-bottom:5px;"></div>
<div class="green" style="background-color:#3a6351;width:100px;height:100px;margin-bottom:5px;"></div>
<div class="blue" style="background-color:#28527a;width:100px;height:100px;margin-bottom:5px;"></div>
</body>
</html>출력 결과
2. CSS 파일을 통한 배경 색상 변경
기본형태
//CSS 파일 내 CSS Selector를 통한 배경색상 변경 방식
CSS Selector {
background-color:#ffffff;
}샘플코드 : HTML, CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>배경 색상 변경 예제 (CSS 사용)</title>
<!--CSS 파일 경로 추가-->
<link href="/css 파일 경로">
</head>
<body>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>.red{
background-color:#d44000;
width:100px;
height:100px;
margin-bottom:5px;
}
.yellow{
background-color:#f0c929;
width:100px;
height:100px;
margin-bottom:5px;
}
.green {
background-color:#3a6351;
width:100px;
height:100px;
margin-bottom:5px;
}
.blue{
background-color:#28527a;
width:100px;
height:100px;
margin-bottom:5px;
}출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] border 테두리 속성 설정하기 (0) | 2021.04.06 |
|---|---|
| [CSS] 모서리 모양 변경하기 border-radius (0) | 2021.04.03 |
| [CSS] 폰트 (문자) 색상 설정 하기 font color set (0) | 2021.04.02 |
| [CSS] 엘리먼트 투명도 조절 opacity (0) | 2021.03.20 |
| [CSS] 가로 세로 가운데 정렬 (0) | 2021.03.20 |
댓글