css background-color
■ 웹 문서를 만들 때 문서 전체의 배경색 또는 각 요소에 배경색을 지정할 수 있는데요. 배경색을 지정하는 css 속성은 background-color입니다. 색상값에는 16진수의 값, rgb 값, 색상 이름 등을 넣을 수 있습니다. 이것들 중에서 우리가 선택하기 나름인데요.
배경색의 투명도를 조절하고 싶으면 rgb 값, 섬세한 색상 조절을 하실 거면 16진수, 단색으로 표현하실 거면 black 등과 같은 색의 이름을 입력하시면 되는데요. 간단하게 예제를 하나 만들어보겠습니다.
▲ 본문에 div 태그를 이용해서 적당한 크기의 박스를 만들어봤는데요. 브라우저에서 출력해보겠습니다.
▲ 아직 아무 색도 없는 박스가 만들어졌는데요. 먼저 문서 전체(body)의 배경색을 검은색으로 지정해보겠습니다.
▲ body의 background-color 속성을 이용해서 검은색으로 지정해봤습니다.
▲ 이렇게 문서 전체가 검은색으로 바뀌는데요. 여기서 한 가지 짚고 넘어가야 할게 있습니다. 다른 속성들은 상위 요소(body)에 적용하면 그 하위 요소(div)에 상속이 돼서 모두 같은 속성으로 바뀌게 되지만, 배경색은 그렇지 않습니다.
■ 어??????? 위 예제에서 body의 배경 색인 검은색이 상속돼서 div의 색도 검은색이 된 거 아니냐구요? 아니에요. 배경색의 기본값은 투명입니다. 즉 현재 div의 배경색이 검은색인 게 아니고, 기본 색인 투명이라서 본문(body)의 색이 그대로 비치고 있는 거예요. 그렇게 때문에 div의 배경색을 진짜 검은색으로 하고 싶다면 따로 설정을 해줘야 합니다.
여기서는 div의 배경색을 초록색으로 설정해보겠습니다.
▲ 앞에서 언급한 색상 값을 세가지 모두 입력해봤는데요.
▲ 어떤 형식으로 입력하셔도 모두 초록색이 들어가게 됩니다.
■ 이제 마지막으로 배경색의 투명도를 조절해보고 마무리할게요. 투명도의 색상 값 입력은 rgba(rgb 값, 알파값)을 넣어주면 되는데요. 알파값은 0이 완전 투명, 1이 불투명입니다. 0.5는 반투명이라고 생각하면 되겠죠? 초록색의 투명도를 조절해보겠습니다.
▲ background-color의 색상 값에 rgba(rgb 값, 알파값)을 입력해봤습니다
▲ 어?? 그런데 반투명으로 지정했는데...색이 더 어두워져서 의아하신 분들도 계시죠? 본문(body)의 배경색이 검은색이라서 그래요. ^^ 뒤가 어두우니까 요소의 색이 옅어질수록 어두워지게 되겠죠? 모두 이해되셨을 거라 생각하고 마무리하겠습니다. 수고하셨어요.
