2021-07-01 (80일차) background-image, 고정비율, css 이미지 고정비율, 슬라이더 좌우 보이게 하기, background-image에 텍스트 넣기
165~166강 ( 이미지 비율 )
스와이퍼 19강
- 이미지가 안 나오는 경우
: 포스트이미지 사이트 (https://postimages.org/)
- 스프라이트이미지 사용방법
: background-image 사용
- background-image : url( ) ;
: 태그의 배경으로 이미지를 넣는 명령
: 이미지의 크기가 정해진 너비보다 작다면 자동으로 이미지가 반복되어 나옴
- background-repeat :
norepeat : 이미지 반복을 멈춰준다.
- background-position : 가로px 세로px
: background-image를 특정너비로 자르고 사용하고 싶을 때 사용
+px : ← ↑
- px : → ↓
- background-size :
contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정
가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정
* 이미지의 너비를 늘렸을 때 : 고정비율을 가지고 있기 때문에 높이도 같이 커짐
* 일반 태그 : 고정비율이 없기 때문에 너비만 줄어듦
- padding-top : 100%를 주는 경우
: 부모 엘리먼트의너비 대비로 적용됨 (부모의 너비를 1 : 1고정비율을 가지고 따라감)
▼결론▼
- 고정너비 사용방법
: 자식에게 padding %를 준다.
- 1 : 1 비율 : padding-top : 100%;
- 2 : 1 비율 : padding-top : 50%;
- 1 : 2 비율 : padding-top : 200%;
- 16 : 9 비율 : padding-top : calc(100% / 16 * 9);
- 고정너비 이미지 위에 텍스트 넣는 방법
- 이미지 슬라이더 ( 좌우의 슬라이더가 약간 보이게 하기 )
ㄴ 다음 장으로 넘길 수 있다는 것을 표시하기 위해 주로 사용
