강의 일정

CSS 고급 강의

• CSS课外서
• CSS 개요
• CSS 기본 문법
• CSS 고급 문법
• CSS 파생 선택자
• CSS id 선택자
• CSS 클래스 선택자
• CSS 생성
• CSS 배경
• CSS 텍스트
• CSS 글꼴
• CSS 목록

CSS 레이아웃 모델

• CSS 레이아웃 개요
• CSS 내간격
• CSS 테두리
• CSS 외간격
• CSS 외간격 결합

CSS 정위치

• CSS 정위치 개요
• CSS 상대 정위치
• CSS 절대 정위치
• CSS 블로킹

CSS 선택자

• CSS 요소 선택자
• CSS 선택자 그룹
• CSS 클래스 선택자 자세히
• CSS ID 선택자 자세히
• CSS 속성 선택자 자세히
• CSS 자손 선택자
• CSS 자식 요소 선택자
• CSS 인접 형제 선택자

선택 과목

강의 추천:

• CodeW3C.com 백화관

CSS는 단색 배경을 적용할 수 있으며, 배경 이미지를 사용하여 상당히 복잡한 효과를 만들 수 있습니다.

CSS는 이 분야에서 HTML보다 훨씬 더 강력합니다.

배경색

사용할 수 있습니다 background-color 속성요소에 배경색을 설정합니다. 이 속성은 모든 유효한 색상 값을 받아들입니다.

이 규칙은 요소의 배경을 회색으로 설정합니다:

p {background-color: gray;}

배경색이 요소의 텍스트에서 밖으로 약간 퍼지는 것을 원한다면, 일부 내간격을 늘려야 합니다:

p {background-color: gray; padding: 20px;}

직접 테스트해 보세요

모든 요소에 배경색을 설정할 수 있습니다. 이는 body부터 em과 a와 같은 인라인 요소에 이릅니다.

background-color는 상속되지 않으며 기본 값은 transparent입니다. transparent는 '투명'이라는 뜻입니다. 즉, 요소에 배경색이 지정되지 않았다면 배경은 투명이며, 이렇게 하면 부모 요소의 배경이 보이게 됩니다.

배경 이미지

이미지를 배경에 넣으려면 사용해야 합니다 background-image 속성background-image 속성의 기본 값은 none입니다. 이는 배경에 어떤 이미지도 배치하지 않음을 의미합니다.

배경 이미지를 설정하려면 이 속성에 URL 값을 설정해야 합니다：

body {background-image: url(/i/eg_bg_04.gif);}

대부분의 배경은 body 요소에 적용되지만, 이에 국한되지 않습니다.

아래의 예제는 문서의 다른 부분에 배경을 적용하지 않고 단락에 배경을 적용한 것입니다：

p.flower {background-image: url(/i/eg_bg_03.gif);}

내부 요소에 배경 이미지를 설정할 수도 있습니다. 아래의 예제는 링크에 배경 이미지를 설정한 것입니다：

a.radio {background-image: url(/i/eg_bg_07.gif);}

직접 테스트해 보세요

이론적으로는 textareas와 select와 같은 대체 요소의 배경에 이미지를 적용할 수 있지만, 모든 사용자代理가 이러한 상황을 잘 처리하지는 않습니다.

또한 추가로 설명하자면, background-image는 상속되지 않습니다. 사실, 모든 배경 속성은 상속되지 않습니다.

배경 반복

페이지에서 배경 이미지를 텐트워킹하려면 사용할 수 있습니다 background-repeat 속성。

속성 값 repeat은 이미지가 수평 및 수직 방향 모두 텐트워킹하는 것처럼 전통적인 배경 이미지의 일반적인 방법처럼 합니다. repeat-x와 repeat-y는 이미지가 수평 또는 수직 방향에서만 반복되며, no-repeat은 이미지가 어떤 방향으로도 텐트워킹하지 않도록 합니다.

기본적으로, 배경 이미지는 요소의 왼쪽 상단에서 시작됩니다. 아래의 예제를 참조하십시오：

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

직접 테스트해 보세요

배경 정위치

사용할 수 있습니다 background-position 속성이미지가 배경 내에서의 위치를 변경합니다。

아래의 예제에서 body 요소에 배경 이미지를 중앙에 배치합니다：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

