DAY 20. 배경 이미지 지정: background-image, background-repeat, background-position, background-origin, background-attachment, background

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			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	31

Tags more

Archives

Today

Total

관리 메뉴

개발 공부 기록하기

DAY 20. 배경 이미지 지정: background-image, background-repeat, background-position, background-origin, background-attachment, background 본문

프밍/CSS

DAY 20. 배경 이미지 지정: background-image, background-repeat, background-position, background-origin, background-attachment, background

태영(泰伶) 2022. 11. 19. 18:43

1. 웹 요소에 이미지 삽입: background-image

웹 요소에 배경 이미지로 넣을 파일의 경로를 url로 지정해주는 방법이다.

경로는 https://로 시작하는 절대 경로로도, 현재 웹 문서를 기준으로하는 상대 경로로도 작성할 수 있다.

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

이미지 파일은 *.jpg, *.gif, *.png 파일을 사용한다.

^{(*.확장자명 = 확장자를 가진 모든 파일을 지칭하는 기호)}

요소의 크기보다 이미지의 크기가 작으면 가로로도 세로로도 이미지가 반복되어 붙는다.

예제 1.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>배경 이미지</title>
		<style>
			body {
				background-image: url('images/bg1.jpg');
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

↓

2. 배경 이미지 반복 방법 지정: background-repeat

1번에서처럼 이미지를 가로로도 세로로도 반복할 수 있지만,

어떤 방향으로 반복할지 지정할 수도 있고, 반복 없이 한 번만 나타낼 수도 있다.

background-repeat: repeat | repeat-x | repeat-y | no-repeat ;

속성값	설명
repeat	default값. 브라우저 화면에 가득 찰 때까지 가로로도 세로로도 반복함. 1번에서의 예제 결과값과 같아서 아래에는 예시 안 만들었음.
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복함. 아래 예시 1번째.
repeat-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복함. 아래 예시 2번째.
no-repeat	이미지를 한 번만 표시하고 반복하지 않음. 아래 예시 3번째.

3. 배경 이미지 위치 조절: background-position

배경 이미지의 수평, 수직 위치를 지정할 수 있다.

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

수평 위치 or 수직 위치에 들어갈 속성값	설명	비고
(수평 위치에) left, center, right	배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값. 단어 뜻 그대로 왼쪽, 가운데, 오른쪽 정렬.	background-position: center center; → background-position: center;로 축약 가능.
(수직 위치에) top, center, bottom	배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값. 단어 뜻 그대로 위쪽, 가운데, 아래쪽 정렬.
백분율(%)	브라우저 화면의 왼쪽 모서리로부터 가로나 세로 방향으로 몇 % 떨어져 있는지 지정.
길이 값	브라우저 화면의 왼쪽 모서리로부터 가로나 세로 방향으로 몇 px, em, rem 떨어져 있는지 지정.

예제 2.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>불릿 바꾸기</title>
		<style>
			ul {
				list-style-type: none;				/* 불릿 없앰 */
				margin-left: -30px;				/* 왼쪽 여백 30px 줄임 */
			}
			li {
				background-image: url('images/book-icon.png');	/* 배경 이미지 삽입 */
				background-repeat: no-repeat;			/* 배경 이미지 반복 안 함 */
				background-position: left center;		/* 배경 이미지 위치 */
				padding-left: 50px;				/* 왼쪽 패딩(박스 모델) */
				line-height: 40px;				/* 줄간격 */
			}
		</style>
	</head>
	<body>
		<h1>이지스퍼블리싱</h1>
		<ul>
			<li>회사소개</li>
			<li>도서</li>
			<li>자료실</li>
			<li>질문답변</li>
			<li>동영상강의</li>
		</ul>
	</body>
</html>

↓

4. 배경 이미지 적용 범위 조절: background-origin

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

background-origin: content-box | padding-box | border-box ;

속성값	설명
content-box	default값. 박스 모델의 콘텐츠 영역까지 배경 이미지를 표시.
padding-box	박스 모델의 패딩 영역까지 배경 이미지를 표시.
border-box	박스 모델의 테두리까지 배경 이미지를 표시.

5. 배경 이미지 고정: background-attachment

스크롤 막대로 스크롤을 내리든지 말든지 배경 이미지를 고정하고 싶거나, 스크롤 되도록 놔둘 때 background-attachment 속성을 사용한다.

^{* attachment: 부착}

background-attachment: scroll | fixed ;

속성값	설명
scroll	default 값. 화면을 스크롤링하면 이미지도 같이 움직임.
fixed	화면을 스크롤링 하면 배경 이미지는 고정되고 내용만 움직임.

예제 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>배경 이미지</title>
         <style>
            body {
               background-image: url('images/bg2.png');		/* 문서 전체 배경 이미지 */
               background-repeat: no-repeat;			/* 배경 이미지 반복 안 함 */
               background-position: right top;			/* 배경 이미지를 오른쪽 상단에 위치 */
               background-attachment: fixed;			/* 배경 이미지 고정 */
            }
            div {
               width: 400px;
               height: 250px;
               padding: 20px;
               border: 20px solid rgba(204, 204, 204, 0.493);
               margin-bottom: 20px;
               overflow: auto;
               background-image: url('images/bg3.png');		/* 텍스트 상자의 배경 이미지 */
               background-repeat: no-repeat;			/* 배경 이미지를 반복 안 함 */
               background-position: right top;			/* 배경 이미지를 오른쪽 상단에 위치 */
            }
            #bg1 { background-origin: padding-box; }		/* 패딩까지 배경 이미지 표시 */
            #bg2 { background-origin: border-box; }		/* 테두리까지 배경 이미지 표시 */
            #bg3 { background-origin: content-box; }		/* 내용 영역에만 배경 이미지 표시 */
         </style>
      </head>
      <body>
         <div id="bg1">
            <h2>바빠 시리즈</h2>
            <h3>-바쁜 학생들을 위한 빠른 학습법</h3>
            <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 '손이 기억하는 훈련 프로그램'인 바빠 영어 시리즈가 있습니다.</p>
         </div>
         <div id="bg2">
            <h2>바빠 시리즈</h2>
            <h3>-바쁜 학생들을 위한 빠른 학습법</h3>
            <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 '손이 기억하는 훈련 프로그램'인 바빠 영어 시리즈가 있습니다.</p>
         </div>
         <div id="bg3">
            <h2>바빠 시리즈</h2>
            <h3>-바쁜 학생들을 위한 빠른 학습법</h3>
            <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 '손이 기억하는 훈련 프로그램'인 바빠 영어 시리즈가 있습니다.</p>
         </div>
      </body>
   </html>

↓

6. 1~5 모두 통합해서: background

background-image, background-repeat, background-position, background-origin, background-attatchment

위의 다섯가지를 모두 background라는 속성 한 가지로 통합하여 표현할 수 있다.

background: 배경 이미지 반복 위치 적용범위 고정여부;

각각은 공백으로 구분하면 되고, 각각의 속성값 중 겹치는 것이 없기 때문에 순서는 상관이 없다!

고로,

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

││

body { url('images/bg4.png') no-repeat center bottom fixed; }

같다는 뜻이다.

7. 배경 이미지 크기 조절: background-size

배경 이미지를 넣을 요소 크기에 비해서 이미지가 너~~~~무 작거나 너~~~~무 클 때는

background-size 속성을 사용하면 된다.

특히, 화면에 배경 이미지를 가득 채우고 싶을 때 유용하다! ❇ㅁ❇!

눈 빛내는 특수문자를 써보고 싶어서 엔티티 코드를 이용했다...ㅋㅋ 쓸데없는 노오력..⬏

background-size: auto | contain | cover | <가로 길이> <세로 길이> | <백분율> ;

배경 이미지 크기를 가로, 세로 모두 지정할 때는 속성값을 2개 쓰지만,

만약 1개만 쓴다면 에디터는 알아서 가로 길이로 인식한다. (세로는 원래 이미지 비율에 따라서 자동 계산)

속성값	설명
auto	default 값. 원래 이미지 크기만큼 표시.
contain	요소 안에 배경이 다 들어오도록 이미지를 확대 or 축소.
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대 or 축소.
<크기>	이미지 너비와 높이 지정. 하나만 쓰면 너빗값으로 인식. 높잇값은 자동 계산.
<백분율>	요소의 크기를 기준으로 이미지 크기를 백분율로 지정.

예제 4.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>배경 이미지</title>
         <style>
            #container {
               width: 1100px;
               margin: 50px auto;
			   }
            .box {
               float: left;
               border: 1px solid #222;
               width: 300px;
               height: 300px;
               margin: 20px;
               background: url(images/bg4.jpg) no-repeat left top;	/* 배경 이미지를 반복하지 않고 왼쪽 상단에 위치 */
			   }
            #bg1 { background-size: auto; }				/* 원래 배경 이미지 크기로 표시 */
            #bg2 { background-size: 200px; }				/* 너비는 200px, 높이는 자동 계산 */
            #bg3 { background-size: 50%; }				/* 너비는 요소 기준으로 50%, 높이는 자동 계산 */
            #bg4 { background-size: 100% 100%; }			/* 요소의 너비와 높이를 100% 맞춤 */
            #bg5 { background-size: contain; }				/* 요소 안에 배경 이미지가 다 보이게 표시 */
            #bg6 { background-size: cover; }				/* 요소를 완전히 덮도록 배경 이미지 표시 */
         </style>
      </head>
      <body>
            <div id="container">
               <div class="box" id="bg1"></div>
               <div class="box" id="bg2"></div>
               <div class="box" id="bg3"></div>
               <div class="box" id="bg4"></div>
               <div class="box" id="bg5"></div>
               <div class="box" id="bg6"></div>
		   </div>
      </body>
   </html>

