OK DDODDO LAB

스크롤 시 특정 지점에서 요소(element)를 고정 하기위해서는 position: sticky 값을 사용하면 되는데, sticky가 제대로 고정 되지 않을 경우 아래 사항을 확인 하시기 바랍니다. 1. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 2. 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. 사용예시 .container..

HTML chk1 chk2 chk3 chk4 radio1 radio2 radio3 radio4 CSS input[type="checkbox"], input[type="radio"] { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; -webkit-border-radius: 0; outline: none; } .list-btn { list-style: none; display: flex; flex-wrap: wrap; margin: -0.375rem -0.1875rem; } .list-btn > li { position: re..

버튼 속성 추가 aria-haspopup="dialog" 속성 추가, aria-controls 연결된 팝업의 id값 적용, 팝업 열림 유무에 따라 aria-expanded="false | true" 상태 값 변화 적용해주시면 됩니다. 참고: https://www.w3.org/TR/wai-aria-1.1/#tab Accessible Rich Internet Applications (WAI-ARIA) 1.1 A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational landmark, but may be nest..

플래시 애니메이션 기술과 웹 서버 애플리케이션 기술을 통합하여 기존 HTML보다 역동적이고 인터랙티브한 웹페이지를 제공하는 신개념의 플래시 웹페이지 제작 기술. 다양한 컴포넌트가 추가된 플래시(Flash)와 플렉스(Flex) 같은 멀티미디어 도구와 데이터베이스가 연동되는 단일 인터페이스를 통해 기존의 웹에서는 볼 수 없었던 다이나믹하고 편리한 고객 중심의 웹페이지가 제공된다. 2001년 매크로미디어사가 플래시 MX 저작툴을 통해 처음 선보인 이후 쇼핑몰이나 대고객 웹서비스, 포탈 등을 중심으로 널리 확산되고 있다. 원래 RIA는 웹 애플리케이션의 일종으로 통상적인 데스크톱 응용의 기능과 특징을 유사하게 갖는 형태를 말한다. MS의 원격스크립팅, SUN의 자바, 매크로미디어의 X-인터넷, AJAX 등도 R..

checkbox / radio CSS style input[type=checkbox]와 input[type=radio]는 안보이게 하고, label을 이용한 적용 예시 입니다. HTML 체크박스 Event Event1 라디오박스 1 2 파일첨부 첨부 CSS html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul,..

모바일 작업일 경우 많이 사용하게 되는 것 같습니다. length가 0일 경우 container 여백 제거 하고, 아닌 경우 container 여백 추가 합니다. if($('.bottom-fixed').length == 0) { $('.container').css('padding-bottom', 0); } else { $('.container').css('padding-bottom', '60px'); } 아래 코드를 응용해서 적용하고 싶음 코드를 넣으시면 되겠습니다. if ($('객체').length > 0) { //작동시키고 싶은 코드 } 한 페이지에 해당 아이디값을 가진 객체가 있을 때만 작동하게 할 때 if ( document.getElementByID('item') ) { //해당 아이템이 있을때..

디자이너분의 요청으로 포커스 라인을 제거를 하는 경우가 있습니다. 이렇게 a, input, button { outline: 0; } :focus { outline: none; } 이런 경우 브라우저 상에는 라인이 노출 되지 않게 됩니다. 시각장애인 등 키보드만 이용해 웹사이트를 이용 할 경우 키보드 요소를 노출 시켜 주어야 합니다. 크롬에 추가된 :focuis-visible이란 가상 클래스(pseudo class)를 통해 이를 디자인을 해치지 않고 구현할 수 있습니다. /* 키보드로 버튼에 포커스 시 */ button:focus-visible { outline: 3px solid #000; } /* 마우스, 터치로 버튼에 포커스 시 */ button:focus:not(:focus-visible) { ou..

요금은 포토샵 보다는 zeplin, figma 등을 이용해서 필요없을지 모르지만. 아직은 포토샵 사용자가 많기 때문에 제가 참고해서 많이 사용하는 초기 셋팅을 기록해 놓겠습니다. 포토샵 가이드&그리드 셋팅 https://lifenourish.tistory.com/92 포토샵이 느릴 때 최적화 방법(성능올리기) 포토샵을 사용하다보면 사진하나 여는 데도 하루종일 걸리는 경우가 있습니다. 나중에는 버벅대는 것도 모자라 메모리가 부족하다며 프로그램이 꺼지기까지 합니다. 작업물을 저장 안 해놨다 lifenourish.tistory.com * 스프라이트 이미지 정리

정보: Marking servlet spring as unavailable 7월 03, 2012 5:22:44 오후 org.apache.catalina.core.StandardContext loadOnStartup 심각: Servlet /Spring3MVC threw load() exception java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1711) at org.apache.catalina.loader.WebappClassLoader.loadClass(We..

eclipse에서 실행 했을경우 Failed to create the Java Virtual Machine 이란 에러가 나타난다면 아래처럼 해보세요. eclipse.ini 에서 -- 추가 -- -vm C:\Program Files\Java\jdk1.5\bin\javaw.exe -- 추가 -- -startup plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar --launcher.library plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.0.v20100503 -product org.eclipse.epp.package.jee.product --launcher.defaultAction openFile -..