YoonStudyNote

1. position VS translate .box{ width: 100px; height: 100px; background: tomato; display: flex; justify-content: center; font-size: 30px; position: relative; left: 100px; top: 30px; } .box{ width: 100px; height: 100px; background: tomato; display: flex; justify-content: center; font-size: 30px; transform: translate(100px, 30px); } 위의 코드와 밑에 코드는 같은 값이 출력이 된다. 하지만 차이가 있다. 만약 원하는 위치에 배치시키고 끝내고 싶다면 p..

요소의 변환 효과(변형)를 지정 transform: 변환함수1 변환함수2 변환함수3...; transfrom: 원근법 이동 크기 회전 기울임; .box{ transform: rotate(20deg) translate(10px, 0); } translate는 움직인다는뜻이다. 즉 x축 10px만큼 움직이고 y축에 0만큼 움직인다는 뜻이다.

CSS 속성의 전환 효과를 지정 선언할때 바뀌기 전의 요소에 transition값을 선언해야한다. CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 --> 전체를 전환 효과를 넣을 수 있고 일부를 선택해서 전환 효과를 넣을 수 있다. all transition-duration 전환 효과의 지속시간 설정 --> ms도 사용 가능하다. 0s transition-timing-function 타이밍 함수 지정 ease transition-delay 전화 효과의 대기시간 설정 0s 사용방법 1. transition-property & transition-duration .box{ width: 100px; heig..

배경 이미지의 크기를 지정 속성값 값 의미 기본값 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") ..