Frontend Developer를 향해 !

display:inline-block 을 사용하다보면 기본적으로 좌우 여백이 4px이 있는데 이걸 해결하는 4가지 방법이 있다.아래 사이트 참고. https://css-tricks.com/fighting-the-space-between-inline-block-elements/

- 실무에서 자주사용되는 간단한 script중에 하나인데 프로젝트 할때마다 만들기가 귀찮아서 샘플로 올려놓습니다..- 아래 소스 그대로 복사해서 붙여넣기 하고 제이쿼리 라이브러리 연결해주면 작동합니다. css html마크업 & script semple top

1. DOM을 캐싱하라. 한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이니까. Bad h = $('.element').height(); $('.element').css('height',h-20); Good $element = $('.element'); h = $element.height(); $element.css('height',h-20); 2. 가급적 전역을 오염시키지 마라. 함수 영역(Scope) 내, 지역 변수 사용으로 전역을 오염시켜 충돌이 나는 것을 사전에 방지해야 하니까. Bad $element = $('.element'); h = $element.height(); $element.css('height',h-20); Good var $element = $('.element'); var h..

- 프로젝트를 하다보면 iframe사용할때가 종종 있습니다. 개발쪽에서 url주소부분을 숨기려고 많이들 쓰는데 웹 접근성 지침중에 탭 키로 순차적 이동이 되어야하는 지침이 있습니다.근데 iframe을 사용하면 이부분이 잘 지켜지지 않을 때도 있어서 그 해결방안을 적어놓으려고 합니다. 1. 웹 접근성을 모르는 개발자분들이 js파일에서 a 요소에다가 'blur()'처리를 하는경우 탭 키가 안먹는 경우가 있습니다. js파일내에 'blur()' 메서드를 삭제 하시면 올바르게 작동하더라구요. 2. 1번사항도 아닐 경우에 해당 iframe요소 안에있는 컨텐츠에 접근을 해서 해결하는 방식을 사용해야 합니다.iframe요소 안에있는 컨텐츠에 접근을하려면 js로 접근을 해야합니다.(로컬에서는 에러가 떠서 확인이 안되니 ..

- css3에서는 서식요소들을 디자인 할 수 있는 속성들이 등장해서 아래 사이트에 가서 확인 가능. 1. checkbox, radio buttonhttp://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/ 2. select Boxhttp://codepen.io/bephf/pen/ogNBYW

- 비쥬얼 영역이나 메인 영역에 이미지 슬라이드가 들어갈 시 사용.- bxSlider 만큼 괜찮은 플러그인- 사용방법 및 데모 페이지 확인은 아래 링크에서 확인. http://jquery.malsup.com/cycle2/

- ie7, 8에서 opacity가 안먹힘 ;;- ms필터를 사용해서 해결 하면 됨. - 아래 소스 참고 .transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; }

- 프로젝트를 진행할때 보면 ie7,8이 크로스브라우징이 안되어서 골치 아플때가 많다..- Detectizr.js를 사용해서 해결해도 되지만 Detectizr.js는 modernizr.js가 있어야 작동되므로..- 간단히 ie만 체크해야 할땐 아래 함수를 사용해서 해결하면 도움이 된다.- 사용법은 출처 및 아래 첨부파일 다운 - 출처 : http://blog.grotesq.com/post/478 https://github.com/Unk/IE-Checker (function(){ // 외부 라이브러리와 충돌을 막고자 모듈화. // 브라우저 및 버전을 구하기 위한 변수들. 'use strict'; var agent = navigator.userAgent.toLowerCase(), name = navigato..

- 사이트http://www.maschek.hu/imagemap/imgmap - 근데 다 영어라 ;; 설명이 필요하면 아래 링크 참조http://m.blog.naver.com/hacktank/220027938778 만약 인터넷이 안된다면 프로그램도 파일 첨부하였습니다.무설치 파일입니다.

아래 링크 참조http://www.cmsfactory.net/node/10987