머리가 나뻐서 삽질 SAP(Study And Programming)

CSS3 transform-origin Property css3 속성중에 width, height, zoom 을 사용하여 오브젝트의 사이즈를 조절할 수 있지만 전체 컨테이너에 포함된 모든 내용물들을 반영하려면 트랜스폼을 사용하여야한다. 예) 전체 컨테이너를 가로 10, 세로 20, 2배확대 하여 안의 상속된 내용들을 전부 반영 하려면 div{ transform : translateX(10) translateY(20) scale(2, 2);} * scale(x, y) 하면 되는데 문제는 이렇게 변형되고 나서 위치를 저장하거나 반영할때 원점이 이동되어있어서 비례식등으로 이동되고 축소된 거리만큼 계산해서 다시 x, y 를 -/+ 해주어야 하는데 이럴때 바로 transform-origin 속성으로 원점을 아예 ..

jquery ui를 사용한 resizable NMS솔루션을 만든 프로젝트가 있는데 aside에 resizable기능을 추가하고싶었다 바로 좌측의 LNB부분. 제이쿼리ui 라이브러리에서 resizable (https://jqueryui.com/resizable/)을 제공한다. 그전에 검색을 통하여 비슷하게 동작하는 colResizable (http://www.bacubacu.com/colresizable/) 라이브러리도 찾아냈지만 이 colResizable은 table의 기반의 th,td 를 움직이기 때문에 이 라이브러리를 가지고 div엘리먼트의 사이즈를 확장한다던지 변형해서 사용하려 하다가 애꿎은 시간만 허비했다. 물론 colResizable 라이브러리의 완성도가 낮다는게 아니라 div와 table co..

selectbox와 쿠키 사용하기 with jquery 셀렉트 박스에서 선택한 값으로 타겟의 옵션이 바뀌어지고 브라우저를 새로고침하거나 껐다가 켜도 쿠키로 유지하고 싶을때 setCookie와 getCookie 함수로 만들어서 구워내는 놈, 쿠끼꺼내는 놈 만들기 function setCookie(cName, cValue, expiredays) { var today = new Date(); today.setDate( today.getDate() + expiredays ); document.cookie = cName + "=" + escape( cValue ) + "; path=/; expires=" + today.toGMTString() + ";" } function getCookie() { // useri..

요약(Summary)CSS의 transform 속성을 사용함으로써, CSS의 시각적 서식 모델(visual formatting model)의 좌표 공간을 변형시킬 수 있다. 해당 속성에 지정된 값에 따라 엘리먼트(element)에 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. 만약, none이 아닌 값이 설정된 경우, stacking context 가 생성된다. 이 경우, 해당 객체는 position: fixed 인 엘리먼트(element)를 포함하는 컨테이너(containg block)처럼 동작한다.초기값 noneApplies to any transformable element상속 noMedia visualComputed value ?..

CSS3 스펙 꾸러미의 일부인 CSS 트랜지션(transitions)은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성..

웹폰트 - 나눔고딕 웹폰트로 "나눔고딕, 나눔고딕 볼드, 나눔 고딕 엑스트라 볼드" 를 항상 사용하기 때문에 common.css 같은 파일에 항상 정의해서 쓰지만 폰트 적용 부분만 필요한 경우가 있기 때문에 부분적으로 포스팅 소스코드 (css + 폰트 포함) 다운로드 @charset "utf-8"; /* * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess * @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); * @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); */ @font-face { f..

accordion menu css3 + jquery source : http://designmodo.com/ 예제보기 (실행가능) 소스코드 html + jquery My Files495 01Dropbox42 02Skydrive87 03FTP Server366 04Dropbox1 05Skydrive10 Mail26 01Hotmail9 02Yahoo14 Cloud58 01Connect12 02Profiles19 03Options27 04Connect12 05Profiles19 06Options27 Sign Out 01Log Out 02Delete Account 03Freeze Account By Valeriu Timbuc for DesignModo. css3 /* ************************..

룰렛게임 자바스크립트 (with. 제이쿼리, jqueryrotate library) ※ 경고. 연구용도를 제외한 소스와 결과물의 '상업적 이용'을 절대 금합니다. 수정 : 2015.06.18 룰렛 회전을 구현하기 위해서는 ccs3의 속성을 이용하면 되지만, 브라우저의 가장 큰 문제는 호환성이기에, jqueryrotate plugin 을 이용하여 구현해보는 방법을 알아보자. 이 라이브러리의 소개는 다음과 같다. https://code.google.com/p/jqueryrotate/ http://beneposto.pl/jqueryrotate/ This is a small plugin for jQuery that adds a nice feature to rotate images (img html objects..

DIV의 수평정렬 div안에 포함되어 있는 텍스트를 수평중앙정렬 하기 위해서는 text-align: center; 스타일을 지정해 준다. div안에 포함되어 있는 display가 block인 요소들을 수평중앙정렬 하기 위해서는 다음과 같이 margin좌우에 auto로 지정해 준다. margin:0 auto 0; margin:0 auto; margin-left:auto; margin-right:auto; DIV의 세로 정렬 Table 엘리먼트에서 vertical-align: middle; 로 수직중앙정렬 했지만 div에서는 적용 되지 않는다. 우리는 div의 display를 직접 table속성으로 확장,변경해 주고 수직으로 정렬하는 방법을 알아보겠다. 가로 세로 센터 DIV나 TABLE 등 고전적인 방법(..

CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법 Internet Explorer 10에서는 text-shadow CSS(CSS 스타일시트) 속성을 사용하여 하드웨어 가속 텍스트 그림자를 지원합니다.text-shadow 속성에 대한 지원은 웹 개발자가 가장 많이 요청하는 기능 중 하나였습니다. 이 속성을 사용하면 인라인 텍스트 이미지를 사용하지 않고도 이전에 어렵거나 불가능했던 텍스트 효과를 구현할 수 있습니다. CSS 텍스트 그림자는 W3C(World Wide Web 컨소시엄)의 CSS 텍스트 수준 3 사양의 10.3절에 정의되어 있습니다. Internet Explorer 10의 웹 페이지 이외에도 JavaScript를 사용하는 Windows 스토어 앱도 또한 text-shadow 속성을 지원합니..