코딩룸*◡*

사이트에서 로고란 것은 엄청나게 큰 작용을 한다.이 로고가 정적이지 않고 동적으로 움직이면사이트에 활력이 생기고 뭔가 퀄리티가 높아진다. 그런데 이 동적인 작용을꼭 SVG 파일이 아니라,GIF 파일 자체 디자인으로 넣어서 쉽게 만들 수 있다. 그러나 이건 디자이너의 몫이다.. [참고 이미지 : 평창 올림픽 기념 네이버 로고] 검색바와 배경까지 모두 통 이미지이다..

소스 비교사이트 http://www.diffchecker.com 소스 넣고 Find Difference 클릭하면 됩니다.

덥다고 한 지가 엊그제 같은데어느덧 매서운 바람이 불어오는 겨울이 찾아왔다.시간 참 빠르네 이제 좋은것만 보고 좋은생각만 해야겠다.2017년도 얼마 안남았다.

1. 절대좌표(전역좌표) offsetoffset 메소드는 요소의 위치정보를 가져온다.전역 좌표(절대 좌표)라고도 하는데, 최상위 노드인 Document의 left:0; top:0; 위치를 시작점으로 하는 위치값을 의미한다.반응형 또는 모바일 환경에서 하단 또는 특정 위치에 고정된 값을 가지며 따라다니는 것들을 구현하기 위해 좌표값이 필요한데, offset이 해당 위치값을 알거나 또는 이동할 수 있는 함수이다. 2. offset().top // offset().left1) .offset().top // 상단을 기준으로 엘리먼트 요소가 위치한 거리를 절대좌표로 반환2) .offset().left// 좌측을 기준으로 엘리먼트 요소가 위치한 거리를 절대좌표로 반환 This is a paragraph. Retur..

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