Javascript & JQuery & CSS

 1. background-color 

  - 배경색을 설정하는 속성으로 {background-color:red} 또는 {background-color:#ff0000}와 같이 사용됩니다.

 2. background-image

  - background-image는 배경이미지의 URL을 설정하는 속성으로 {background-image:url('이미지 경로')}와 같이 사용됩니다.

 3. background-repeat 

   - background-repeat는 이미지의 정렬을 지정하는 속성으로 아래와 같은 값을 정의할 수 있습니다.

   repeat : 이미지를 바둑판식 배열로 정렬 합니다.
   repeat-x : 이미지를 가로방향으로 반복해서 정렬 합니다.
   repeat-y : 이미지를 세로방향으로 반복해서 정렬 합니다.
   no-repeat : 이미지를 반복되지 않고 한 번만 표시합니다.
 

 4. background-attachment

  - background-attachment는 이미지가 지정되어 있는 경우 이미지를 고정되게 할 것인지,
  스크롤에 따라서 내용도 함께 이동시킬것인지를 설정하는 속성이며 그 값으로는 다음과 같습니다.

  fixed 이미지의 위치를 고정시킵니다.
  scroll 이미지를 다른 내용과 함께 스크롤하도록 합니다.

 5. background-position

  - background-position은 이미지가 지정되어 있는 경우 특정 위치를 뿌려때 사용되는 기능 입니다.

  <img src="/lecture/jquery/image/background_menu.png" border=1>
  
  위와 같은 이미지가 있을 경우, 검정색 공지사항 부분과  주황색 공지사항 부분을 나누어서 화면에 뿌려주고 싶을 경우
  
  .main-left .menu01:hover {background-position:0px -85px;}
  
  와 같은 형식으로 뿌려 줍니다.

  menu01 객체에 마우스가 올려졌을 경우, 가로 (0px), 이미지의 세로는 Div 객체에서 -85px 부분부터 뿌리게 되어 주황색 아이콘이 보이게 됩니다.



  위와 같은 형태로 background-position 을 사용할 수 있습니다.
  

  background-position: center center;


  background-position 속성을 위처럼 줄수도 있습니다. 이미지를 center 에서 뿌려줄지, top, left, right 에서 시작할지 결정할 수도 있습니다.


6. background-size

  
  auto : 원래 이미지가 그대로 사용되기 때문에 박스의 크기를 주더라도 본래 사진 크기 그대로 나타남.
  200px : 값이 하나만 주어지면 주어진값은 너비값을 인식하고, 높이값은 auto로 나타납니다.
  400px 300px : 너비와 높이가 모두 지정?으므로 배경이미지는 400*300크기로 나타납니다.
  60% auto : 정해진 박스의 크기에 따라 너비가 60% 지정되고, 높이는 auto로 나타납니다.
  contain - 이미지의 너비와 높이 비율을 유지하는데, 너비나 높이 중 작은값을 배경이미지에 맞춥니다.
  cover -  이미지의 너비와 높이 비율을 유지하는데, 너비나 높이 중 큰값을 배경이미지에 맞춥니다.
  100% -  이미지의 너비와 높이 비율을 박스 크기에 따라 100%로 맞춰줍니다.

  사진의 크기가 얼마냐에 따라 이 속성들을 알맞게 쓸 수 있어요.

  예)  background-size: cover;    - 넓이 와 높이의 비율을 유지하면서 큰쪽을 기준으로 맞추게 됩니다.
  예)  background-size: auto;  - 원본 이미지 그대로 표시합니다.
  예)  background-size: 400px 400px;
  예)  background-size: 60% auto;    -  넓이가 박스의 60%  새로는 auto로 지정됩니다. background-position: center center;
  예)  background-size: 60% auto;    -  넓이가 박스의 60%  새로는 auto로 지정됩니다. background-position: top left;
  예)  background-size: contain    -  넓이 와 높이의 비율을 유지하면서 작은쪽을 기준으로 맞추게 됩니다.