1-6 자주쓰이는 CSS

margin과 padding

margin은 바깥 여백을, padding은 안쪽 여백을 조정

 

 

화면가운데 정렬하려면

✅  width를 주고, margin: auto를 사용 그래도 안되면 display:block을 추가

 

 

 

이미지관련 태그

✅  background-image: url('사이트'); - 이미지 넣어주기

✅  background-position: center; - 이미지 위치 설정

✅  background-size: cover; - 이미지 뒷배경 설정

 

    ** 뒷배경 속성

       1. contain : 이미지가 잘리거나 찌그러 지지 않는 한도 내에서 제일크게 설정.

                           (이미지가 원본그대로 나타나며 따로 설정하지 않으면 이미지가 반복됨)

       2. cover:  이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르다면

                         이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정

 

    ☞ 배경 이미지로 덮이지 않은 공간은 [background-color] 속성으로 채워지고,

        배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보임

 

 

 

background 관련 MDN

MDN: https://developer.mozilla.org/ko/docs/Web/CSS/background-size