WEB기초44 [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. [bootstrap] Bootstrap 이용하기 06 (170407) Bootstrap 이용하기 06 tooltip 이용하기- tooltip은 팁이나 설명할 때 이용하기 좋다.- script로 띄우는 방향(placement), animation, 띄우는 시점(trigger)을 설정할 수 있다.- 해당 버튼의 속성값 data-placement로 띄우는 방향 설정이 가능하다.- tooltip("show"), tooltip("hide")로 trigger:"manual"(특정시점에 띄우기)의 설정을 해줄 수 있다. ** 출력 결과 ** popover 이용하기- tooltip보다 좀 더 많은 내용을 기록 가능- data-title="제목" data-content="내용" data-toggle="popover" ** 출력 결과 **Carousel 이용하기 - carousel은 회전목.. 2017. 4. 7. [bootstrap] Bootstrap 이용하기 05 (170406) Bootstrap 이용하기 05 Panel 이용하기- panel의 색상 클래스 : panel-primary, panel-success, panel-info, panel-warning, panel-danger- panel은 panel heading, panel-body, panel-footer 로 구성된다.- panel 속에 table을 넣을 수 있다.- panel 속에 li를 넣을 수 있다.- insert효과를 well클래스로 줄 수 있다. ** 출력 결과 ** - 패널 예제- 패널 안에 크기가 유동적인 이미지를 넣기 위해서는 img-responsive 클래스를 이용한다. ** 출력 결과 ** ProgressBar 이용하기- progress-bar, progress-bar-(color속성:success,.. 2017. 4. 6. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
