why use Background ?
1. 호스트들이 어떤 이미지를 올 릴지 모르는 경우.
ex) facebook instargram. ->
(어떤 이미지가 업로드가 될 지 모르니까 이미지의 비율은 제 각각 다르니까 , 우린 어떤 사진을 받게 될 지 예측불가.)
어떤 사람은 가로 가 긴 이미지를 업로드 할 수 있고,
또 다른 사람은 세로가 긴 이미지를 업로드 할 수 있기 때문.
width 300 height 200 이렇게 규격이 있으면 항상 이 규격안에 업로드를 시켜줘야 하는 것 이기 때문.
즉, 정해지지 않은 이미지라 생각이 들 경우 background 를 사용한다.
img 같은 경우 부모의 width 사이즈가 얼마던 간에 width를 무시를한다. (자기 본디 사이즈를 찾아가는 성격)
그래서 width : 100% 주자. (부모의 width 100%를 따라가겠다)
display : inline 임에도 불구하고 width, height 주는 것 이 가능하다.
2. 배경이미지로 아이콘을 만들거나 .
background-color
background-image: url('https://images.unsplash.com/photo-1611095788646-86737a001141?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-repeat: (default repeat) no-repeat
backgroud-size:
contain : 요소안에 이미지 다 들어가라! 어떤식으로든 들어가라!
contain: 포함하다
cover: 이미지가 요소를 덮자
custom
background-position : X축,Y축
px 단위 사용 가능
'HTML & CSS' 카테고리의 다른 글
| visibility: hidden,opacity: 0 ,display: none (0) | 2021.04.14 |
|---|---|
| box-shadow (0) | 2021.04.13 |
| Typography (0) | 2021.04.11 |
| 반응형 (0) | 2021.04.09 |
| display:flex,none (0) | 2021.04.09 |
