2021-07-08 Part(1)_ch(8)_(13~17)

background-size

값 cover는 뒷 요소 가로,세로 중 더 넓은 부분에 맞춰서 이미지가 들어가게되고

값 contain은 뒷 요소 가로 세로 중 더 짧은부분에 맞춰서 이미지크기가 조정된다.

 

background-attachment

기본값은 scroll

fixed로 입력시 뷰포트에 이미지가 고정된다 이미지가 스크롤되어 올라간다

 

position

기본값 static 값

relative 자신을 기준 자신을 기준으로 옮긴것 이므로 이동전 위치에는 자신이 있고 옮긴 위치에는 허상이다.

 

값 absolute 부모를 기준 (relative한 부모) 공중에 붕 뜬다. 그러면서 아래있던 것들이 밑으로 깔리게되고 서로간의 상호가 무너짐 부모에게 relative를 주고 자식에게 absolute와 이동값들을 주면 부모를 기준으로 이동하게되며 부모에 static의 기본값을 주고 부모의 부모에게 relative를 주면 부모의 부모가 다시 기준이된다. 결국에는 부모가 되지 않을 값에는 static 부모가 되어 기준이 될 부모에겐 relative를 준다. 부모가 결국없을시(모두 static) 뷰포트 기준으로 움직임

 

값 fixed 뷰 포트를 기준 fixed시 스크롤이 있어 내려도 그자리에 계속 나타나게 됨

 

인라인요소에 position을 fixed, absolute 주게되면 자동으로 inline에서 block으로 display가 변경되고 가로세로 길이도 지정가능하게됨

 

요소 쌓임순서

1. position의값이 relative, absolute, fixed등 값이 있을때 위에 쌓임

2. 1번 조건에 다 해당 할시 z-index의 값이 높을수록 위에 쌓임

3. 1,2번 같을시 html 구조상 마지막에 작성한 요소가 위에 쌓임