CSS 변환 가이드
CSS 변환은 문서 흐름에 영향을 주지 않고 요소의 위치, 크기 및 방향을 변경합니다. 회전, 크기 조정, 이동 및 기울이기를 단일 변환 속성으로 결합할 수 있으며 CSS 전환을 통해 원활하게 애니메이션 효과를 줍니다.
슬라이더를 드래그하여 실시간으로 적용된 각 변환을 확인하세요. 점선 직사각형은 원래 위치를 표시하고 단색 카드는 변환된 결과를 표시합니다. 만족스러우면 전체 변환 값을 복사합니다.
Pro Tips
- 변환에서는 순서가 중요합니다. 변환: 번역(...) 회전(...) 이동한 다음 회전합니다. 회전(...) 변환(...)은 좌표계를 먼저 회전하여 다른 결과를 생성합니다.
- 부드러운 호버 효과를 위해 변환과 전환을 결합합니다. .card:hover { 변환: scale(1.05); } 전환 포함: .2s 변환; 기본 클래스에서.
Frequently Asked Questions
Q: 번역과 위치의 차이점은 무엇인가요?
번역과 위치의 차이점은 무엇인가요? 번역은 레이아웃 흐름을 변경하지 않고 요소를 시각적으로 이동합니다. 위치(상단/왼쪽)는 흐름에서 요소를 제거하거나 형제 항목을 이동합니다. 번역은 GPU 가속 기능을 갖추고 있어 애니메이션 속도도 더 빠릅니다.
Q: 변환이 레이아웃에 영향을 미치나요?
변환이 레이아웃에 영향을 미치나요? 아니요. 변형된 요소는 문서 흐름에서 원래 공간을 유지하므로 겹치거나 오버플로되는 경우가 많습니다. 여백이나 패딩을 사용하여 공간을 확보하세요.
Q: 여러 변환을 결합할 수 있나요?
여러 변환을 결합할 수 있나요? 예, 하나의 속성에 공백으로 구분하여 나열합니다. 좌표계에서는 오른쪽에서 왼쪽으로 적용됩니다.
Q: 회전된 요소가 흐릿한 이유는 무엇입니까?
회전된 요소가 흐릿한 이유는 무엇입니까? 90도가 아닌 각도로 회전하면 앤티앨리어싱 아티팩트가 발생합니다. 작은 배율(1.001)을 추가하거나 will-change: 변환을 사용하면 일부 브라우저에서 도움이 될 수 있습니다.
Q: 변형이 애니메이션과 함께 작동합니까?
변형이 애니메이션과 함께 작동합니까? 예, 변환은 애니메이션을 적용하는 가장 저렴한 속성 중 하나입니다. @keyframes 또는 전환과 페어링 - GPU 합성을 통해 모바일에서도 원활하게 작동합니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.