본문 바로가기
정보&지식/컴퓨터, 프로그램 관련 지식

HTML/CSS(background스타일)

by 웹툰 크리에이터_우선Wseon 2019. 12. 9.


※ background 스타일

- 배경색을 넣거나 이미지를 배경으로 넣을 때 사용

- 요소의 배경 색이나 배경 이미지를 지정한다. 배경이란 Box Model에서의 내용(contents)의 배경 부분과 패딩(Padding) 부분을 포함한 것이다. 테두리(Border) 부분의 색상과 모양은 border속성으로 지정.


1. background-color : 색 이름/RGB 값

배경색 설정, 모든 요소에 적용 가능, 기본값은 transparent


2.background-image : url(이미지파일)/none

이미지 파일의 URL을 지정하면 이미지가 해당 요소의 배경으로 나타남, 모든 요소에 적용가능


3. background-repeat 

사용자가 원하는 방향으로 이미지를 반복해서 나타나게 하거나, 반복하지 않고 한 번만 나타나게 할 수 있다.

- repeat : 이미지가 가로와 세로의 양방향으로 반복해서 나타남(기본값)

- repeat-x : 이미지가 가로 방향으로만 반복해서 나타남 

- repeat-y : 이미지가 세로 방향으로만 반복해서 나타남 

- no-repeat : 이미지가 반복되지 않고 한번만 나옴


4. background-attachment : scroll / fixed

배경 이미지가 해당 요소와 함께 움직임을 제어하거나, 또는 웹브라우저의 화면에 고정될지를 지정. 기본값은 scroll


5. background-position : 숫자[퍼센트/길이]

top/center/bottom(수직), left/center/right(수평)

댓글