TIL/CSS

Background

han1693516 2022. 7. 7. 18:16

background
     1. background-color
            - 배경색을 주고 싶을 때 사용
            - hex, rgb, rgba로 색상 표현

     2. background-image
            - 배경으로 이미지를 넣고 싶을 때 사용
            - url() : 괄호 안에 이미지 경로 작성
                  1. 상대 경로 입력
                  2. unsplash.com - 원하는 이미지 선택 - 
                      copy image address 복붙
             - ex) background-image : url(" 파일 경로")

      3. background-repeat
              - 배경 이미지의 반복 여부 결정
              - repeat(기본값) / no-repeat(이미지 반복 X)
              
       4. background-size
              - 배경 이미지 크기 조절
              - contain(요소 안에 이미지가 원래 비율로 전부 들어갈 수 있도록)
                cover(요소 안에 빈 공간이 남기지 않고 꽉 차도록) 
                auto 80% 등 사용자가 조절 가능
                

       5. background-position
              - 배경 이미지의 위치 조절
              - ex) background-position : 10px 30px; // 왼쪽에서 10px, 위에서 30px 안쪽으로 이동
                      - 주로 center center 사용

'TIL > CSS' 카테고리의 다른 글

animation  (0) 2022.07.13
transition  (0) 2022.07.13
Typography  (0) 2022.07.06
flexbox  (0) 2022.06.29
Position  (0) 2022.06.15