3D 회전목마 만들기
이번에는 3D 회전목마에 대해 만들게요 웹 사이트나 어플에서 보면 빙빙 회전하는거 보신 적 있으시죠??밑에처럼 ㅎㅎㅎ 이제 시작하도록 할게요 일단 폴더를 구성해서 HTMLpage1.htmlprefixfree.min.jsStyleSheet.css 를 만들어 주시기 바랍니다. 벤더 프리스를 사용하기 싫어서 벤더 프릭스를 지원해주는 플러그인을 사용했어요 http://leaverou.github.io/prefixfree 밑에 사이트로 들어가시면 플러그인을 다운받을 수 있어요 들어가기 귀찮으시니까 제가 그냥 파일을 올려드릴게요 이제 HTMLpage1.html 로 와주세요 Section #1 뼈대 생성하기 일단 가장 먼저 html페이지에 style태그 내용을 사용하지 않고 따로 빼내어서 사용하니까html페이지에서 ..
[CSS3] 3차원 변환 (회전하는 정육면체 만들기)
이번에는 벤더 프릭스를 사용하지 않고 벤더 프릭스를 지원해 주는 prefix free 플러그인을 사용하도록 하겠습니다. http://leaverou.github.io/prefixfree 일단 이렇게 폴더에다가 Htmlpage1.htmlprefixfree.min.jsStyleSheet.css 파일을 만들어줍니다. 전 착하니까 prefixfree.min 파일을 드릴게요 이번에는 처음으로 Html파일에다가 태그를 사용하지 않고 외부로 빼내어서 사용할건데요 그때 html파일에서 외부로 빼낸 css내용을 쓸 수 있도록 설정을 해주어야 합니다. 여기서 JavaScript 파일이랑 CSS 파일 두개를 빼내었습니다. 그래서!! 이렇게 써주면 됩니다. 그리고 회전하는 정육면체를 만들거니까 정육면체는 면이 6개죠? 그래서..
[CSS3] 2차원 변환 함수 -transform-origin 속성-
전 시간에 transform 속성은 2차원 변환을 할 수 있게 해주는 속성이라고 설명드렸습니다. 이번에 알아볼 transform-origin 속성은 변환 중심을 설정하는 스타일 속성입니다. ※transform-origin 속성의 기본은 태그의 중심을 변환 중심으로 잡습니다. 그럼 실습으로 들어가도록 할게요 이 내용은 바로 이전 포스팅에서 했던 내용입니다. 여기서 transform-origin 속성을 이용하여 변환 중심을 한번 이동해 보도록 하겠습니다. 결과물이 이렇게 보여집니다. transform-origin의 문법은 transform-origin:x축 y축 z축 입니다. 그러면 x축 y축 z축에는 어떠한 속성의 값들이 쓰여지는지 한번 알아보도록 할게요 속성 값 기준 위치 정의 x축 leftcenterr..
[CSS3] 2차원 변환 함수 -transform 속성-
CSS3 버전부터 transform 속성이 사용 가능해 졌습니다. 그리하여 2차원 변환이 가능한데요 2차원 변환은 무엇이고 transform 속성은 무엇인지 바로 예제를 통해서 확인하도록 하겠습니다. 일던 이렇게 HTML페이지를 구성 해줍니다. 그다음 style 태그 내부에다가 이렇게 코딩을 해줘요 그러면 실행 결과가 위처럼 나옵니다. 여기까지는 별다르게 어려운것 느끼지 못하실거에요 이제! transform속성이 등장할거에요!!(긴장중..) 결과물에서 네모 박스가 잘려나와서 margin:20px 를 추가해주세요 그리고!!! 벤더 프릭스를 사용해 줍니다. 여기서 -ms, -moz, -o, -webkit 이 내용이 무슨 의미인지 모르시는 분들은 벤더프릭스 정리 [링크 Click] 위에 링크를 클릭해 주셔서 ..
[벤더 프리픽스]Prefix Free 플러그인
벤더 프리픽스는 웹 브라우저마다 가지고 있습니다. 또 웹 브라우저마다 가지고 있는게 달라서 코딩을 할때 전부다 써 줘야 합니다. 이렇게 매번 -ms-, -webkit- 등과 같이 쓰기 귀찮을때 사용하는것이 바로 Prefix Free 플러그인 인데요 이 플러그인은 벤더 프리픽스를 사용하지 않아도 되게 만들어주는 라이브러리 입니다. Prefix Free 플러그인 홈페이지 : http://leaverou.github.io/prefixfree/
http://www.homejjang.com/05/meta.php
[스마트폰]스마트폰 레이아웃 구성 #4(네비게이션 구성)
네비게이션이란 우리가 스마트폰이나 컴퓨터에서 웹을 볼때 맨 상단바에 고정메뉴가 있는걸 아실거입니다. 그게 바로 네비게이션인데요 일반적으로 네비게이션 목록 구성 방법은 세가지로 볼 수 있습니다. 1. overflow 속성과 float 속성을 사용 2. display 속성과 table을 사용 3. table 태그를 사용 (2번과 3번은 같은 내용) 이번 포스팅에서는 1번 방법과 2번 방법을 사용하도록 하겠습니다. (1번 방법)overflow 속성과 float 속성을 사용 태그는 block 형태의 네비게이션 목록을 구성할때 사용되는 태그입니다. 이제 이 밑에 버튼 4개를 수평으로 정렬해보도록 하겠습니다. #top_gnb의 내용들이 어떠한 정해진 영역을 넘을시 그 넘은 내용은 안보이게 해준다.(overflow:..
[스마트폰]스마트폰 레이아웃 구성 #3(토글 목록 구성)
이번 포스팅에서는 토글 목록을 구성해보도록 하겠습니다. STEP.1 토글이 무엇이냐? STEP.2 코딩 시작 이렇게 태그를 2개 사용한 이유는 테두리를 이쁘게 2겹으로 만들기 위해서 이렇게 사용한 것 입니다. 여기서 태그를 사용했음에도 불구하고 앞에 아무런 모양이 없는 이유는 이렇게 초기화 코드에서 list-style:none 으로 해주었기 때문입니다. STEP.3 터치할때 목록을 숨겼다 보엿다 하게 만들기 일단 제가 레이아웃 구성을 할때 을 추가를 못햇어요.... 이걸 추가해주세요 설명 들어가기 전 태그를 잠깐 볼게요 여기에 보시면 맨 위쪽에 가 있습니다. 이게 무엇인지 다들 궁금해 하셨죠??? 그래서 밑에 부분에 보시면 Toggle 이부분!! 이부분이 바로 스마트폰에서 터치를 하면 어떠한 반응을 보이..