↓

이 와중에 <body> 안에 반복되는

이거 엊그제 UDEMY 강의에서 공부한 emmet으로 성공해내서 완전 신남!! 케케

div.box#bg$*6 쓰고 Tab 누르면 완성^─^

(div tag를 만들어줘.

근데 그 안에 class 값은 box로,

id값은 bg숫자를 넣어주는데, bg숫자는 순서대로 6개가 매겨졌으면 좋겠어.)

꼭 6의 오른쪽에다 커서를 두고 Tab 눌러야 함! 중간에 커서 놔두고 Tab 누르니까 엉뚱한게 만들어졌음!

야호 완전 애용해야지~♥

책 속의 실습.

위 코드에다가 배경을 가득 채우는 것이 미션!

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>배경 이미지</title>
         <style>
            body {
               background: url('images/bg5.jpg') left top no-repeat fixed;
               background-size: cover;
            }
            h1 {
               margin-top:150px;			/* 상단 마진 */
               font-size:80px;				/* 글자 크기 */
               text-align: center;			/* 가운데 정렬 */
               color: #fff;
               text-shadow: 2px 2px #000;
            }
         </style>
      </head>
      <body>
         <h1>Do it!</h1>
      </body>
   </html>

↓

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 22. 단원 마무리 문제 풀기 (0)	2022.11.23
DAY 21. 그러데이션으로 배경 꾸미기: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient (0)	2022.11.20
DAY 19. 배경색과 배경 범위 지정: background-color, background-clip (0)	2022.11.16
DAY 18. 단원 마무리 문제 풀기 (0)	2022.11.15
DAY 18. 웹 요소 위치 지정: position, top, right, bottom, left (0)	2022.11.14

'프밍/CSS' Related Articles

Comments

개발 공부 기록하기

개발 공부 기록하기

DAY 20. 배경 이미지 지정: background-image, background-repeat, background-position, background-origin, background-attachment, background 본문

DAY 20. 배경 이미지 지정: background-image, background-repeat, background-position, background-origin, background-attachment, background

1. 웹 요소에 이미지 삽입: background-image

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

↓

2. 배경 이미지 반복 방법 지정: background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat ;

3. 배경 이미지 위치 조절: background-position

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

↓

4. 배경 이미지 적용 범위 조절: background-origin

background-origin: content-box | padding-box | border-box ;

5. 배경 이미지 고정: background-attachment

background-attachment: scroll | fixed ;

↓

6. 1~5 모두 통합해서: background

background: 배경 이미지 반복 위치 적용범위 고정여부;

7. 배경 이미지 크기 조절: background-size

background-size: auto | contain | cover | <가로 길이> <세로 길이> | <백분율> ;

↓

↓

'프밍 > CSS' 카테고리의 다른 글

제목입니다

티스토리툴바