[HTML] background-color, image 설정방법

이번 글에서는 CSS에서 웹페이지에서 표현될 표 또는 특정 영역에 배경을 설정하는 속성인 background-image와 background-color에 대하여 다루겠습니다.

 

# CSS background 속성

  CSS에서 background 속성은 배경을 지정하는 속성입니다. color / positiong / repeat / image / size / clip / origin / attachment / bledmode 등이 접두어로 사용되며 각각의 역할을 수행합니다. 이번 글에서는 이러한 수많은 설정들 중에서 배경의 시각적인 부분을 지정하는 image와 color에 대하여 다룰것입니다. 

 

 

# background-image 사용방법

  먼저, 아래 사진이 우리가 background를 적용할 웹페이지의 header 부분입니다. 일반적인 리스트를 inline 형태의 display로 표현하여 header에 한줄로 표현되게 하였습니다. 이번 글에서 html 부분은 중요치 않기에 코드는 CSS만을 보여드리겠습니다.

#gnb ul li {
  display: inline;
  margin : 10px;
  font-size: 1.7em;
}

 

html 사진 1

 

  먼저, background-image를 적용해보겠습니다. 이번에 header에 적용할 이미지는 '우주'입니다. 우주의 어둡고 형형색색인 이미지 특성상 글자가 밝아야 하기때문에 ul li a 속성의 색상을 white로 별도로 지정하였으며, background-image 적용방법은 아래와 같습니다.

#header {
  background-image: url(img.jpg);
  }

#gnb ul li {
  display: inline;
  margin : 10px;
  font-size: 1.7em;
}
#gnb ul li a {
  color : white;
}

html 사진 2

 

  위와 같이 header나 어떠한 로고 사이에 글자가 들어가는 웹페이지를 많이 마주치셨을 것입니다. 그러한 경우에는 위와 같은 방법으로 background 이미지를 별도로 지정하여 걸어준다는 것을 이제 알았으며 우리도 할 수 있게 되었습니다.

 

 

# background-color 사용방법

  background-color의 사용방법은 굉장히 단순합니다. 아래와 같이 코드를 작성한 뒤에 그저 어떠한 색상을 지정할지를 결정한 뒤에 코드를 입력하기만 하시면 됩니다. 간단한 색상인 yellow / red / blue / green 등의 색상은 영어로만 입력해도 입력이 가능하지만 복잡한 색상코드는 인터넷에서 검색해본뒤에 입력하셔야 합니다.

#header {
  background-color: yellow;
  }

html 사진 3

 

 

여기까지 CSS에서 웹페이지에서 표현될 표 또는 특정 영역에 배경을 설정하는 속성인 background-image와 background-color에 대하여 다루었습니다.