background 속성

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

background 속성 본문

Front-End (웹)/CSS

background 속성

친절한개발초보자 2021. 7. 26. 21:46

728x90

배경색을 지정하는 background-color 속성

16진수나 rbg값 또는 색상 이름을 사용해서 지정

background-color: #008000;
background-color: rgb(0,128,0);
background-color: green;

글꼴이나 글자 크기 등은 <body> 태그 선택자에서 지정하면 문서 전체에 상속된다. 하지만 background-color 값은 상속되지 않는다.
(기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아니다.)

배경색의 적용 범위를 조절하는 background-clip 속성

배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다.

종류	설명
border-box	박스 모델의 가장 외곽인 테두리까지 적용한다. (기본값)
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
content-box	박스 모델에서 내용(콘텐츠) 부분에만 적용한다.

웹 요소에 배경 이미지를 넣는 background-image 속성

url( )에 이미지 파일 경로를 넣어서 사용한다.

background-image: url('이미지 파일 경로')

파일 경로는 현대 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.
배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.

배경 이미지의 반복 방법을 지정하는 background-repeat 속성

배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있다.

종류	설명
repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다. (기본값)
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다.
repeat-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다.
no-repeat	한 번만 표시하고 반복하지 않는다.

배경 이미지의 위치를 조절하는 background-position 속성

배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.

background-position: <수평 위치> <수직 위치>;

수평 위치: left ¦ center ¦ right ¦ <백분율> ¦ <길이 값>
수직 위치: top ¦ center ¦ bottom ¦ <백분율> ¦ <길이 값>

속성 값을 하나만 지정하면 웹 브라우저에서는 지정한 값을 수평 위칫값으로 간주하고, 수직 위치 값은 50%나 center로 간주한다.
배경 이미지의 위치를 지정하는 3가지 방법
- 키워드
▷ 가장 많이 사용한 속성값
▷ 수평 위치는 left, center, right 중에서 선택할 수 있고 수직 위치는 top, bottom, center 중에서 선택한다.
- 백분율 (%)
▷ 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 의미이다.
- 크기
▷ 길이로 직접 지정한다.

배경 이미지의 적용 범위를 조절하는 background-origin 속성

박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있다.

종류	설명
content-box	박스 모델에서 내용 부분에만 배경 이미지를 표시한다. (기본값)
padding-box	박스 모델에서 패딩까지 배경 이미지를 표시한다.
border-box	박스 모델에서 테두리까지 배경 이미지를 표시한다.

배경 이미지를 고정하는 background-attachment 속성

배경 이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다.

종류	설명
scroll	화면을 스크롤하면 배경 이미지도 스크롤된다. (기본값)
fixed	화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다.

background 속성 하나로 배경 이미지 제어하기

body{
	background-image: url('images/bg4.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-attachment: fixed;
}

background: url('images/bg4.png') no-repeat center bottom fixed;

배경 이미지 크기를 조절하는 background-size 속성

배경 이미지의 크기를 조절할 수 있다.
속성 값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.

종류	설명
auto	원래 배경 이미지 크기만큼 표시합니다. (기본값)
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소한다.
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다.
<크기>	이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산한다.
<백분율>	배경 이미지가 들어가 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대/축소합니다.

기타

background-image와 <image> 태그의 차이점
1. img태그는 html태그, background-image는 css속성
- css속성은 html태그를 꾸며주는 속성
(html태그가 없으면 사용할 수 없다.)
2. css속성이기 때문에 할 수 있는 게 있다.
- img태그는 그 하나로 완성되어 있는 형태이기 때문에 css효과를 줄 수가 없다. 하지만 직접 타이핑한 글자는 css 효과를 줄 수가 있기 때문에 다양한 연출이 가능하며, background-image는 배경이기 때문에 글자와 함께 사용이 가능하다.
3. background-image는 css속성이다.
- hover 구문과 같은 조건 동작 구문과 함께 사용해서 다양한 연출이 가능하다.
- <img> 태그는 html태그이기 때문에 hover구문에 들어갈 수 없다.
4. <img> 태그는 크기를 조절해주면 이미지가 왜곡이 되는 한이 있더라도 이미지 전체는 다 보인다.
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>background #1</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:1200px;height:607px;
            background-image:url("img/1.jpg");
            color:white;text-align:center;
            line-height:607px;font-size:50px;
            background-repeat:no-repeat;
            background-size:1200px 607px;}
        img{width:1200px;}

        #a:hover{background-image:url(img/2.jpg);}
    </style>
</head>
<body>
    <div id="a">사자그림 입니다.</div>
    <img src="img/1.jpg" alt="">
</body>
</html>
```
background-image 단점
: background-image는 태그의 길이를 사진의 원본 크기보다 키워주면 이미지가 반복되는 현상이 있다.
(반대로 작으면 이미지가 잘리는 현상이 있다)
background-image 특징
1. background-repeat:no-repeat
: background-image는 이미지가 반복되는 현상이 기본값으로 잡혀있는데 해당 구문을 넣어주면 이미지 반복을 없애줄 수 있다. (대신 길이가 그만큼 텅 비어버릴 수 있다)
2. background-size
: background-image전용 사이즈를 조절해주는 css구문
- 사용방법
{background-size:가로 값 세로 값;}
- 활용
: 100% 이미지의 비율을 유지하면서 잘리는 한이 있더라도 내가 선택한 태그에 딱 공간을 차지하는 크기로 바꿔주고 싶을 때
3. background-position
: background-image를 태그 안에서 움직이게 해주는 구문
- 사용방법
{background-position:가로 값 세로 값;}
- 특징
(1) 가로 값에 -를 주면 왼쪽으로 이미지가 이동 / +를 주면 오른쪽으로 이동
(2) 세로 값에 -를 주면 위로 이동 / +를 주면 아래로 이동
→ 포토샵 클리핑 마스크랑 똑같은 역할을 한다.
```
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>background #2</title>
    <style>
        *{margin:0;padding:0;}
        #a{width:500px;height:607px;
            background-image:url(img/1.jpg);
            background-position:-400px 0px;}
        
        img{width:300px;height:800px;}
    </style>
</head>
<body>
    <div id="a"></div>
    <img src="img/1.jpg">
</body>
</html>
```
```
  
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>background #3</title>
    <style>
        *{margin:0;padding:0;}
        
        #a{width:1800px;height:500px;
            /*background-image:url(img/3.jpg);*/
            background:url("img/3.jpg") fixed;
            margin:0 auto;
            margin-top:500px;
            /*background-attachment:fixed*/}
        
        #scroll{height:4000px;}
    </style>
</head>
<body>
    <div id="a"></div>
    
    <div id="scroll"></div>
</body>
</html>
```

728x90

저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

여백 계산법 (0)	2021.07.28
float 속성 (0)	2021.07.28
중앙정렬 (0)	2021.07.23
박스 모델과 CSS 속성 (0)	2021.07.22
display 속성 (0)	2021.07.21

'Front-End (웹)/CSS' Related Articles

Comments

EverGiver

background 속성 본문

background 속성

'Front-End (웹) > CSS' 카테고리의 다른 글

티스토리툴바