YoonStudyNote

배경 이미지의 크기를 지정 속성값 값 의미 기본값 auto 배경 이미지가 원래의 크기로 표시됨 auto 단위 - px, em, % 등 단위로 지정 - width height 형태로 입력 가능(E.g. 120px 370px) - width 만 입력하면 비율에 맞게 지정됨(E.g. 120px) cover - 배경 이미지의 크기를 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 - 이미지가 잘릴 수 있음 contain - 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 - 이미지가 잘리지 않음 1. 세로 크기를 지정할 필요 없다. .box{ width: 400px; height: 300px; border: 4px solid red; margin: 50px; background-image: ..

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정 속성 값 값 의미 기본값 scroll 배경 이미지가 요소를 따라서 같이 스크롤 됨 scroll fixed 배경 이미지가 Viewport에 고정되어, 요소와 같이 스크롤되지 않음 local 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨 .container { width: 400px; height: 300px; border: 4px solid red; margin: 50px; overflow: auto; background-image: url("https://heropy.blog/css/images/vendor_icons/html5.png"); background-size: 50%; } .for-scroll{ height: 2000px; } 이렇..

배경 이미지의 위치를 설정 속성 값 값 의미 기본값 % 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100% 0% 0% 방향 방향을 입력하여 위치 설정 top, bottom, left, right, center 단위 px, em, cm 등 단위로 지정 .box{ width: 550px; height: 350px; border: 2px solid lightgray; background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png"); background-size:100px; background-repeat: no-repeat; background-position: right bottom; } 사용법 값이 방향일 경우 ..

배경 이미지의 반복을 설정 속성 값 값 의미 기본값 repeat 배경 이미지를 수직, 수평으로 반복 repeat repeat-x 배경 이미지를 수평으로 반복 repeat-y 배경 이미지를 수직으로 반복 no-repeat 반복 없음 1. repeat-x .box{ width: 550px; height: 350px; border: 2px solid lightgray; background-image: url("https://heropy.blog/css/images/vendor_icons/css3.png"); background-size:100px; background-repeat: repeat-x; } 이미지의 크기를 100px로 하고 가로만 반복 출력하게 만들었다. 2.repeat-y .box{ width:..

요소의 배경에 하나 이상의 이미지를 삽입 (주로 1개만 삽입하는 경우가 많다.) 속성 값 값 의미 기본값 none 이미지 없음 none url("경로") 이미지 경로(URL) 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다. 사용방법 .box{ /* 개별속성 */ background-image: url("./img/i1.jpg"), url("./img/i2.jpg"), url("./img/i3.jpg"); } .box2{ /* 단축속성 */ background: url("./img/i1.jpg") no-repeat, url("./img/i2.jpg") no-repeat 100px 50px, url("./img/i3.jpg") repeat-x; } 하나 이상의 배경 이미지..

요소의 배경 색상을 지정 속성값 값 의미 기본값 색상 요소의 배경 색상 transparent 투명 transparent div{ width: 200px; height: 100px; background-color: tomato; }

요소의 배경을 설정 속성 값 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; .box1 { background: red url("./img/image.jpg") no-repeat left top scroll; /* 색상 이미지경로 반복 위치 스크롤특성 */ } .box2{ background: url("./img/image.jpg") ..