html - img VS css - background

📌html - img

 <div class="item">
            <h1>html-img</h1>
            <img src="./all_image/summer.JPG" alt="대체이미지">
 </div>

-주로 콘텐츠 요소로 사용됨  

📌css - background

   <div class="item">
            <h2>css-background</h2>
            <div class="item-bg"></div>
   </div>

 - width, height값을 지정해줘야함 * 하지만 지정해줘도 image의 본연의 크기에 맞춰 생성됨

-  내가 설정한 값으로 image가 꽉차게 해주고 싶으면 background-size:cover; 

(*width:100%; image자신의 크기에서 100%이고 background-size:cover;  부모요소의 width값에 딱 맞춰짐 )

 

 

background-repeat:repeat-x /repeat-y /repeat /no-repeat

 

background-position

요소에 지정된 배경 이미지의 위치를 변경하고자 할 때 사용합니다.  

center, center top, right center, center bottom, left center등 

.item-bg{ background-position:left top;}

 

background-color

 

background-image:url()

 

background-size

cover:배경 이미지를 늘여 적용되는 요소 전체의 표시 

contain:배경 이미지의 가로 세로 비율을 맞춰 요소에 표시할 수 있는 최대 크기로 표시

 

background-attachment

요소에 지정된 배경 이미지를 스크롤되어도 항상 같은 위치에 고정시키고자 할 때 사용한다. 

scroll:스크롤 적용

fixed:지정한 스크린 위치에 그대로 남음

 

background 

font 속성과 같이 배경과 관련된 5가지 속성을 단축해서 한번에 선언하고자 할 때 사용한다.

color/ image/ repeat/ position/ attachment/ inherit 

  .item-bg{ background:red url(./all_image/summer.JPG) no-repeat center scroll;}

 

 

📌 html - img  VS css - background

 

 

 

html - img 속성은 브라우저의 크기에 반응하는데 반해 

css - background 그렇지 않다. 

그 속성을 바꾸기 위해 background - position, size 등을 활용하는 것이다.