물공's의 딥러닝

이러한 빛 기둥은 극지방에서 볼 수 있다고 합니다.

light Painting 작가인 Janne Parviainen은 디지털적인 조작을 하지 않고 카메라의 셔터로 불빛을 움직이며 그 궤적을 담은 작품입니다.

이번에는 3D 회전목마에 대해 만들게요 웹 사이트나 어플에서 보면 빙빙 회전하는거 보신 적 있으시죠??밑에처럼 ㅎㅎㅎ 이제 시작하도록 할게요 일단 폴더를 구성해서 HTMLpage1.htmlprefixfree.min.jsStyleSheet.css 를 만들어 주시기 바랍니다. 벤더 프리스를 사용하기 싫어서 벤더 프릭스를 지원해주는 플러그인을 사용했어요 http://leaverou.github.io/prefixfree 밑에 사이트로 들어가시면 플러그인을 다운받을 수 있어요 들어가기 귀찮으시니까 제가 그냥 파일을 올려드릴게요 이제 HTMLpage1.html 로 와주세요 Section #1 뼈대 생성하기 일단 가장 먼저 html페이지에 style태그 내용을 사용하지 않고 따로 빼내어서 사용하니까html페이지에서 ..

추운 날씨로 인해 얼어버린 비누방울 너무 몽환적이면서 이쁘네요

이번에는 벤더 프릭스를 사용하지 않고 벤더 프릭스를 지원해 주는 prefix free 플러그인을 사용하도록 하겠습니다. http://leaverou.github.io/prefixfree 일단 이렇게 폴더에다가 Htmlpage1.htmlprefixfree.min.jsStyleSheet.css 파일을 만들어줍니다. 전 착하니까 prefixfree.min 파일을 드릴게요 이번에는 처음으로 Html파일에다가 태그를 사용하지 않고 외부로 빼내어서 사용할건데요 그때 html파일에서 외부로 빼낸 css내용을 쓸 수 있도록 설정을 해주어야 합니다. 여기서 JavaScript 파일이랑 CSS 파일 두개를 빼내었습니다. 그래서!! 이렇게 써주면 됩니다. 그리고 회전하는 정육면체를 만들거니까 정육면체는 면이 6개죠? 그래서..

전 시간에 transform 속성은 2차원 변환을 할 수 있게 해주는 속성이라고 설명드렸습니다. 이번에 알아볼 transform-origin 속성은 변환 중심을 설정하는 스타일 속성입니다. ※transform-origin 속성의 기본은 태그의 중심을 변환 중심으로 잡습니다. 그럼 실습으로 들어가도록 할게요 이 내용은 바로 이전 포스팅에서 했던 내용입니다. 여기서 transform-origin 속성을 이용하여 변환 중심을 한번 이동해 보도록 하겠습니다. 결과물이 이렇게 보여집니다. transform-origin의 문법은 transform-origin:x축 y축 z축 입니다. 그러면 x축 y축 z축에는 어떠한 속성의 값들이 쓰여지는지 한번 알아보도록 할게요 속성 값 기준 위치 정의 x축 leftcenterr..

CSS3 버전부터 transform 속성이 사용 가능해 졌습니다. 그리하여 2차원 변환이 가능한데요 2차원 변환은 무엇이고 transform 속성은 무엇인지 바로 예제를 통해서 확인하도록 하겠습니다. 일던 이렇게 HTML페이지를 구성 해줍니다. 그다음 style 태그 내부에다가 이렇게 코딩을 해줘요 그러면 실행 결과가 위처럼 나옵니다. 여기까지는 별다르게 어려운것 느끼지 못하실거에요 이제! transform속성이 등장할거에요!!(긴장중..) 결과물에서 네모 박스가 잘려나와서 margin:20px 를 추가해주세요 그리고!!! 벤더 프릭스를 사용해 줍니다. 여기서 -ms, -moz, -o, -webkit 이 내용이 무슨 의미인지 모르시는 분들은 벤더프릭스 정리 [링크 Click] 위에 링크를 클릭해 주셔서 ..

벤더 프리픽스는 웹 브라우저마다 가지고 있습니다. 또 웹 브라우저마다 가지고 있는게 달라서 코딩을 할때 전부다 써 줘야 합니다. 이렇게 매번 -ms-, -webkit- 등과 같이 쓰기 귀찮을때 사용하는것이 바로 Prefix Free 플러그인 인데요 이 플러그인은 벤더 프리픽스를 사용하지 않아도 되게 만들어주는 라이브러리 입니다. Prefix Free 플러그인 홈페이지 : http://leaverou.github.io/prefixfree/