WEB기초/CSS6 [CSS] CSS3 이용하기 03 (170411) CSS3 이용하기 03 CSS3를 이용한 3D Cube 만들기- 6장의 사진을 모두 겹친다. - 각각의 이미지 요소를 축에 맞추어 이동시킨다.- 첫 번째를 예로 들자면 Z축으로 200px 이동한다.- 두 번째 이미지는 Y축을 기준으로 90도 회전 후 200px을 이동한다.- 이런 식으로 회전과 이동을 해준다.- wrapper를 기준으로 Z축으로 200px이 튀어나와보이기 때문에 큐브 전체를 창에 맞춰 보이도록 -200px을 해준다. (이렇게 하는 이유는 컨텐츠를 가릴 수도 있기 때문에 해주는 것이다) ** 출력 결과 ** 버튼에 따라 상하좌우 이동하도록 만들기- jquery를 이용하여 만든다.- 기준을 만들어 더하고 뺀다. ** 출력 결과 ** Animation 이용하기- animation-name : .. 2017. 4. 11. [CSS] CSS3 이용하기 02 (170410) CSS3 이용하기 02 3D Transform- perspective :컨텐츠와 내 시선 사이의 거리 (wrapper 요소)- perspective-origin: 50% 50% ; 시선의 위치 결정 (wrapper 요소)- transform-style : preserve-3d ; 3d transform을 하겠다고 선언- transform-origin : 50% 0%; x, y, z축이 만나는 원점 설정 (x% y%) ** 출력 결과 ** CSS3를 이용한 카드 뒤집기 ** 출력 결과 ** 버튼 클릭하면 뒤집어지는 카드 ** 출력 결과 ** 2017. 4. 10. [CSS] CSS3 이용하기 (170410) CSS3 이용하기 CSS3는 IE9이상에서 이용이 가능하다. BorderRadius 속성 이용하기- 모서리 부분을 반지름으로 잡아 둥글게 해주는 기능 ** 실행 결과 ** Transition 이용하기- transition 속성에는 property(background-color, width, height 등), duration, timing-function이 있다.- 여러 개의 적용이 필요하면 all을 이용한다.- transition1 ** 출력 결과 ** - 더 자세한 결과는 css3 > Step02_Transition2.html, 참고 - transition2 ** 출력 결과 ** - transition3- 5초 안에 종료되지만 각자 속도가 다 다르다. ** 출력 결과 ** transform - tra.. 2017. 4. 10. [CSS] CSS 입문 03 (170327) CSS 입문 03 Page Layout2단 레이아웃 배치법 01-navigation, content-navigation에 width를 주고 content에 margin값을 준다. ** 출력 결과 ** 2단 레이아웃 배치법 02- navigation, content- content에 맞춰 navigation의 height 나타나게 하기- navigation의 position을 absolute로 주고 넓이를 지정한다.- content의 border-left를 200px로 지정하여 색을 지정한다. ** 출력 결과 ** 3단 레이아웃 배치법- 좌, 우 navigation과 content- 위와 동일한 방법에서 각각의 navigation에 right:0과 left:0 을 지정한다.- content의 좌우에 mar.. 2017. 3. 27. 이전 1 2 다음
