Programmers

1) display: inline; 줄바꿈x, width, height속성 지정x, margin, padding 상하간격 반영 x 예) , , 2) display: block; 줄바꿈o, width, heigth, margin, padding속성 지정o 예) , , 3) display: inline-block; 줄바꿈x, width, height, margin, padding속성 지정o 예) , ,

1) 변환 예제 - 카드 뒤집기 .cards { } .card { width: 150px; height: 220px; position: relative; perspective: 600px; } .card .face { width: 150px; height: 220px; border: 1px solid lightgray; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: 2s; position: absolute; backface-visibility: hidden; } .card .face-front { background: url("https://heropy.blog/css/images/p..

1) matrix(a,b,c,d,e,f) 요소의 2차원 변환(Transforms) 효과를 지정 scale(), skew(), translate() 그리고 rotate()를 지정 ※ 요소에 일반 변환(Transforms) 함수(2D, 3D)를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용됨. (2D 변환 함수는 matrix 로, 3D 변환 함수는 matrix3d 로) 따라서 일반적인 경우는 matrix 함수가 아닌 일반 변환 함수를 사용하면 됨 위의 예시와 같이 사용한다정도만 알면 된다. scale(), skew(), translate() 그리고 rotate()를 지정하는 것이 편리하다!

1) backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 속성 값 값 의미 기본값 visible 뒷면 숨기지 않음 visible hidden 뒷면 숨김 사용법 .img1 { width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibility: visible; } .img2 { width: 300px; border: 1px solid lightgray; transition: 1s; transform: perspective(400px) rotateY(180deg); backface-visibility: hidden; } ※..

1) perspective-origin 원근 거리의 기준점을 설정 - 어디서 바라볼 것이냐 속성 값 값 의미 기본값 X축 left, right, center, %, 단위 50% Y축 top, bottom, center, %, 단위 50% 사용법1 perspective-origin: 50% 50%; .perspective { width: 200px; perspective:600px; perspective-origin: 50% 50%; padding: 70px; } .grand-parent { width: 200px; border: 3px solid dodgerblue; transition: 1s; transform: rotateX(-45deg); transform-style: preserve-3d; /* ..

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

1) transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 속성 값 값 의미 기본값 flat 자식 요소의 3D 변환을 사용하지 않음 flat preserve-3d 자식 요소의 3D 변환을 사용함 사용법 .perspective { width: 200px; perspective:500px; padding: 70px; } .grand-parent { width: 200px; border: 3px solid dodgerblue; transition: 1s; transform: rotateX(-45deg); transform-style: preserve-3d; /* transform-style: flat; */ } .parent { width: 200px; border: 3px s..

1) transform 변환 속성 속성 값 값 의미 transform-origin 요소 변환의 기준점을 설정 transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정 perspective 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin 원근 거리의 기준점을 설정 backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정 2) transform-origin 요소 변환의 기준점을 설정 속성 값 값 의미 기본값 X축 left, right, center, %, 단위 50% Y축 top, bottom, center, %, 단위 50% Z축 단위 0 사용법1 transform-origin: 100% 100% 적용-> 요소의 기준값이 이미지..