728x90
반응형
- 배경 배경색 : background-color
- 배경 이미지 : background-image
- 배경 반복 : background-repeat
- 배경 위치 : background-position
- 배경 약식 속성 : background(color image repeat attachment position 순서대로..)
<배경 이미지, 반복 위치 코드 예시>
<style>
body {
/* background-color: orange; */
/* 이미지는 전체 요소(body)를 덮도록 자동으로 가로/세로 반복하고 있다. */
/* 배경색 : 주황 => 배경색은 적용되어져 있고, 그 위에 이미지를 덮고 있다. */
/* (주의) 텍스트의 색상에 방해되지 않도록 배경 이미지를 사용한다. */
background-image: url("https://item.kakaocdn.net/do/c620e34ce78db64b44ff1e422a35e2787154249a3890514a43687a85e6b6cc82");
/* background-repeat : 배경 반복을 주는 속성 */ /* ex02의 3번 */
/* background-repeat: repeat;*/ /* 안주면 기본값 */
/* background-repeat: repeat-x; */ /* y축을 반복 */
/* background-repeat: repeat-y; */ /* x축을 반복 */
background-repeat: no-repeat; /* 반복 안하겠다. */
/* 스크롤을 내리면 배경도 같이 올라가짐 */ /* ex02의 4번 */
/* background-attachment: scroll; */ /* 기본값 */
background-attachment: fixed; /* 스크롤 내려도 배경 고정됨 */
/* 우측 상단에 위치하게 됨 */
/* %와 px을 줘도 됨 */
background-position: right top;
}
#top {
/* css 테두리 약식 */
/* border: 1px solid gray; */
border-width: 1px;
border-style: solid;
border-color: gray;
width: 25px;
height: 25px;
/* ***** 위치를 나타내는 속성 left, top, right, bottom **** */
position: fixed; /* 고정 시킬거다 */
right: 5px; /* 우측으로 5px 위치에 */
bottom: 5px; /* 아래쪽 5px 위치에 */
}
#top:hover {
background-color: black;
color: yellow;
font-weight: bold;
cursor: pointer; /* 커서 모양을 손가락 모양으로.. */
}
</style>
<body>
<div id="top" onclick="top_click();">Top</div>
<h3>css 배경 이미지</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae aperiam
ratione aspernatur iste maxime rerum illum sint optio labore iusto ut et.
Ratione laboriosam enim eos nostrum minima rerum asperiores.
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<script>
function top_click() {
// alert("이벤트 발생 확인");
// 아래 2가지 코딩은 동일한 코딩(맨위로 올리겠다.)
// 브라우저 마다 적용되는 방식이 달라서 중복 코딩을 한다.
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0; // 크롬에서 적용되는 함수
}
</script>
</body>
<다중 배경 설정>
다중 배경 설정시 사용되는 속성
1. background-size
2. background-origin
3. background-clip
[코드]
[결과]
728x90
반응형
'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
| [SIST] Web_CSS_days02_CSS margin(여백), padding(안쪽 여백) & width 속성 (0) | 2022.05.22 |
|---|---|
| [SIST] Web_CSS_days02_CSS 테두리(border) (0) | 2022.05.22 |
| [SIST] Web_CSS_days02_CSS 색상 지정 (0) | 2022.05.22 |
| [SIST] Web_CSS_days01 (0) | 2022.05.20 |
| [SIST] Web_HTML_days06_미디어 처리(video, audio, youtube 동영상 처리) (0) | 2022.05.19 |