본문 바로가기

디지털노마드/HTML과 CSS 강좌

CSS로 전체 배경색 바꾸기

picture by https://htmlcolorcodes.com/

웹문서의 배경색을 바꾸는 태그는 간단하지만 효과가 좋기 때문에 예쁘게 웹 문서를 꾸미고 싶어하시는 분들은 자주 사용하는 태그 입니다. 아래의 태그를 스타일시트에 적용해봅시다. 스타일 시트를 HTML 에 포함 시키지 않으려면 OO.css 파일로 만들어 저장합니다. 그리고, 적용시키고자 하는 파일에서 링크를 적어 부릅니다. 

 

웹문서에 배경색 적용하기

body {
background-color: yellowgreen;
}

 

 

배경색에 그라디언트 적용하기

색상을 지정할때는 컬러의 이름을 써주거나 (yellow, red, green) rgb 코드를 적어줍니다. 색상코드는 웹사이트에서 쉽게 구할 수 있습니다. 

body {

background-image: linear-gradient(rgb(89, 208, 255), rgb(255, 255, 255));

}

 

여기서 그라디언트의 방향을 위에서 아래쪽이 아닌 사성으로 적용하고 싶으면 다음과 같이 바꿔주세요. HTML 색상코드를 찾아서 태그에 적용하시면 예쁘게 만들 수 있습니다. 

background-color: red; 

 background-image: linear-gradient(to bottom right, red, yellow);

https://htmlcolorcodes.com/

 

HTML Color Codes

Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.

htmlcolorcodes.com