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

raphaeljs에서 그라데이션 형태의 애니메이션은 왜 없을까 하여 그라데이션부분만 구글링하고 그라데이션 분할, 애니메이션 동작을 구현하여 곧 솔루션에 적용할 요량으로 만든 데모. 정말 좋은 프레임웍인데 자료가 많이 없어서 적용하는데에 애를 먹었다. 완성한 코드) 결과) IE8,9,10,11, 크롬, 파이어폭스, 사파리

브라우저에서 손쉽게 캡쳐할수 있는 툴 중에 가장 직관적이면서 손쉽게 그리고 강력한 툴. 아래 이름으로 검색이 가능하다. Awesome Screenshot: Capture & Annotate 먼저 구글크롬) https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce 파이어폭스) 역시 파이어폭스에서도 존재 잘 만든 툴임에도 라이센스는 Donation.. 깊은 감사를 표한다..

1. 브라우저 종류 판별 여러가지 방법이 있지만 현재 (2014.07월) 까지 대다수 브라우저와 특히 IE계열 7,8,9,10,11을 판별 해 내는 간단한 함수를 만들어보고 IE의 경우 프론트엔드 개발자를 지독하게 괴롭히는 호환성 보기 체크 여부까지 검사하는 방법을 알아보겠다. 2. IE버전을 구분 할 때에는 navigator.appName을 사용하지 말것 예전에는 IE의 경우 최초 navigator.appName 메서드로 접근하여 "Microsoft Internet Explorer" 라는 문자열로 알 수 있었는데 IE11의 경우 navigator.appName 이름이 Netscape로 나온다. 쌩뚱맞게 Netscape로 나오는 이유는? -> 본인도 모르겠다. 표로 정리) IE 버전 navigator.a..

indexOf 메서드 String 개체 안에서 부분 문자열이 처음 나오는 문자 위치를 반환합니다. strObj.indexOf(subString[, startIndex]) 인수strObj 필수적인 요소. String 개체 또는 리터럴입니다. subString 필수적인 요소. String 개체 안에서 검색하려는 부분 문자열입니다. startIndex 선택적인 요소. String 개체 안에서 검색을 시작할 인덱스를 지정하는 정수 값입니다. 생략하면 문자열의 처음부터 검색을 시작합니다. 참고indexOf 메서드는 String 개체 안에 있는 부분 문자열의 시작점을 나타내는 정수값을 반환합니다. 부분 문자열이 없으면 -1이 반환됩니다. startindex 값이 음수이면 startindex는 0으로 처리됩니다. 이..

박스모델 다음과 같은 형태의 table 박스모델이 있다. 박스모델의 형태를 살펴보면 a. 상단에는 이미지 b. 하단에는 설명 c. 이미지(a)위에는 장비에대한 아이콘(이미지)으로 구성되어있다. 박스모델은 대략 아래와 같이 상상하면 되고 주요한 css 속성은 - container와 vendor의 position은 모두 absolute - a와b는 table의 text-align:center 라는 점이다.

실무반영을 위한 테스트 - div 테이블구성과 고정좌표 display 연산 포스팅 정리는 나중에 가나다라마바사길다길어긴텍스트다어긴텍스트다

테이블샘플 HTML 테이블 직접 코딩해서 만든 샘플. CSS를 보면 DIVision안에 코드는 명시적으로 직접 선언되었기 때문에, 미세하겠지만 빠른 퍼포먼스를 가진다. css의 순서선택자 (first-child, last-child, nth-child(n)..) 을 사용하여 odd와 even 처리를 했다. 소스코드) 공연정보 공연/행사명 2014년 새해맞이 국악한마당 “serpiko와 판소리” 기간 기간데이터 시간 시간데이터 장소 장소데이터 가격 관람료 할인정보 할인정보 관람연령 관람연령데이터 제작 제작데이터 문의 문의데이터 공지사항 공지사항 결과) 실제 iframe으로 삽입한 결과 실무) sql > php > javascript > html 로 데이터수신 표기

CSS 순서 선택자 css에서 내부적으로 조건문 처리하여 순서를 선택할 수 있는 셀럭터들이 있다. 활용 빈도수가 아주 높은것들만 간략하게 메모. element:first-child{} : 첫번째 element:nth-child(2)P{} : 2번째 element:last-child{} : 마지막번째 element:nth-child(odd) : 홀수번째 element:nth-child(even) : 짝수번째 element:nth-child(2n+1) : 2개씩 자르고 그중 1번째 element:nth-child(2n) : 2번째

변수와 셀럭터의 조합 코드) 19 ~ 20 : 이부분 var maskVar = $('#mask'); maskVar + $('#imgID2').css('opacity',0.5); 결과) 5 : overflow:hidden 으로 인해 마스크 처리가됨. 유의할점은 두개의 이미지를 합친 width 보다 크거나 같아야 inline으로 쌓임 17 : attribute를 사용, 호출 테스트 'hello1' 이 출력된다. 19 : 변수로 등록하여 20 : 처럼 결합해서 쓴다.

Adobe AIR 에서 Safari 웹 브라우저에 사용되는 Webkit (www.webkit.org) 을 사용하여 HTML 및 Javascript 내용을 파싱하고 있다. 다음 표에는 AIR에서 사용되는 것과 동일한 버전의 Webkit 을 사용하는 Safari 웹 브라우저 버전 목록이다.AIR 버전Safari 버전1.02.041.13.041.54.0 베타2.04.032.54.032.64.032.74.0335.0.3행여나 에이전트를 확인하려면 다음과 같이 HTMLLoader 객체에 반환되는 기본 사용자 에이전트 문자열을 이용해서 확인한다. var htmlLoader:HTMLLoader = new HTMLLoader(); trace( htmlLoader.userAgent ); 이제 브라우저 에이전트를 확인했으..