[HTML+CSS][색상과 배경을 위한 스타일] 02 - 배경색과 배경 이미지

 

[HTML+CSS][색상과 배경을 위한 스타일] 01 - 웹에서 색상 표현하기

 

색상 표기법들에 대해 익혀 보았다면

이를 활용하는 배경 색과 배경 이미지에 대해서

알아보도록 하자.

 

 

---

 

 

background-color 속성 : 배경 색 지정하기

 

색상을 세밀히 조절하고 싶을 경우엔 16진수를,

투명도를 함께 조절하고 싶다면 rgba 표기법을,

간단한 원색만을 사용할 경우에는 색상 이름을 사용해 색상을 지정할 수 있다.

 

 

- 배경 색 스타일과 상속 -

 

배경색은 예외적으로 자식에게 상속되지 않는다.

 

body 태그에 색을 입혔을 경우 배경이 전체다 적용되어 보이는 것은

각 요소 배경이 투명해 색상이 적용된 것 처럼 보이는 것일 뿐이다.

 

 

 

 

---

 

 

background-clip 속성 : 배경 적용 범위 조절

 

박스 모델 관점에서 배경 적용 범위를 적용하는 것이다.

 

 

 

 

---

 

 

background-image 속성 : 웹 요소에 배경 이미지 넣기

 

배경 이미지는 웹에서 사용 가능한 파일인 jpg, gif, png 파일을 사용해 주며,

배경 이미지를 사용할때는 ‘url(파일경로)’ 형식으로 작성해 준다.

 

 

 

 

---

 

 

background-repeat 속성 : 배경 이미지 반복 방법 지정

 

배경 이미지의 크기가 배경을 채우려는 요소보다

작을 경우에 기본적으로 반복해 표시해 주며,

배경 이미지를 반복하지 않게 할 수도 있고

반복하더라도 가로 반복이나 세로 반복 등 반복 방향을 지정할 수 도 있게 한다.

 

 

---

 

 

background-size 속성 : 배경 이미지 크기 조절

 

배경 이미지를 여러 크기로 조절해 준다.

 

 

 

 

---

 

 

background-position 속성 : 배경 이미지 위치 조절

 

배경 이미지가 표시되는 위치를 조절한다.

 

 

 

 

---

 

 

background-origin 속성 : 배경 이미지 배치할 기준 조절

 

 

 

 

---

 

 

background-attachment 속성 : 배경 이미지 고정

 

기존에는 브라우저를 스크롤했을 때 이미지도 함께 스크롤되었는데

해당 속성을 통해 스크롤을 해도 이미지가 고정된 상태로

유지할 수 있게 설정할 수 있다.

 

 

 

 

---

 

 

background 속성 : 속성 하나로 배경 이미지 제어

 

배경 이미지 관련 속성을

background 속성 하나로 줄여서 사용하는 속성이다.

 

 

---

 

 

배경을 꾸미는데 정말 많은 속성들이 존재하는 것 같다.

 

해당 속성들을 잘 익혀서 잘 써먹도록 해야겠다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※