티스토리 뷰
background-color속성 – 배경색 지정하기
-웹 문서 전체의 배경색을 지정하려면 body요소의 background-color속성을 조절하면 된다.
( 이 역시 16진수나 rgb값 또는 색상 이름을 사용해 지정한다. )
background-color는 상속되지 않는다.
표같은 경우에 배경색을 넣을 때 따로 지정해주어서 넣어주면 된다.
background-image 속성 – 웹 요소에 이미지 넣기
-배경요소에 이미지를 삽입할 때 사용하는 속성입니다.
ex)background-image:url(파일경로) ;
->파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://부터 시작하는 절대 경로를 사용할 수 있다. 이때 파일 경로에 작은따옴표(또는 큰따옴표)를 붙여도 되고 안붙여도 된다.
문서 전체의 배경 이미지 적용=<body>태그
특정 영역에 배경 이미지 적용=클래스 선택자 or id 선택자 이용
background-repeat속성-배경 이미지 반복하기
-배경 이미지를 사용할 때 그 이미지를 반복할 것인지(여기서 반복이란 첨부하려는 이미지의 크기가 작으나 홈페이지 배경은 넓어 여러개를 붙인 것처럼 표현되는 현상 ) 반복한다면 가로나 세로중에 한 방향으로 반복할 것인지 가로와 세로를 같이 반복할것인지 지정하는 속성이다. 반복되는 배경 이미지는 왼쪽 위나 왼쪽 아래 모서리부터 시작한다.
속성 값
(1)repeat = 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로 반복
(2)repeat-x = 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복
(3)repeat-y = 마찬가지로 세로로 반복
(4)no-repeat = 배경 이미지를 한 번만 표시하고 반복하지 않음
ex)세로로 반복했을 경우
background-image:url(a.jpg);
backgrond-repeat : repeat-y;
background-position 속성-배경 이미지 위치 조절하기
-배경 이미지를 한번만 표시하면서 워하는 위치에 배치하려고 할 때 사용한다.
이 속성에서는 수평 위치 값과 수직 위치 값을 함께 표시한다.
백분율 표시법
값을 하나만 지정할 때:수평 위치 값(수직 위치 값은 수직의 중간인 50%)간주
값을 두 개 지정할 때 :앞의 값은 수평 위치값 뒤의 값은 수직 위치 값 즉, (수평,수직)
ex)background-position: 위치 (%), 위치 (%) (50,50이면 화면 중앙)
길이(px)표시법
ex) background-image:30px 30px; (길이,길이)
키워드 표시법
-배경 이미지 위치를 지정할 때 가장 많이 사용하는 속성 값이다.
수평의 위치: left, center, right 중에서 선택
수직의 위치: top, bottom center중에서 선택
ex) background-position:right bottom;
background-attachment 속성 – 배경 이미지 고정하기
-배경 이미지를 고정 할 수 있다. 문서 화면을 아래로 스크롤 하더라도 배경 이미지는 고정되고, 이미지 위에 내용이 떠 있는 것처럼 보입니다.
ex) background-attachment : fixed 또는 scroll ;
->scroll =기본 값, 내용과 배경 이미지가 함께 스크롤 되는 것
fixed =배경 이미지가 고정된 상태에서 내용만 스크롤 됩니다.
즉, scroll은 스크롤 막대가 있는 상태에서 스크롤을 내렸을 경우 배경은 가만히 있고 내용만 움직이고 fixed는 이미지와 같이 내용도 움직인다.
background속성-속성 하나로 사용하기
-앞서 설명한 속성들을 하나의 속성으로 줄여서 사용할 수 있다.
ex) body {
width : 960px;
height : 280px;
margin-top:0; //위여백 0px
background:url(bg.png) no repeat left top; /*배경이미지 ,반복하지않음,왼쪽 위에 배치*/
}
background-size속성 – 배경 이미지 크기 조절하기
-배경 이미지를 사용하는 요소에 따라 여러 가지 크기로 사용할 수 있다.
속성 값
(1) auto : 원래 배경 이미지 크기만큼 포시
(2) 크기 값 : 너비 값과 높이 값을 지정 너비값만 지정할 경우 높이값 자동 계산
(3) 백분율 : 원래 배경 이미지 크기를 기준으로 확대or축소
(4) contain : 배경이미지 비율을 유지하면서 확대or축소 너비나 높이 중 큰 값을 배경 이미지가 삽입되는 요소에 맞춤
(5) cover : contain과 마찬가지로 확대or축소 단, 너비나 높이 중 작은 값을 배경 이미지가 삽입되는 요소에 맞춤
442page참고.
background-clip속성 – 배경 적용 범위 조절하기
-배경이나 배경색을 어디까지 적용할지 그 범위를 지정.
속성 값
(1)border-box :박스 모델의 가장 외곽인 테두리(border)까지 적용
(2)padding-box: 박스 모델에서 테두리를 뺀 패딩 범위까지 적용
(3)content-box: 박스 모델에서 내용 부분에만 적용
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML5+CSS3>레이아웃을 위한 스타일 박스모델 (0) | 2018.10.17 |
|---|---|
| <HTML5+CSS3>그라데이션 효과로 배경 꾸미기 (0) | 2018.10.17 |
| <HTML5+CSS3> 색상과 관련된 스타일 (0) | 2018.10.17 |
| <HTML5+CSS3>목록 스타일 (0) | 2018.10.17 |
| <HTML5+CSS3> 텍스트 간격 조절 (0) | 2018.10.16 |