오늘은 CSS Background 속성에 대해 알아보도록 하겠습니다.
Background 속성은 배경을 지정하는 데 사용됩니다.
우선, 배경색상을 지정하는 방법에 대해 알아보겠습니다.
background-color
배경 색상을 지정하는 방법에는 크게 3가지가 있습니다.
1. 미리 정해진 색상명을 이용해서 지정하는 방법 (Black, White, Blue, Green ...)
2. 16진수 6자리 색상코드를 이용해서 지정하는 방법 (#000000, #FFFFFF, #FF0000, ...)
3. 0부터 255 이하 숫자를 이용한 RGB 색상코드를 이용해서 지정하는 방법
배경에 미리 정해진 색상명을 이용해서 지정하는 방법입니다.
/* CSS */
background-color: red;
미리 정해진 색상명은 아래 웹사이트 페이지에서 확인할 수 있습니다.
총 140여개의 색상명이 있군요.
https://www.w3schools.com/colors/colors_names.asp
다음으로 16진수 6자리 색상코드를 이용해서 지정하는 방법입니다.
/* CSS */
background-color: #00FFFF;
다음으로 0부터 255이하의 숫자를 이용한 RGB 색상코드를 이용해서 지정하는 방법입니다.
/* CSS */
background-color: rgb(40,100,200);
RGB 색상코드를 이용해서 배경을 지정할때 투명도를 설정하는 방법이 있습니다.
사용방법은 다음과 같이 RGBA를 사용하여 1이하의 투명도 값을 네번째 인자로 지정합니다.
/* CSS */
background-color: rgba(40,100,200,0.5);
투명도 값인 알파값 0.5를 넣었더니 색상이 많이 옅어진 것을 확인할 수 있습니다.
댓글