YoonStudyNote

matrix(a, b, c, d, e, f) 요소의 2차원 변환(Transforms)효과를 지정 scale(), skew(), translate() 그리고 rotate()를 지정 요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용된다. (2D 변환 함수는 matrix로, 3D 변환 함수는 matrix3d로) 따라서 일반적인 경우는 matrix함수가 아닌 일반 함수를 사용하면 된다.) 무슨말인지 모르겠어서 스킵했음

3D 변환으로 회전된 요소의 뒷면 숨김을 설정 값 의미 기본값 visible 뒷면 숨기지 않음 visible hidden 뒷면 숨김 img{ width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); } 이렇게 뒤집힌 상태에서 hidden을 추가하면 이미지는 사라지게 된다. 하지만 뒤집히지 않는 상태에서는 그대로 있다. *hidden을 사용 주의사항 img{ width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibili..

1. perspective 하위 요소를 관찰하는 원근 거리를 설정 값 의미 기본값 단위 px, em, cm 등 단위로 지정 .perspective{ width: 200px; perspective: 500px; padding: 70px; } .grand-parent{ width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateX(-45deg); transform-style: preserve-3d; } .parent{ width: 200px; border: 3px solid blue; transition: 1s; transform: rotateY(45deg); transform-style: preserve-3d; } img{ width:..

3D 변환 요소의 자식요소도 3D 변환을 사용할지 결정 값 의미 기본값 flat 자식 요소의 3D 변환을 사용하지 않음 flat preserve-3d 자식 요소의 3D 변환을 사용함 .perspective{ width: 200px; perspective: 500px; padding: 70px; } .grand-parent{ width: 200px; border: 3px solid tomato; transition: 1s; transform: rotateX(-45deg); } .parent{ width: 200px; border: 3px solid blue; transition: 1s; transform: rotateY(45deg); } img{ width: 200px; } grand-parent클래스에서..

transform 변환 속성 속성 의미 transform-origin 요소 변환의 기준점을 설정 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 perspective 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin 원근 거리의 기준점을 설정 backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 transform-origin 요소의 변환의 기준점을 설정 값 의미 기본값 x축 left, right, center, %, 단위 50% y축 top, bottom, center, %, 단위 50% z축 단위 0 img{ width: 200px; border: 1px solid lightgray; transition: 1s; ..

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; } 이렇..