1. 13일 전

    CSS 5. font & text

    font와 text

  2. 1달 전

    CSS 4. background

    background 관련 속성 정리

  3. 2달 전

    CSS 3. display, visibility, opacity

    보여지는 속성 정리

  4. 5달 전

    CSS 2. box model

    CSS Box 모델에 대해 알아봅시다.

  5. 6달 전

    CSS 1. Selector

    CSS Selector를 공부해봅시다.

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

CSS 4. background

background 관련 속성 정리

featured image thumbnail for post CSS 4. background

CSS3 Background | PoiemaWeb

background는 요소의 배경을 채울 때 사용한다.

background 에 관련된 속성이 꽤 많은데,

  • background-image: 이미지를 넣을 수 있다.
  • background-repeat: 이미지가 반복되게 설정할 수 있고, 기본이 반복
  • background-size: 백그라운드 이미지로 사용한 값을 조절할 수 있는데, width, height를 명시적으로 지정하면 해당 크기로 줄어들게 된다. 이 과정에서 이미지의 비율이 손상될 수 있다. 그래서 사용하는 속성이 contain, cover
  • background-attachment : 스크롤 되는 요소에도 정해진 크기로 이미지를 고정하는데 사용할 수 있다. 한 번도 사용해보지 않은 속성이다. MDN 애플의 사이트가 이렇게 background 이미지를 고정하고 이미지를 교체하는 식으로 구현했겠구나..
  • background-color: 배경에 색상을 넣는 것 그라데이션도 가능하겠지
  • backbround-position: 이미지를 이동 시킬 수 있다. 만약 공간이 크고 이미지가 작다면, 공간내에 배치를 할 수 있고, 만약 이미지가 크고 공간이 적다면, 공간안에 보여줄 수 있도록 이동이 가능할 것이다. 후자의 경우 spites 이미지가 그 예다.
  • backbround-clip: background 이미지는 box model에서 content, padding, border 의 공간까지 채울 수 있다.

4%20background%2021eee28a58854ab3a029786d53a9e9d8/_2020-02-23__7.46.28.png

background-shothand

background: color || image || repeat || attachment || position;

background로 이미지를 넣는 것과 img 태그로 넣는 것의 가장 큰 차이점은 img 태그로 넣었을 때는 크롤러가 이미지로 인식하여 google에 노출한다든지 웹접근성을 위해 이미지를 읽어준다던지의 동작을 할 수 있다.

References


background-clip

background-attachment