새 스타일 및 스타일 수정 대화 상자, 배경

  • 아티클

 

게시: 2016년 4월

새 스타일 및 스타일 수정 대화 상자의 배경 범주를 사용하면 웹 페이지 또는 개별 요소의 배경에 대해 CSS 스타일 규칙을 정의할 수 있습니다.  이러한 스타일 규칙을 HTML 요소에 적용하거나 현재 페이지 또는 외부 스타일시트에 추가할 수 있습니다.  

현재 페이지의 UI 요소에 대해 CSS 배경 스타일 규칙을 정의하려면

  1. 페이지를 디자인 뷰 또는 소스 뷰에서 엽니다.

  2. 스타일을 적용할 텍스트 또는 HTML 요소를 선택할 수도 있습니다.

  3. 서식 메뉴에서 새 스타일을 클릭합니다.

    새 스타일 대화 상자가 표시됩니다.

  4. 범주 창에서 배경을 선택합니다.

    선택한 배경 스타일 항목이 오른쪽 창에 표시됩니다.

디자인 뷰에서 선택한 텍스트에 스타일을 적용하면 스타일 특성이 페이지에 대한 HTML 태그에 인라인으로 삽입됩니다.  새 스타일 특성을 검토하려면 소스 뷰로 전환합니다.  

외부 스타일시트에 정의된 CSS 스타일 규칙에 배경 특성을 추가하려면

  1. 기존 외부 스타일시트를 엽니다.

  2. 수정할 스타일 규칙의 중괄호 안에 커서를 놓습니다.

  3. 다음 작업 중 하나를 수행합니다.

    • 편집기에서 스타일시트를 마우스 오른쪽 단추로 클릭한 다음 바로 가기 메뉴에서 스타일 작성을 선택합니다.

    • 스타일시트 도구 모음에서 스타일 작성을 선택합니다.

    스타일 수정 대화 상자가 표시됩니다.

  4. 왼쪽 창에서 배경을 클릭합니다.

    선택한 배경 스타일 항목이 오른쪽 창에 표시됩니다.

요소의 class 속성을 클래스 선택기의 이름으로 설정하여 CSS 스타일 클래스를 웹 페이지의 요소 또는 body 요소 자체에 적용할 수 있습니다.

UI 요소 목록

다음 표에는 새 스타일 및 스타일 수정 대화 상자의 배경 범주 아래에서 사용할 수 있는 옵션이 나열되어 있습니다.

배경 옵션

  • background-color
    HTML 요소의 배경색입니다.  다른 색에서 선택하려면 아래 화살표를 사용하거나 오른쪽의 사각형 아이콘을 클릭합니다.  자세한 내용은 다른 색 및 색 대화 상자를 참조하십시오.  

  • background-image
    웹 페이지 배경에 사용할 이미지입니다.  이미지는 미리 프로젝트 파일에 추가해 두어야 합니다.  배경 이미지는 항상 렌더링할 수 없지만 배경색을 설정하는 것도 좋습니다.  

  • background-repeat
    배경 이미지를 반복하는 방식입니다.  값은 다음과 같습니다.  

    • no-repeat   이미지가 반복되지 않습니다.

    • repeat   이미지가 세로 및 가로로 반복됩니다.

    • repeat-x   이미지가 가로로 반복됩니다.

    • repeat-y   이미지가 세로로 반복됩니다.

    • inherit   background-repeat 스타일이 부모 요소로부터 상속됩니다.

  • background-attachment
    배경 이미지가 고정되는지 아니면 웹 페이지의 나머지 부분과 함께 스크롤되는지 여부입니다.  값은 다음과 같습니다.  

    • fixed   이미지가 고정되며 스크롤되지 않습니다.

    • scroll   이미지가 웹 페이지의 나머지 부분과 함께 스크롤됩니다.

    • inherit   background- attachment 스타일이 부모 요소로부터 상속됩니다.

  • (x) background-position
    배경 이미지의 가로 위치 지정입니다.  값을 지정하면 목록에서 단위를 선택할 수 있습니다.  

  • (x) background-position
    배경 이미지의 세로 위치 지정입니다.  값을 지정하면 목록에서 단위를 선택할 수 있습니다.  

기타 UI 요소

  • 선택기
    (새 스타일 대화 상자에서만) 스타일을 적용할 클래스 이름을 입력하거나 HTML 요소를 클릭할 수 있습니다.  클래스 이름은 마침표(.)로 시작해야 합니다.  **(인라인 스타일)**을 선택하면 선택된 텍스트 또는 HTML 요소에 스타일이 인라인으로 적용됩니다.  

  • 정의 위치
    (새 스타일 대화 상자에서만) 스타일 규칙의 정의를 쓸 위치를 지정할 수 있습니다.  값은 다음과 같습니다.  

    • 현재 페이지   스타일 규칙을 현재 페이지의 style 요소에 씁니다.

    • 새 스타일시트   새 CSS 스타일시트를 프로젝트에 추가하고 규칙을 여기에 씁니다.

    • 기존 스타일시트   스타일 규칙을 URL 목록을 사용하여 지정한 CSS 스타일시트에 추가합니다.

  • URL
    (새 스타일 대화 상자에서만) 기존 CSS 스타일시트를 선택할 수 있습니다.  이 옵션은 정의 위치가 기존 스타일시트로 설정된 경우에만 사용할 수 있습니다.  

  • 선택한 문서 영역에 새 스타일 적용
    (새 스타일 대화 상자에서만) 선택한 텍스트, 클래스 또는 HTML 요소에 스타일을 적용하도록 지정합니다.

  • 미리 보기
    스타일 규칙을 적용할 경우 어떻게 표시되는지를 예제를 통해 보여 줍니다.

  • 설명
    스타일 규칙의 CSS 정의를 표시합니다.

참고 항목

Working with CSS Overview