Web Club

switch case문 기초 사용해 보기

switch cace 기초 활용코드 # 마크업 메뉴 1111 메뉴 2222 메뉴 3333 * {margin:0;padding: 0;} ul {list-style-type: none;overflow: hidden;} li {float: left;width: 100px;text-align: center;background-color: tan;padding: 10px;margin-right: 10px;} .aaa {border:2px solid red} .bbb {border:2px solid blue} .ccc {border:2px solid green} function tabMenuAct(menuId) { var menuNum = menuId.replace('tabMenu_',''); //tabMenuSt..

Code Lab 2015. 2. 11. 18:39

clip 속성 알아보기 및 접근성 focus스타일링

Clip- 원하는 영역만 보여주기 ㆍ 적용방법 - 기본값은 auto. - clip:rect(top, right, bottom, left); - top, left ==> 영역이 보여지는 기준값 즉, 시작하는 지점의 값 - bottom값은 top에서부터 보이고자하는 영역의 높이값 - right값은 left에서 보이고자 하는 영역의 가로값 [Tip] 키보드 탭 이동시에 나타나는 focus 스타일링 a:focus { color: #71777c; text-decoration: none; outline: 1px dotted invert; } Jaehee's WebClub

StyleSheet/CSS 2015. 2. 11. 18:29

clip속성을 이용한 접근성 obj_hidden 처리하기

clip 사용, 접근성 숨김처리 접근성 마크업을 하면서 css 스타일 또한 중요한데 텍스트를 숨김처리하는 동시에 스크린리더기에서만 읽게 하도록 하는 방법 중 clip속성을 이용하여 스타일링 한 방법. .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } Jaehee's WebClub

StyleSheet/CSS 2015. 2. 11. 18:22

ImgReplace 함수 코드

마우스 오버 및 마우스 아웃시의 함수 작성 javascript function imgReplace (obj, before, after){ obj.attr("src", function(){ return $(this).attr("src").replace(before, after); }); } $("a.pdfDown") .on("mouseenter focusin", function(){ $(this).addClass("on"); imgReplace($("img",this),'_off','_on'); }) .on("mouseleave focusout", function(){ $(this).removeClass("on"); imgReplace($("img",this),'_on','_off'); });

Code Lab 2015. 2. 11. 18:16

masking css 처리 스타일링

