Learn HTML & CSS. 13.Adding Images

Review what I learned

1. Image 의 크기는 width 와 height 속성으로 조절할 수 있다.


2. background-image 속성을 통해 어떤 태그에든 배경 이미지를 넣을 수 있다. (CSS)
       예. background-image: url:("이미지 주소");
   


3. background-repeat 속성을 통해 background-image 를 반복하게 할 수 있다. (image가 작을 경우)
       repeat(기본 값)(x축, y축 반복), repeat-x(x축만 반복), repeat-y(y축만 반복), no-repeat(반복 X)
   


4. background-position 속성을 통해 반복하지 않는 배경 이미지가 어떻게 위치할 지를 정할 수 있다.
       예. background-position: center top; (x축 y축)
           [left top], [center top], [right top], [left center], ....등 9가지
               한가지만 적을경우 y축은 center로 설정됨(back-pos: left; == back-pos: left center;)
   


5. background 속성으로 위 세 가지를 한 번에 설정할 수 있다.
       예. background: url("주소") no-repeat right center;
           position에서 한가지를 생략할 수 있었지만, 여기서는 불가능
   


6. background-image 는 이미지가 아닌 그라데이션으로 설정할 수도 있다.
       예. background-image: -webkit-linear-gradient(#61ed63, #2ccc34);
           ※모든 브라우저가 지원하지는 않으므로 주의
   

출처 : codecademy(HTML & CSS)