7강 배경 이미지와 이미지 이해하기 (유데미 강의, CSS완벽 가이드, 맥스 선생님 강의)

background 특성

 

background-repeat: 이미지가 컨테이너보다 작을경우 반복을 하는데 no-repeat, x,y 등으로 반복을 하지 않거나 x축,y축으로만 반복하게끔 설정 가능

 

background-size: 너비,높이 크기 설정 (px ,% ,cover, contain ...)

cover: 컨테이너를 꽉 채움 (확대,축소를 알아서 함, 따라서 이미지 잘림)

contain: 이미지의 크기(비율) 그대로 출력

 

background-position: 이미지 위치 이동 (px은 그만큼 공간을 띄우고, %는 그만큼 이미지를 잘라냄,기본 50% 50%)

 

background-origin: 이미지 컨테이너의 크기를 지정함 (기본값은 padding, 즉 컨텐츠+패딩까지 이미지를 채우고, border-box로 할 경우 border까지 이미지를 채움)

 

background-clip: 이미지의 어디를 자를건지를 지정함 (origin 속성을 덮어씌움, origin은 컨테이너 크기를 지정했기에 이미지가 넘치는 쪽(x,y 둘 중 한쪽)은 border까지 다 채워졌었는데 clip의 경우는 자르는 것이기 때문에 넘치더라도 설정한 값에 따라 잘라버림)

 

축약

background: url position / size repeat origin clip

순서로 한줄로 위의 특성을 정의할 수 있음

 

위의 이미지 스타일링은 background 이미지에만 적용 가능함 아래의 img 태그의 이미지일 경우 위치 조정같은것은 padding을 쓰는 편법이 필요함

img

img 요소의 부모요소의 크기에 상관없이 img는 src에 들어간 이미지의 크기 그대로 출력된다, 따라서 크기를 조정하려면 img 태그에 직접 css를 걸어야 한다

img에 px을 주거나 %를 줄 수 도 있는데 보통 많이 쓰는 부모요소인 a태그가 부모로 올 경우 a 태그를 inline-block으로 변경해주어야 %가 적용된다 (inline은 크기가 컨텐츠에 종속되기 때문, inline-block으로 안하고 100%를 주면 a태그의 크기를 무시하고 그냥 이미지 원본의 크기로 나옴)

 

img에서 그림자를 넣을때(inline 요소) 밑에 여백이 남는 경우가 있는데 이럴때는 vertical-align을 top이나 bottom으로 설정해주면 된다 혹은 display를 block으로 하면 된다

 

background-image

linear-gradient (방향,색,색,...)

radial-gradient

 

이미지 스태킹 (image stacking)

이미지를 중복으로 깔아둘 수 있음 (투명도를 조절한다거나, 빈 공간이 있는 이미지를 써야겠지만)

단색의 경우에는 항상 맨 밑에 둬야함 (,)로 구분

 

(예시) background : linear-gradient() 특성 값, url() 특성 값, blue 특성 값

 

filter: 요소에 여러가지 변형을 거는 것

 

 

svg를 많이 사용하는데 이에대해 강의하려면 새로운 강좌를 하나 열어야할 정도이니 따로 강의를 듣도록하자SVG: Scalable Vector Graphics

 

 

 

 

강의,자료, 출처

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/