HTML 배경

좋은 배경은 사이트가 특히 멋지게 보입니다.

예제

어울리는 배경과 색상
배경색과 글자색이 잘 어울리는 예제는 페이지에서 글자를 쉽게 읽을 수 있습니다.
불어울리는 배경과 색상
배경색과 글자색이 잘 어울리지 않는 예제는 페이지에서 글자를 읽기 어려워집니다.

（이 페이지 하단에서 더 많은 예제를 찾을 수 있습니다.。）

배경 (Backgrounds)

<body> 배경을 설정하는 두 가지 태그를 가지고 있습니다. 배경은 색상이나 이미지일 수 있습니다.

배경색 (Bgcolor)

배경색 속성은 배경을 특정 색상으로 설정합니다. 속성 값은 16진수, RGB 값 또는 색상 이름이 될 수 있습니다.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

위의 코드는 모두 배경색을 검은색으로 설정합니다.

배경(Background)

배경 속성은 배경을 이미지로 설정합니다. 속성 값은 이미지의 URL입니다. 이미지가 브라우저 창 크기보다 작다면, 이미지는 브라우저 창 전체에 복사됩니다.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

URL은 상대 경로로, 예를 들어 첫 번째 코드 행과 같이 설정할 수 있습니다. 또한 절대 경로로 설정할 수 있습니다. 예를 들어 두 번째 코드 행과 같이 설정할 수 있습니다.

팁:배경 이미지를 사용할 계획이라면 다음 몇 가지를 기억해야 합니다:

  • 배경 이미지가 페이지의 로드 시간을 늘리나요. 팁: 이미지 파일은 10k를 초과하지 않아야 합니다.
  • 배경 이미지가 페이지의 다른 이미지와 잘 어울리나요.
  • 배경 이미지가 페이지의 텍스트 색상과 잘 어울리나요.
  • 이미지가 페이지에 평평하게 패턴링된 후에는 어떻게 보이나요?
  • 배경 이미지가 텍스트에 주의를 끌게 되었나요?

기본적인 고려 사항 - 유용한 팁:

<body> 태그에서 배경색(bgc color)、배경(background) 및 텍스트(text) 속성은 최신 HTML 표준(HTML4 및 XHTML)에서 폐지되었습니다. W3C는 그들의 권고 표준에서 이러한 속성을 제거했습니다.

HTML 요소의 레이아웃 및 표시 속성을 정의하는 데 캔버스 스타일 시트(CSS)를 사용해야 합니다.

더 많은 예제

사용성이 높은 배경 이미지
배경 이미지와 텍스트 색상이 페이지 텍스트를 쉽게 읽을 수 있는 예제.
사용성이 높은 배경 이미지 2
배경 이미지와 텍스트 색상이 페이지 텍스트를 쉽게 읽을 수 있는 예제.
사용성이 떨어지는 배경 이미지
배경 이미지와 텍스트 색상이 페이지 텍스트를 읽기 어려운 예제.