스타일 시트를 이용한
배경 지정하기
스타일 시트를 이용하면 색상으로 배경을 설정 할 수 있으며 또한 이미지로 배경을 지정 할 수도 있습니다.
이번 시간에는 배경을 지정하는 방법에 대하여 알아보도록 하겠습니다.
background-color
설명 : 배경색 지정
속성값 : 색상명 또는 RGB 값
사용예 : <span style="background-color: #d4f4fa">배경색 지정하기</span>
결과 : 배경색 지정하기
background-image
설명 : 배경 이미지 지정
속성값 : 배경 이미지의 URL
사용예 : <span style="background-image:url(https://t1.daumcdn.net/cfile/tistory/99B222335A71E96530);">이미지로 배경 지정하기</span>
결과 : 이미지로 배경 지정하기
※ 예 지정 이미지는 상단 대표이미지 입니다.
background-repeat
설명 : 배경 이미지 반복 설정
속성값 : no-repeat, repeat-x, repeat-y, repeat
사용예 : style="background-image:url(주소지정); background-repeat:속성지정"
※ 배경이미지에 대한 반복 설정이기 때문에 배경이미지를 설정하고 해당 설정을 하시면 됩니다.
background-attachment
설명 : 배경 이미지 고정 또는 스크롤 설정
속성값 : fixed, scroll, local
background-position
설명 : 배경 이미지 위치 설정
속성값 : top, bottom, left, right, center
더 다양한 예제는 다음 포스팅 또는 블로그 꾸미기 포스팅 시에 올리도록 하겠습니다. ^^
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
HTML/CSS 레이어(Layer) 란 (7) | 2018.02.13 |
---|---|
CSS 목록 속성 불릿(Bullet) 지정하기 (1) | 2018.02.06 |
[CSS] 폰트 관련 속성 알아보기 (2) | 2018.01.29 |
[CSS] 스타일 정의 기본 형식 (6) | 2018.01.26 |
자바스크립트 날짜와 시각 관련 함수 (2) | 2018.01.25 |