코딩룸*◡*

1. transform: scale 과 transform: rotateX 정의 transform은 회전, 크기, 이동, 기울이기와 관련된 다양한 동작이 가능하다. 간단한 div box안에 이미지 소스를 확대 시키려면 transform:scale 을 이용하면 된다. 2. 사용방법1) scale : 크기를 작게 또는 크게 변경하기 2) rotate : 회전 효과 적용하기 4. 결론CSS를 사용하여 다양한 시각적 효과, 애니메이션을 구현할 수 있다. 그런데 익스플로러(IE)나 웹킷 엔진의 사파리, 크롬, 오페라등의 브라우저에서 사용하기 위해서 -ms-, -webkit- 등을 css 속성 앞에 꼭 써주어야 한다.

1. display: flex의 정의flex는 유연성을 뜻하는데, 요소들을 자유자제로 위치시키는 속성이다. 이 속성을 통해 동적으로 변경가능한 순서를 지정할 수 도 있고, 가용한 공간내에서 크기와 위치를 자동으로 조정하기도 한다. 2. 사용방법콘텐츠를 감싸는 부모요소에 이 속성을 지정해준다. .container {display: flex;} 3. 브라우저 호환성속성 display: flex;IE10+(hybrid)CH21 이상(modern), CH20 이하(old), An2.1 이상(old) FF2~21(old), FF22이상(modern)SF3.1 이상(old), iOS3.2 이상(old) 4. 결론 CSS flex-box 를 이해하는데 있어 가장 중요하고 응용하면 좋을것 같다.

콘텐츠1 콘텐츠2 콘텐츠3 콘텐츠1 콘텐츠2 콘텐츠3

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과는 여러 사이트에서 사용되고 있습니다. CSS의 transform: scale(1.1);을 이용하면 됩니다. See the Pen Untitled by miyeon (@auseyoo) on CodePen. transform: scale(1.1); /* Defalut */ -webkit-transform: scale(1.1); /* Chrome */ -moz-transform: scale(1.1); /* FireFox */ -o-transform: scale(1.1); /* Opera */

1. box-sizing이란?box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 먼약에 엘리먼트에 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다. 따라서 엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 padding과 border가 더는 너비를 늘리지 않게되서 크기를 예측하기가 더 쉬워진다. 2. box-sizing 속성box-sizing: content-box; 기본값. padding, border, margin 값은 포함하지 않는다.box-sizing: border-box; padding, border 값만 포함하며, margin값은 포함하지 않는다.box-sizing: padding-box; padding값만 포함하고, border, ..