CSS background   CSS 배경

(2023-12-31)

background , background-color, background-image, background-repeat, background-position


1. CSS 속성 : 배경 (Background)

  ㅇ 배경 관련 속성들 : 색상,이미지 지정,반복 여부,고정 여부,위치,크기 등 

  ㅇ 단축형 지정 例)  { background : #ffbc53 url(test.gif) no-repeat fixed left top }
     - 속성 순서 : 통상, color,image,repeat,attachement,position


2. 배경 속성 구분

  ㅇ background-color  : 배경색

  ㅇ background-image  : 배경 이미지 지정
     - 보이는 위치 : 배경색이 주어지면 그 위에 나타남
     - 이미지 포멧 : PNG, JPEG, GIF
     - 형식 : url(이미지 파일이 있는 url 주소)
        . 例) body { background-image: url(/img/pattern.gif); }

     * 이미지 크기가 작으면 기본적으로 반복됨

     - 만일, 배경 이미지로 gradient를 지정 적용하려면,
        . linear-gradient(각도/방향, 칼러1 폭/위치, 칼라2 폭/위치,...)
        . radial-gradient()
        . repeating-linear-gradient()
        . repeating-radial-gradient

  ㅇ background-repeat : 배경 이미지 반복 형태 지정
     - 웹브라우저 화면이 커지면 기본적으로 반복됨 (마치 타일 처럼 보임, 좌->우,상->하)
        . repeat : (기본값) 가로세로 반복 배치
        . no-repeat : 반복 금지 (배경 이미지가 1회 만 좌측상단에 나타남)
        . repeat-x : 수평 반복 만
        . repeat-y : 수직 반복 만
        . space : 반복 이미지가 잘리지 않도록, 이미지 사이가 벌어짐
        . round : 반복 이미지가 잘리지 않도록, 이미지가 납작하게 찌그러짐

  ㅇ background-attachment : 요소와 함께 스크롤 또는 고정 여부 (scroll, fixed)

  ㅇ background-position : 배경 이미지 시작 위치를 기본 위치(좌측상단)가 아닌 원하는 위치로 옮김
     - 형식 : { background-position : 수평위치 수직위치 }
        . 수평 위치 : left (기본값), right, center, px, % 등
        . 수직 위치 : top (기본값), bottom, center, px, % 등
     - 값 지정 방식
        . 키워드 지정 방식 
           .. left top (디폴트), left bottom, right top, right center, right bottom,
              center top, center center 등
        . 수치 지정 방식 
           .. 기준 : 좌측 상단으로부터 배경 이미지 좌상 모서리까지 (px 값 등)
           .. 단위 : px 또는 em 또는 %
     - 단, % 지정 방식의 경우
        . 배경 이미지의 % 지점을 상위 요소의 % 지점에 배치하라는 것임
        . 例) { background-position : 100% 100% } => { background-position : right bottom }

  ㅇ background-size : 배경 이미지 크기 조절
     - 형식 : { background-size : 가로크기값 세로크기값 }
     - 단위 : px 또는 %
     - 키워드 cover : 배경 이미지 너비를 웹브라우저 화면 가득하게 표시

  ※ [참고] ☞ w3schools.com (CSS Backgrounds)

색상,배경,그림자
   1. CSS 색상   2. CSS 배경   3. CSS 그림자  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"