Hello 100A

간단하게 자주 사용하는 슬라이드 갤러리입니다. https://unpkg.com/swiper/swiper-bundle.css https://unpkg.com/swiper/swiper-bundle.min.js 세팅 하시는거 잊지마시고, js에서 spaceBetween 는 사이간격을 slidesPerView로 몇개씩 보여주고 싶은지 설정해주면 됩니다. 이미지 비율은 이미지 크기에 상관없이 일정하게 나오게 하기위해 padding-bottom을 이용해 비율을 정했습니다. 100% - 가로와 세로 비율 1:1 50% - 가로와 세로 비율 1:0.5 로 보면 됩니다. loop:true 는 제가 html에 작성한 슬라이드는 5개인데 그 뒤로 복제해 가며 계속해서 슬라이드가 될 수 있게 해줍니다. transition을 ..

홈페이지의 배너에 자주 사용되는 scroll down 기능입니다. keyframe을 사용하여 자연스럽게 계속 반복 애니메이션 되도록 작업했습니다. css의 scroll-behavior 를 이용하여 scroll down을 클릭시에 부드럽게 아래 섹션으로 스크롤 이동 되도록 했습니다. See the Pen Untitled by baekah (@baekah) on CodePen.

코드펜으로 작성했습니다. https://codepen.io/baekah/pen/GRENBwJ See the Pen Untitled by baekah (@baekah) on CodePen.

mb_strlen 함수 문자열의 길이 값 구하는 함수 echo mb_strlen(‘test’); //4 를 출력 substr 문자열 위치 값 알아내기 echo substr(’test’, 0, 1); //t 를 출력 substr 함수는 시작 위치가 0임

const area = { "동서울":["관악구", "강남구", "성동구","중량구"], "북서울":["강북구", "성북구", "도봉구", "노원구"] }; let index = []; for (var x in area) { index.push(x); } index.sort(function (a, b) { return a == b ? 0 : (a > b ? 1 : -1); }); document.querySelector('.text').innerText=area[index[1]][3];

마우스 오버시 수직으로 flip 되는 아주아주 간단한 css소스 입니다. HTML FRONT BACK CSS .content{ width:500px; height:100vh; background:#333; margin:0 auto; } .circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; perspective: 600px; } .circle .front, .circle .back{ position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility: hidden; border-radius:50px;..

사이드바 모바일이나 반응형 웹에서 자주 사용하는 사이드바입니다. 사이드바는 css 만으로 동작이 되니 사이드바만 사용시에는 js파일이 없으셔도 됩니다. 아코디언메뉴는 jquery로 작업했으며 1.4.4로 작업했습니다. 사이드바 width는 70%이며 사이즈 변경시에는 .sidebar 에서 width와 left 값 둘다 변경하셔야합니다 html코드입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 css코드입니다. .content{height:100vh; background:#ccc; margin:0 auto; position:relative;} ..

초간단 progress bar 소스입니다. Click me! .progress-area{ width:500px; height:50px; background:#e1e1e1; border:3px solid #b1b1b1; margin:30px; position:relative; } .progress{ position:absolute; width:100%; height:100%; left:0; top:0; } .progress.on{ background:#b1b1b1; animation:progress 3s linear; animation-fill-mode:forwards; } .btn{ width:200px; height:50px; background:#b1b1b1; text-align:center; lin..

javascript로 짠 간단한 타이머 프로그램입니다. Timer Timer 시작 일시정지 let txtArea = document.querySelector('h2'); let startEl = document.querySelector('.startbtn'); let stopEl = document.querySelector('.stopbtn'); let state = false; let timer; let count=0; let timerId; timer = { run: function (){ clearTimeout(timerId); txtArea.textContent = count++; timerId = setTimeout(timer.run, 1000); }, stop: function(){ clear..

jQuery로 만든 초간단 아코디언 메뉴입니다. 다운 버튼을 누르면 display:none 시켜놓은 대메뉴에 포함된 서브메뉴가 자연스럽게 슬라이드 다운되며 나옵니다. 내용도 간단하고 소스도 단순하니 긴 설명없이 소스 올려두겠습니다. HTML 소스 입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 CSS 소스입니다. body{ padding:50px; } .cate{ width:300px; position:relative; border-style:solid; border-width:1px 1px 0 1px; border-color:#000; } ..