background-position 속성에 값을 제공하는 방법이 많습니다. 먼저, top, bottom, left, right, center와 같은 키워드를 사용할 수 있습니다. 일반적으로 이러한 키워드는 짝으로 등장하지만, 항상 그렇지 않습니다. 또한, 100px나 5cm와 같은 길이 값을 사용할 수 있으며, 마지막으로 퍼센트 값을 사용할 수도 있습니다. 다양한 유형의 값은 배경 이미지의 배치에 약간의 차이를 가져옵니다.

키워드

이미지 배치 키워드는 가장 이해하기 쉽습니다. 그 역할은 이름에서 명확하게 나타납니다. 예를 들어, top right은 이미지가 요소의 내 경계 영역의 오른쪽 상단에 배치됩니다.

규격에 따르면, 위치 키워드는 언제든지 나타날 수 있지만, 두 키워드(한 키워드는 수평 방향, 다른 키워드는 수직 방향)를 초과하지 않도록 해야 합니다.

만약 하나의 키워드만 나타나면, 다른 키워드는 center로 간주됩니다.

따라서, 각 문단의 중앙 상단에 이미지가 나타나기를 원하면 다음과 같이 선언하면 됩니다:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

아래는 동일한 위치 키워드입니다:

퍼센트 값

퍼센트 값의 표현 방식은 더 복잡합니다. 이미지를 요소 내에서 중앙에 배치하려고 하면, 퍼센트 값을 사용하여 쉽게 할 수 있습니다:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

이는 이미지가 적절히 배치되고, 그 중심이 요소의 중심과 맞축되도록 합니다.다시 말해, 퍼센트 값은 요소와 이미지에 동시에 적용됩니다.그래서, 이미지에서 50% 50%로 설명된 점(중심점)과 요소에서 50% 50%로 설명된 점(중심점)이 맞축됩니다.

이미지가 0% 0%에 위치하면, 그 왼쪽 상단이 요소의 내 경계 영역의 왼쪽 상단에 배치됩니다. 이미지 위치가 100% 100%면, 이미지의 오른쪽 하단이右边距의 오른쪽 하단에 배치됩니다.

따라서, 수평 방향 2/3, 수직 방향 1/3에 이미지를 배치하려면 다음과 같이 선언할 수 있습니다:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

만약 한 개의 퍼센트 값을 제공하면, 제공된 값은 수평 값으로 사용되고, 수직 값은 50%로 가정됩니다. 이는 키워드와 유사합니다.

background-position의 기본 값은 0% 0%입니다. 기능적으로 top left과 같습니다. 이것이 배경 이미지가 항상 요소의 내 경계 영역의 왼쪽 상단에서 패턴링되는 이유입니다. 다른 위치 값을 설정하지 않는 한.

길이 값

길이 값은 요소의 내边距 상단 왼쪽에서의 오프셋을 설명합니다. 오프셋点是 이미지의 왼쪽 상단입니다.

예를 들어, 값이 50px 100px로 설정되면 이미지의 왼쪽 상단은 요소의 내边距 상단 왼쪽에서 50픽셀 오른쪽, 100픽셀 아래에 위치합니다:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

이点是 백그라운드 위치 값과 다른 점을 주의하세요. 왜냐하면 오프셋은 왼쪽 상단에서 다른 왼쪽 상단으로만 이동합니다. 즉, 이미지의 왼쪽 상단이 백그라운드 위치 선언에서 지정된 점과 일치합니다.

배경 연결

문서가 매우 길 경우, 문서가 아래로 스크롤될 때 배경 이미지도 함께 스크롤됩니다. 문서가 이미지 위치를 넘어가면 이미지가 사라집니다.

다음과 같이 사용할 수 있습니다: background-attachment 속성이러한 스크롤을 방지합니다. 이 속성을 통해 이미지가可视区内에 고정(fixed)되어 스크롤에 영향을 받지 않습니다:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

직접 테스트해 보세요

background-attachment 속성의 기본 값은 scroll입니다. 즉, 기본적으로 배경은 문서와 함께 스크롤됩니다.

CSS 배경 속성

도구함

CSS 참조 매뉴얼

CSS 예제

CSS 평가

CSS 강의

스폰서 링크