Frontend/CSS

11. background

예린lynn 2024. 7. 5. 22:10
728x90

 

  1. 배경색
  2. 배경 이미지

 

1. 배경색

배경색 지정 (background-color)

  • 16진수, rgb, 색상 이름 등을 사용해서 지정
  • 하위 요소에 상속x

 

적용 범위 (background-clip)

  • border-box: 기본값. 테두리까지 적용
  • padding-box: 테두리를 뺀 패딩 범위까지 적용
  • content-box: 내용(content) 부분에만 적용

- 활용 코드

    <style>
      div {
        box-sizing: border-box;
        width: 100%;
        margin: 20px 0px;
        padding: 20px;
        border: 10px dotted #dadada;
        background-color: #eeeeee;
      }
      .a {
        background-clip: border-box;
      }
      .b {
        background-clip: padding-box;
      }
      .c {
        background-clip: content-box;
      }
    </style>

  <body>
    <p><code>background-clip: border-box;</code></p>
    <div class="a">border-box</div>
    <p><code>background-clip: padding-box;</code></p>
    <div class="b">padding-box</div>
    <p><code>background-clip: content-box;</code></p>
    <div class="c">content-box</div>
  </body>

 

- 실행 결과

background-clip: border-box;

border-box

background-clip: padding-box;

padding-box

background-clip: content-box;

content-box

 

 

 

2. 배경 이미지

이미지 삽입 (background-image)

  • 파일 경로에 작은따옴표(' ')나 큰따옴표(" ") 사용
  • 요소보다 이미지 크기가 작으면, 이미지가 가로와 세로로 반복되며 배경을 가득 채운다.
background-image: url('이미지 파일 경로')

 

 

이미지 반복 (background-repeat)

  • repeat: 기본값. 화면에 가득 찰 때까지 가로와 세로로 반복
  • repeat-x: 화면 너비에 가득 찰 때까지 가로로 반복
  • repeat-y: 화면 높이에 가득 찰 때까지 세로로 반복
  • no-repeat: 한 번만 표시하고 반복x

 

이미지 위치 (background-position)

  • 속성값 1개: 지정한 값을 수평 위칫값으로 간주하고, 수직 위치값은 50%나 center로 간주
  • 속성값 2개: 첫 번째 값은 수평 위치의 값, 두 번째 값은 수직 위치의 값
background-position: <수평 위치> <수직 위치>
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>

 

 

이미지 적용 범위 (background-origin)

  • content-box: 기본값. 내용(content) 부분에만 배경 이미지 표시
  • border-box: 테두리까지 배경 이미지 표시
  • padding-box: 패딩 범위까지 배경 이미지 표시

 

이미지 고정 (background-attachment)

  • 스크롤을 했을 때 이미지 위치도 같이 바뀌는지를 결정한다.
  • scroll: 기본값. 화면을 스크롤하면 배경 이미지도 이동한다.
  • fixed: 화면을 스크롤하면 배경 이미지는 고정되고 내용만 이동한다.

 

- 활용 코드

        /* background: color, image, repeat, position */
        background: yellowgreen url(/html/img/dessert.jpg) no-repeat right 20px top 50px;

        background-attachment: scroll;
  •  

 

이미지 크기 (background-size)

  • 속성값 1개: 지정한 값을 너비로 인식하고, 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산
  • auto: 기본값. 원래 배경 이미지 크기만큼 표시
  • contatin: 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소
  • cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소
728x90