-
배경 관련 스타일프로그래밍/HTML&CSS 2022. 8. 31. 19:28728x90
background-color
background-color 속성은 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 사용한다. 배경색 또한 color 속성과 마찬가지로 rgba, 16진수, 색상명 표기법 중 한 가지로 표현 가능하다.
background-color: <색상> background-color : color: #ffff00 | rgb(0,0,255) | blue<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>배경</title> <style> div{ background-color: deepskyblue; width: 80%; padding: 20px; border: 3px dotted red; } </style> </head> <body> <div> <h2>배경색 적용하기</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, a iure vel nostrum est quos? Alias nulla voluptatum laboriosam cumque aspernatur at eos cupiditate consequatur quidem! Architecto cum ipsum velit?</p> </div> </body> </html>
background-color 예제 결과 background-image
background-image 속성은 웹 요소에 배경을 이미지를 넣을 때 사용하는 속성으로 url()에 이미지 경로를 넣어서 사용한다.
background-image: url(파일 경로)background-repeat
배경 이미지를 사로와 세로 중에서 어떤 방향으로 반속할지 지정하거나, 반복 하지 않고 한번만 나타내고 싶을 때 사용한다.
종류 설명 repeat 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다.(기본값) repeat-x 브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다. repeat-y 브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다. no-repeat 한 번만 표시하고 반복하지 않는다. background-position
background-position 속성은 반복 되지 않는 배경 이미지의 수평 위치 또는 수직 위치 값을 지정 할 수 있다.
% 또는 px, 키워드(left, right, top, bottom, center)을 사용하여 왼쪽 상단을 기준으로 상대 위치를 직접 설정할 수 있고 속성값을 2개로 지정할 경우 첫번째 값은 수평 위치의 값이 되고 두번째 값은 수직 위치의 값이다.
속성 값을 하나만 지정한다면 웹 브라우저에서는 지정 값을 수평 위칫값으로 간주하고 수직 위치값은 50%나 center로 간주한다.
background-position: <가로위치값>, <세로위치값> | 상대위치값left top center top right top left center center right center left bottom center bottom right bottom background-attachment
background-attachment 속성은 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있다. 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않는다.
background-attachment: scoll(기본값) | fixedscroll의 경우 화면을 스크롤하면 배경 이미지도 스크롤 된고 fixed 일 경우 화면을 스크롤하더라도 배경이미지는 고정된다.
background
지금까지 위에서 설명한 배경이미지 관련 속성을 한번에 표기하고 적용가능한 속성이다.
background: url('images/bg1.png') no-repeat center bottom fixed이런 식으로 표현 가능하며 순서는 크게 상관하지 않는다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>배경</title> <style> body{ background-image: url(./img/flag.png); background-repeat: no-repeat; /*반복하지 않음*/ background-position: right top; /*위치 결정*/ background-attachment: fixed; /*위치 고정함*/ /* background: url(./img/flag.png) no-repeat right top fixed; 이렇게도 표현 가능함.*/ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p> <!-- ... --> <!--웹 문서 내에 많은 content를 넣어 일부로 scroll할 수 있는 환경을 만든다.--> <!-- ... --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores velit enim quos molestiae, quasi magnam consequuntur inventore harum iure, eos praesentium, sint blanditiis asperiores fugiat ipsa esse illum officia iste?</p> </body> </html>
background 예제 결과 728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
블록(block) 요소와 인라인(inline) 요소 (0) 2022.09.01 박스 모델(box model), 컨텐츠(content) 영역 (0) 2022.09.01 텍스트 관련 스타일 (1) 2022.08.30 글꼴 관련 스타일 (0) 2022.08.29 선택자(selector) (3) (0) 2022.08.28