목차
background-img
배경에 이미지 넣기
이미지 주소를 넣을때는 ' ' 안에 넣어주는것이 좋음
넣지않아도 보통은 작동하지만, 경로상에 특수문자, 띄어쓰기가 있다면 에러가 날수도있음
경로를 여러개 넣을수도 있음
첫번째 이미지가 없다면 두번째, 두번째 이미지가 없다면 세번째 이미지가 적용됨
background-size는 이미지의 크기 조절
cover는 꽉 차는 이미지로 만듦, 더 큰쪽의 이미지는 자름
contain은 요소안에 이미지가 다 나타나게함, 비율에 맞게 큰쪽이 맞게 조절
.div_img {
background-image: url('../IMG/cat.jpg'), url('../IMG/bird.jpg');
width: 500px;
height: 400px;
background-size: cover;
}<h1>background-img</h1>
<div class="div_img"></div>
background-repeat
배경 이미지를 반복할지 여부를 정함
기본값은 repeat, 반복 안함은 no-repeat, x축으로 반복은 repeat-x, y축으로 반복은 repeat-y
.background-repeat {
width: 2000px;
height: 1000px;
background-size: 100px;
background-image: url('../IMG/bird.jpg');
background-repeat: repeat-x;
}<h1>background-repeat</h1>
<div class="background-repeat"></div>
background-position
어느 위치를 기준으로 repeat할지 정함
.div_position {
border: 1px solid #000;
width: 800px;
height: 800px;
background-image: url('../IMG/salad.jpg');
background-position: bottom 100px right 50px;
background-size: 50%;
}<h1>div_position</h1>
<div class="div_position"></div>
background-attachment
viewport내에서 배경 이미지의 고정 여부를 정해줌
scroll은 내용을 스크롤해도 배경 이미지는 스크롤 되지 않음
fixed는 viewport를 스크롤해야 배경 이미지가 스크롤됨
local은 내용을 스크롤하면 배경 이미지도 스크롤됨
.div_im_scroll {
background-attachment: scroll;
}
.div_im_fixed {
background-attachment: fixed;
}
.div_im_local {
background-attachment: local;
}<div style="height: 2000px;">
<div class="div_im_scroll at_img">
문명이 출현하면서 사회집단 또는 부족에 따라서 전통적인 요리법이 정착되기 시작했다. 기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다. 사람들이 얼마나 청결한 것을 좋아하는가와
자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다. 전통 음식은 국가, 지역별로 다음과 같이 나뉜다:
</div>
<div class="div_im_fixed at_img">
문명이 출현하면서 사회집단 또는 부족에 따라서 전통적인 요리법이 정착되기 시작했다. 기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다. 사람들이 얼마나 청결한 것을 좋아하는가와
자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다. 전통 음식은 국가, 지역별로 다음과 같이 나뉜다:
</div>
<div class="div_im_local at_img">
문명이 출현하면서 사회집단 또는 부족에 따라서 전통적인 요리법이 정착되기 시작했다. 기후, 토양, 동물 분포와 같은 지역적인 요인에 따라서 서로 다른 전통이 만들어졌다. 사람들이 얼마나 청결한 것을 좋아하는가와
자신들의 사회구조를 지키기 위해서 어떤 종교적 금기를 지키는가에 따라서 요리법이 달라지기도 했다. 전통 음식은 국가, 지역별로 다음과 같이 나뉜다:
</div>
</div>
Github