728x90
반응형
CSS의 배경
1) background-color
HTML요소의 배경색을 설정한다.
[문법]
선택자{ background-color: 색상값;}
[예시]
<style>
body { background-color: rgb(160, 231, 255);}
div {
background-color: white;
}
</style><body>
<h2>CSS 배경 - 1</h2>
<div>
<h2>배경 적용하기</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Inventore repellendus eum facere rerum ex in eaque ad magni nemo atque.
Necessitatibus totam excepturi vitae facere dignissimos praesentium
molestiae porro soluta!</p>
</div>
</body>
[결과]
2) backgroung-image
HTML요소의 배경으로 나타날 배경 이미지를 설정하며,
배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타난다.
[문법]
선택자 {background-image: url(배경이미지 위치);}
[예시]
<style>
body {
background-image: url(./ruffy2.png);
{
</style><body>
<h2>CSS 배경 - 2</h2>
</body>
[결과]
3) background-repeat
배경 이미지를 수평이나 수직 방향으로 반복하도록 설정한다.
| repeat | 기본(바둑판) |
| repeat-x | 수평으로 |
| repeat-y | 수직으로 |
| no-repeat | 반복안함 |
[문법]
선택자{background-repeat: 반복방법;}
[예시]
<style>
p{
width: 1000px;
height: 600px;
border: 3px dotted deepskyblue;
}
.basic{
background-image: url(./ruffy2.png);
background-repeat: repeat;
}
.x{
background-image: url(./ruffy2.png);
background-repeat: repeat-x;
}
.y{
background-image: url(./ruffy2.png);
background-repeat: repeat-y;
}
.no{
background-image: url(./ruffy2.png);
background-repeat: no-repeat;
}
</style><body>
<h2>폰트 설정</h2>
<p class="basic">기본</p>
<p class="x">수평으로</p>
<p class="y">수직으로</p>
<p class="no">반복없음</p>
</body>
[결과]
4)background-position
- 반복되지 않는 배경 이미지의 상대 위치를 설정한다.
- %나 px을 사용하여 상대위치를 직접 설정할 수 있다.
- 상대위치를 결정하는 기준은 해당 요소의 왼쪽 상단이다.
[문법]
선택자{background-position: 위치;}
[위치 종류]
| left top(기본값) | center top | right top |
| left center | center | right center |
| left bottom | center bottom | right bottom |
이 외에, 위치값으로도 설정이 가능하다.
[문법]
선택자{background-position: 가로위치값 세로위치값;}
[예시]
<style>
div {
width: 60%;
height: 300px;
border: 3px dotted deepskyblue;
}
#bg1 {
background-image: url(./ruffy2.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#bg2 {
background-image: url(./ruffy2.png);
background-repeat: no-repeat;
background-position: center;
}
#bg3 {
background-image: url(./ruffy2.png);
background-repeat: no-repeat;
background-position: 10% 100px;
}
</style><body>
<h2>CSS 배경 - 3</h2>
<div id="bg1">우측 하단</div>
<div id="bg2">센터</div>
<div id="bg3">위치값으로 설정</div>
</body>
[결과]
5)background-attachment
위치가 설정된 배경 이미지를 원하는 위치에 고정 시킬 수 있다
고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않는다.
[문법]
선택자{background-attachment: fixed;}
[예시]
<style>
body {
background-image: url(./ruffy2.png);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
</style>
body에는 스크롤이 생기게 <p>태그로 의미없는 문장을 무한 복붙 했습니다.
[결과]
6) background
배경 속성을 한번에 적용할 수 있다.
[예시]
각 각 적용 했을 때
<style>
body {
background-color: deepskyblue;
background-image: url(./ruffy2.png);
background-repeat:no-repeat;
background-position:right bottom fixed;
}
</style>
한번에 적용 했을 때
<style>
body {
background: deepskyblue url(./ruffy2.png) no-repeat right bottom fixed;
}
</style>
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
728x90
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 10 둥근 테두리 만들기(border-radius) (0) | 2021.05.03 |
|---|---|
| 09 박스모델(BOX MODEL)과 박스 사이징 (0) | 2021.05.03 |
| 07 CSS 글자 크기 및 폰트 설정 (0) | 2021.04.27 |
| 06 CSS의 텍스트 다루기 (0) | 2021.04.27 |
댓글