CSS 실제 예제(권장)_CSS/HTML

배경 배경 배경색 설정

<style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> <h1>헤더 1입니다</h1> <h2>헤더 2입니다</h2> <p>이것은 단락입니다</p>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

사진 한 장을 배경으로 설정

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]

세로로 반복 배경 이미지

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

가로 반복 배경 이미지

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x } </style>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

배경 이미지 배치 방법( 위치 배치)

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: no-repeat; background-position: center; } </style>
[모두 선택하려면 Ctrl+A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

背景不滚动

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p> <p>이미지가 페이지의 나머지 부분과 함께 스크롤되지 않습니다</p>
[ctrl+a 全选 注 注 : ] 背景属性一行解决 背景属性一行解决 (用一行文字결정义背景属性)

이것은 텍스트입니다<style type="text/css"> body { background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; } </style> 이것은 텍스트입니다 <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p>이것은 텍스트입니다</p> <p> </p> <p></p> [Ctrl+A 전체选注:
如需引入외부Js需刷新才能执行]