코딩룸*◡*

인터넷상에 돌아다니는 템플릿이나 오픈소스를 다운로드해보면css 시트나 js파일이 min으로 압축되어 있는 경우를 자주 볼 수 있습니다. * min파일이란?- (minify:축소하다)의 줄임말로, 공백과 줄바꿈을 제거하여 용량을 최소로 줄인 파일입니다.- min으로 압축하여 실제 서비스에 사용합니다.- 전송량을 줄일 수 있습니다.- min파일도 수정해주어야 실제 웹에 적용이 됩니다. 이 min파일을 풀어야 편하게 수정이 가능한데요 * min파일 푸는 사이트https://mrcoles.com/blog/css-unminify/ 위의 링크로 가서 아래의 사진처럼 빈칸에 소스를 붙여넣고 Unminify 버튼을 클릭해주면 됩니다. * CSS > min으로 압축하는 사이트http://javascriptcompress..

1. 띄어쓰기 (공백, 스페이스) : Non-breaking Space의 약어로서, 공백(스페이스 한 칸)을 의미. 2. 부등호()>: "무엇에 비해 크다(Greater Than)"는 뜻. 4. & (and)& : 앰퍼샌드(Ampersand) 라 불리며 AND 라는 의미 5. "(쌍따옴표)" 쌍따옴표(") 하나

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 를 이해하는데 있어 가장 중요하고 응용하면 좋을것 같다.

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과는 여러 사이트에서 사용되고 있습니다. 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, ..