Background 이미지 크기 설정하기 / 2중 큰 따옴표 처리하기

background로 이미지를 주는 경우, 크기가 제멋대로이다.

< 아무것도 주지 않았을 때 >

이러한 경우 설정이 필요한데, 이 때 사용하는 설정이 background-size 옵션이다.

   <div id="visual">
      <h2 class="hidden">신규 강좌목록</h2>
      <ul>
         <li style='background:url("/MavenPrj/resource/images/lecture/banner-javascript180.png") no-repeat center; background-size: none;'>
             <a href=""></a>
         </li>

         <li style='background:url("/MavenPrj/resource/images/lecture/banner-oracle180.png") no-repeat center; background-size: none;'>
             <a href=""></a>
         </li>
         <li style='background:url("/MavenPrj/resource/images/lecture/banner-spring180.png") no-repeat center; background-size: none;'>
             <a href=""></a>
         </li>
      </ul>
   </div>

위의 코드에서 background-size 옵션을 바꿔주자.

참고 : 큰 따옴표 안에 작은 따옴표 쓸 때

'background:url("/MavenPrj/resource/images/lecture/banner-javascript180.png")'

js 와 css는 "", ''를 구분하지 않아, 위와 같이 섞어서 사용한다. ("''"또는 '""' 또는 \"로 표시)

그러나 JSON의 경우 ""로만 표현이 되므로, 태그 안에 작은 따옴표 안에 큰 따옴표를 쓰는 것이 요즘 추세다.

< background-size : cover 인 경우 >

cover 설정 시, 부모의 영역을 이미지가 Cover하게 되어, 부모의 영역으로 확장된다.

(맨 위의 그림만 참고!!)

< background-size : contain 인 경우 >

cover 설정 시, 이미지가 부모 영역에 Contain되도록 설정이 된다.

(맨 위의 그림만 참고!!)