(7) 배경(background)
- 배경속성은 마진영역을 제외한 박스영역에 설정할 수 있고 다음과 같은 속성이 있음
(요약) 배경속성의 종류
가. background-color
나. background-image
다. background-repeat
라. background-position
마. background-attachment
바. background-size
※ 예제를 시작하기 전에 준비물을 알려드리려고 합니다.
저는 설명을 위해 
크기는 상관없고, 실습용 이미지를 준비해주세요^^
가. background-color
- 모든박스의 배경색은 투명이며, 폼요소는 배경색이 미리 지정되어 있음
- 요소를 투명하게 만들려면, background-color: transparent;
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>배경제어하기</title> <style type="text/css"> *{margin:0; padding:0;} body{background-color:#ccc;} .test1{background-color:#f00; width:100px; height:100px; border:10px solid #000;} .test2 input{border:2px solid #000; } .test3 input{border:2px solid #000; background-color: transparent;/*배경투명설정*/} </style> </head> <body> <h3>background-color</h3> <p class="test1">배경색</p> <p class="test2">input 기본 <input type="text" /></p> <p class="test3">input 배경 투명하게 <input type="text" /></p> </body> </html> |
■ 실행결과1
나. background-image
- 배경색 대신에 이미지를 넣을 수 있으며 포토샵의 패턴처럼 x,y 반복되어 표현된다
- 배경이미지의 기준점은 테두리 안쪽기준 왼쪽 상단점이 원점으로 계산되어 x,y가 반복됨
■ 예시2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>배경제어하기</title> <style type="text/css"> *{margin:0; padding:0;} body{background-color:#ccc;} .box1{background-image:url(img20.png); width:100px; height:100px;} </style> </head> <body> <h3>background-image</h3> <div class="box1"></div> </body> </html> |
■ 실행결과2
다. background-repeat
- 배경이미지의 반복을 제어
- repeat 종류
1) repeat(기본값) →작성안해도됨
2) no-repeat(반복안함)
3) repeat-x(x축 반복)
4) repeat-y(y축 반복)
■ 예시3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>배경제어하기</title> <style type="text/css"> *{margin:0; padding:0;} body{background-color:#ccc;} .repeat{width:200px; height:100px; margin:50px; border:10px solid #000; background-image:url(img20.png);} .repeat1{background-repeat:repeat;}/*기본설정이라 작성안함*/ .repeat2{background-repeat:no-repeat;} .repeat3{background-repeat:repeat-x;} .repeat4{background-repeat:repeat-y;} </style> </head> <body> <h3>background-repeat</h3> <div class="repeat repeat1"></div> <div class="repeat repeat2"></div> <div class="repeat repeat3"></div> <div class="repeat repeat4"></div> </body> </html> |
■ 실행결과3
라. background-position
- 배경이미지를 원점으로부터 임의의 좌표를 입력하여 원하는 위치에 배치할 수 있음
- 포지션 속성은 반복 또는 반복되지 않는 상태에서도 둘다 적용 가능하나 일반적으로 no-repeat와 가장 많이 사용
■ 배경포지션 적용방법
- 형식 : background-position:좌표1 좌표2;
- 좌표종류 :
x, y → 원점으로부터 떨어진 거리. (박스안쪽은 +, 바깥쪽은 -)
- 기준좌표 → align에서 사용하는 좌표 : left, right, center, top, bottom
ex) background-position:20px 30px;
background-position:left top;
■ 예시4
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 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>배경제어하기</title> <style type="text/css"> *{margin:0; padding:0;} body{background-color:#ccc;} .position{width:250px; height:150px; margin:20px; border:10px solid #000; background-image:url(img20.png); background-repeat:no-repeat;} .p1{background-position:right top;} .p2{background-position:center;} .p3{background-position:50px 30px;} .p4{background-position:-5px -5px;} .p5{background-position:30px center;} </style> </head> <body> <h3>background-position</h3> <div class="position p1">right top</div> <div class="position p2">center center</div> <div class="position p3">50px 30px</div> <div class="position p4">-5px -5px</div> <div class="position p5">30px center</div> </body> </html> |
■ 실행결과4
마. background-attachment
- 배경이미지가 페이지의 스크롤에 따른 화면 고정 유무를 제어한다(scroll, fixed 두가지 사용)
- scroll 속성 : 배경이미지가 화면에 따라 스크롤되도록 지정.
- fixed 속성 : 화면을 스크롤을 해도 배경이미지는 스크롤되지 않고 고정위치에 항상 보임. 배경위에 텍스트가 떠있는 느낌을 표현할 수 있음.
■ 예제5
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 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>배경제어하기</title> <style type="text/css"> *{margin:0; padding:0;} body{background-color:#ccc; background-image:url(img20.png); background-repeat:no-repeat; background-attachment:fixed;} .list{margin:30px;} .list li{ list-style:none; background-color:#ff0; background-image:url(img20.png); background-repeat:no-repeat; background-position:left center; padding-left:25px; margin:10px;} </style> </head> <body> <h4>대체 이미지</h4> <ul class="list"> <li><a href="#">리스트1</a></li> <li><a href="#">리스트2</a></li> <li><a href="#">리스트3</a></li> <li><a href="#">리스트4</a></li> </ul> </body> </html> |
■ 실행결과5
※ 브라우저 크기를 줄이거나, 텍스트를 더 입력해서 스크롤이 가능한 상태로 만들어 테스트해보세요^^
※ 리스트의 경우, 기본 list-style을 none으로 하고 이미지를 배경에 넣어 이미지로 list-style을 표현할 수 있습니다.
(참고 기법1) IR(image replacement)
→ 구조를 표시하는 텍스트로 표시하고 디자인에서 이미지로 대체하는 기법
(참고 기법2) image sprite
→ 배경 이미지를 낱개로 제작하지 않고 비슷한 그룹의 배경 이미지를 하나의 파일로 제작 후에 배경 포지션 속성을 이용하여 요소에 배치하는 방법
바. background-size
- 배경 이미지의 크기를 조절
- 종류: auto, 길이, %, cover, contain, initial, 상속여부 NO
■ 예시6
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 32 33 | <!DOCTYPE html> <html> <head> <style> #example1 { border: 2px solid black; padding: 25px; background: url(mountain.jpg); background-repeat: no-repeat; background-size: auto; } #example2 { border: 2px solid black; padding: 25px; background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px; } </style> </head> <body> <h2>background-size: auto (default):</h2> <div id="example1"> <h2>Hello World</h2> </div> <h2>background-size: 300px 100px:</h2> <div id="example2"> <h2>Hello World</h2> </div> </body> </html> |
■ 실행결과6
※ 마지막에 있는 예제는 w3school 에 있는 예제입니다. 직접 코드를 수정해가면서 결과도 볼수 있고, 다양한 사례들을 볼 수가 있답니다. 참고하세요^^
2018/06/04 - [IT/참고] - [사이트 추천] 코딩 기초 언어 공부하기 좋은 사이트 : W3SCHOOL