translate 함수 : 이동, px사용 x: 양수-오른쪽, 음수-왼쪽 y: 양수-아래쪽, 음수-위쪽 z: 양수-가까워짐, 음수-멀어짐 (y축은 수학이랑 반대! 헷갈리지 않기!) transform: translate(x, y) transform: translate3D(x, y, z) transform: translateX(x) transform: translateY(y) transform: translateZ(z) scale 함수 : 크기 확대/축소, 배수 사용 ex) scale(0.5) 요소의 크기가 0.5배로 작아짐 transform: scale(n) transform: scale(x, y) transform: scale3D(x, y, z) transform: scaleX(x) transform: ..
overflow 속성 웹 개발에서 자주 사용되는 CSS의 속성 'overflow: hidden'에 대해서 알아보겠습니다. 우선, 'overflow' 속성이란 요소의 내용이 요소의 크기를 넘어가게 되면 어떻게 처리할지를 지정하는 역할을 합니다. hidden: 넘치는 부분이 보이지 않도록 숨깁니다. visible: 요소의 외부로 표시됩니다. scroll: 요소에 스크롤 바가 추가되어 넘치는 내용을 볼 수 있습니다. auto: 내용이 넘칠 경우에만 스크롤 바를 추가합니다. ex) overflow: hidden ex) overflow: visible
웹페이지에 상승표시로 나타나는 삼각형 넣는 방법 HTML에 삼각형을 넣을 공간을 만들어줍니다. 너비와 높이값은 0 각각의 border 길이를 넣어주면 원하는 모양과 크기의 삼각형을 만들 수 있습니다. (transparent는 투명하게 만드는 속성) ex) 적용 예시
object-fit 이란 CSS의 'object-fit' 속성은 html 태그 요소 내에 이미지나 비디오를 배치하고 크기를 조절하는 데 사용 object-fit 속성 값 cover : 이미지의 비율을 유지하면서 요소를 꽉 채움 fill : 이미지의 비율을 유지하지 않고 요소를 꽉 채움 contain : 이미지의 비율을 유지하면서 내용이 전체적으로 비오도록 함 none : 내용의 크기 조정 없이 그대로 표시 scale-down : 'contain'과 'none' 중에 적절한 것을 선택 .container { width: 300px; height: 200px; overflow: hidden; } .image { width: 100%; height: 100%; object-fit: cover; } ex) +추..
