CSS background   CSS 배경

(2019-07-11)

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

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
웹 디자인 >   1. 웹 디자인
  2. 스타일 시트
[CSS]
CSS   1. CSS
  2. CSS 선택자
  3. CSS 속성
  4. CSS 속성값
  5. CSS 박스 모델
  6. block,inline 요소 유형
  7. CSS 색상
  8. CSS 배경
  9. CSS 위치
  10. CSS 정렬
  11. CSS 텍스트
  12. CSS 폰트
  13. CSS 리스트
  14. CSS @ 규칙
  15. CSS 그림자
  16. CSS 시간 변형
  17. CSS 2차원 변형

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); }
     * 이미지 크기가 작으면 기본적으로 반복됨

  ㅇ 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 : 배경 이미지 크기 조절
     - cover : 배경 이미지 너비를 웹브라우저 화면 가득하게 표시

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


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
            2.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
                  1. 웹 디자인
                  2. 스타일 시트
              1.   CSS
                1.   1. CSS
                    2. CSS 선택자
                    3. CSS 속성
                    4. CSS 속성값
                    5. CSS 박스 모델
                    6. block,inline 요소 유형
                    7. CSS 색상
                    8. CSS 배경
                    9. CSS 위치
                    10. CSS 정렬
                    11. CSS 텍스트
                    12. CSS 폰트
                    13. CSS 리스트
                    14. CSS @ 규칙
                    15. CSS 그림자
                    16. CSS 시간 변형
                    17. CSS 2차원 변형
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