OK DDODDO LAB

HTML 1 2 3 4 5 ◀ ▶ CSS * { margin:0; padding:0; } li { list-style: none; } .slide { /* layout */ display: flex; flex-wrap: nowrap; /* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */ overflow: hidden; /* position */ /* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offs..

chart.js를 사용하면 되는데 안쓴다고 하여 간단하게 작업한 내용을 기록해 보겠습니다. HTML 기본 24 CSS /* chart */ .chart-wrap { padding: 5px; display: flex; font-size: 12px; } .chart-wrap .chart-sec .chart-desc > p {margin: 0;} .chart-wrap .chart-sec .chart-box .chart-bar { min-height: 12px; width: 70px; border-radius: 6px; margin: 0 auto; background: linear-gradient(to top, #6352ff 0%, #6b95ff 100%); } JS //차트 퍼센트 비율 구하기 $(functi..

모바일 작업일 경우 많이 사용하게 되는 것 같습니다. 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') ) { //해당 아이템이 있을때..

서로다른 이미지 깜박이며 노출 HTML CSS body { background-color:#111; } #wrap{ margin:30px auto; width:600px; } .fade_container { position:relative; width:600px; height:350px; border:2px solid gold; } .fade_container img{ position:absolute; width:100%; height:100%; } .fade_container img:nth-child(1){ background-color:#fff; } .fade_container img:nth-child(2){ background-color:red; } .fade_container img:nth-chi..

갤러리 작업할때 이미지를 새창으로 띄우는 경우가 있는데 이런 경우 사이즈가 다 달라서 애먹을 적이 있었습니다. 검색해보니 이렇게 사용하는 경우도 있어서 저도 사용 후 기록합니다. HTML 팝업 확인 > JS function fn_control(img){ foto1= new Image(); foto1.src=(img); Controlla(img); } function Controlla(img){ if((foto1.width!=0)&&(foto1.height!=0)){ viewFoto(img); }else{ funzione="Controlla('"+img+"')"; intervallo=setTimeout(funzione,20); } } function viewFoto(img){ largh=foto1.widt..