Mask CSS css .img_area .img { display: block; } .img_area .img img { max-width: 100%; max-height: 100% } .img_area .mask { display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; border: 1px solid #000; opacity: .1; } .img_area:hover .mask { border: 5px solid red; opacity: 1; } .img_area .etc { position: absolute; width: 100%; text-align: center; bottom: 10px; displ..

StyleSheet/CSS 2015. 2. 11. 18:11

after() vs insertAfter() 그리고 before() vs insertBefore()

jQuery after, insertAfter & before, insertBefore 메 소 드 내 용 after() 지정한 요소 뒤에 새로운 요소를 삽입 A.after(B) - A 뒤에 B를 추가 insertAfter() 지정한 요소 뒤에 새로운 요소를 삽입 A.insertAfter(B - B 뒤에 A 를 추가 before() 지정한 요소 시작 부분에 내용을 삽입 A.berfore(B) - A 앞에 B를 추가 insertBefore() 지정한 요소 시작 부분에 내용을 삽입 A.insertBefore(B) - B 앞에 A 를 추가 var count = 0; $( "body" ).on( "click", "p", function() { $( this ).after( "Another paragraph! " ..

Web Tech/jQuery 2015. 2. 11. 18:00

append() vs appendTo() 및 prepend() vs prependTo()

jQuery append, appendTo, prepend, prependTo 메 소 드 내 용 append() 지정한 요소의 마지막에 내용을 추가 A.appendTo(B) - B에 A를 추가 appendTo() 지정한 요소의 마지막에 내용을 추가 A.appendTo(B) - B에 A를 추가 prepend() 지정한 요소의 시작 부분에 내용을 삽입 A.prepend(B) - A에 B를 추가 prependTo() 지정한 요소의 시작 부분에 내용을 삽입 A.prependTo(B) - B에 A를 추가 Usage append() html javascript var contents = [ {name : '다음', url : 'http://daum.net'}, {name : '네이버', url: 'http://na..

Web Tech/jQuery 2015. 2. 11. 17:58

tomcat SSI(sever side include) 설정하기

window os에서 톰캣 SSI 설정하는 방법 SSI, html include 하기 tomcat ssi t(omcat/설정) # 이런식으로 파일 인클루드함 그리고 SSI의 기능을 활성화 하기 위해서 아래 코드 하단의 web.xml의 주석을 푼다. ssi org.apache.catalina.ssi.SSIServlet buffered 1 debug 0 expires 666 isVirtualWebappRelative 0 4 ssi *.html 맵핑부분을 보면 *.shtml 이라고 되어 있을 것이다. 이것을 경우에 맞게 변경하여 사용하면 된다.

Dev Environment/개발 환경 2015. 2. 11. 17:53

마진겹침 및 더블마진 현상 해결하기

Margin 겹침 현상 인접요소간 마진의 방향이 겹치면 작은값 은 무시해 버리는데... 해결 방법은 요소에 display:inline-block을 적용하면 됩니다. 더블 마진 현상 요소에 마진의 방향과 float의 방향이 같을때 마진이 2배 적용된다 (보통 ie6이하 버전에서 발생) 해결 방법은 display:inline을 적용 Jaehee's e-room

StyleSheet/CSS 2015. 2. 11. 17:46

ie8용 미디어쿼리 전용핵

IE8 미디어쿼리 핵 @media \0screen { div.wrap{ width:100%; height:100% } }

StyleSheet/CSS 2015. 2. 11. 17:31

모바일 주소창 없애기

모바일 주소창 기본 모바일 주소 숨기기 // onload 이벤트 window.onload = function() { setTimeout(function() { window.scrollTo(0, 1);}, 100); }; // addEventListener 이벤트 window.addEventListener('load', function(){ setTimeout(scrollTo, 1); }, false); window.setTimeout(func, delay, [인자1, 인자2]); scrollTo 메소드를 0초후에 실행하고 scrollTo 메소드의 파라미터값 (가로좌표값, 세로좌표값) 안드로이드에서 오동작 하는 경우를 살펴본 바 body의 height가 디바이스 height 보다 작은 페이지의 경우 숨기기..

Code Lab 2015. 2. 11. 16:33

window resize와 document resize를 trigger와 triggerHandler 했을때 차이점

결과 console 에서 확인하기 $(window).bind("resize", function() { console.log(">>> window resize"); console.log("xxxxxxxxxxxx"); }); $(document).resize(function() { console.log(">>> document resize"); console.log("------xxxxx----"); }); $("#btn_window_resize1").bind("click", function() { $(window).triggerHandler("resize"); console.log("----------"); }); $("#btn_window_resize2").bind("click", function() {..

Code Lab 2015. 2. 11. 16:27

Mac BootCamp 설치하기

Mac 부트캠프 설치하기 1. empty USB 준비 2. 디스크 유틸리티에서 준비한 빈 usb 포맷(지우기) - 하위폴더의 파티션말고 root 파티션 지우기 3. 런치패드의 기타에서 boot camp 지원 클릭 4. 2번째 항목 클릭 ( 준비한 usb에 소프트 웨어 다운로드 ) 5. usb 에 다운로드 받은 파일들 데탑에 복사해 두기 ( usb에 다운로드 목록 지우기 ??? ) 6. 다운로드 완료 후 부트캠프 다시 실행 - 첫번째,세번째 항목 체크 후 준비한 win.iso 이미지파일 드래그하여 넣기 7. 다운로드 진행 후 os x와 window 파티션 적당히 나누기 ( 대략 win 50기가면 충분 ) 8. window 설치 진행 ( 사용자 지정 고급에서 boot camp 파티션 포맷 후 설치 진행 ) ..

Private Zone 2015. 2. 11. 10:28