[Javascript] 간단한 계산기 만들기
[Javascript] 간단한 계산기 만들기

아는 동생한테 html, css 적당히 가르쳐주고 이제 javascript 차롄데...jQuery 배우니 바로 계산기부터 만든다더라고요. C를 배워서 그런가... 당연히 하루 배워서 계산기 만들기는 무리였고..제가 짜봤습니다. See the Pen Simple Calculator by Marshall (@marshall-ku) on CodePen. 간단한 작동만 테스트한 거라, 모든 상황에서 잘 작동할진 모르겠습니다. 아래는 바닐라 스크립트로 짠 스크립트입니다. 귀찮아서 버튼에 애니메이션 주는 건 생략했습니다.12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596..

[Javascript] 생일까지 남은 날짜 계산하기
[Javascript] 생일까지 남은 날짜 계산하기

Github Demo 자바 스크립트를 이용해 생일까지 남은 날짜를 계산하는 방법입니다. 날짜만 설정하면 D-day에 Happy Birthday!란 메시지를 출력해주고, D-day 다음 날부터는 자동으로 내년으로 D-day를 변경합니다. 스크린 샷에서 아실 수 있듯, 초 단위로 표시해주며 0.5초마다 html의 내용을 갱신합니다. 굳이 초 단위는 필요 없으시면 초와 관련된 js를 제거하시고 갱신 주기를 늘려주세요. HTML 남았습니다! JS var v = new Date().getFullYear(), z = new Date("Apr 23, " + v + " 00:00:00").getTime(), x = setInterval(function() { var f = new Date().getTime(), g =..

[CSS]그래프 만들기
[CSS]그래프 만들기

css를 이용한 그래프입니다. 페이지를 불러왔을 때 너비 0부터 본인의 너비까지 확장되는 애니메이션이 있습니다. 5부터 100까지 5의 배수들만 작업했습니다. See the Pen Graph by Marshall (@marshall-ku) on CodePen. html에선 item1등의 class, css에선 li.item1::after 등을 수정하셔서 사용하시면 됩니다.

CSS만 이용한 사이드바 만들기
CSS만 이용한 사이드바 만들기

css만 이용한 사이드바입니다. 드로어(Drawer)라고도 부르고 사이드바라고도 부르고 뭐라 불러야 할 질 모르겠네요..;; 보통 css를 이용한 사이드바는 버튼을 클릭하면 열고 닫히는 게 끝인 게 많은데, 아래 코드를 이용하시면 사이드바가 아닌 공간 아무 곳이나 클릭해도 사이드바가 사라집니다. See the Pen Pure CSS Drawer by Marshall (@marshall-ku) on CodePen. 여담이지만, 첫 코드펜 게시글입니다 ㅎㅎ css에서 ~ 의 의미는, 앞 요소와 뒷 요소가 같은 부모 요소를 갖고 있으면 물결표 앞 요소의 뒤에 이어지는 요소를 선택합니다. 만약 openbtn이나 체크박스의 위치를 변경하셨다면, 부모 요소를 잘 확인하셔야 제대로 작동합니다.

[Javascript, CSS] 유튜브 등의 비디오를 반응형으로 감싸기
[Javascript, CSS] 유튜브 등의 비디오를 반응형으로 감싸기

앞서 작성한 요소를 일정 비로 감싸기와 유튜브 세로 영상 퍼오기를 확인하시면 더 간단히 이해하실 수 있습니다.Github 링크 가장 기본적인 16:9로 감싸는 건 유튜브 뿐 아니라 카카오 TV, 네이버 TV 등도 지원합니다.하지만 9:16 비디오, 4:3 비디오, 1:1 비디오 등은 유튜브에서밖에 테스트하지 않았습니다. 작동 확인은 여기서 하시거나 아래 이미지 목록을 펼쳐주세요. JS1234567891011121314151617181920$("iframe").each(function() { var a = $(this).attr("width"), b = $(this).attr("height"); if (a / b === 16 / 9) { $(this).wrap("") } if (a / b === 9 / 1..

모바일 기기에서 background-attachment:fixed 사용하기
모바일 기기에서 background-attachment:fixed 사용하기

라이브 데모 background-attachment:fixed에는 꽤 고질적인 문제가 있습니다. 우선 모바일 브라우저에선 사용할 수 없고, 가끔 덜컹거리고 버벅이며 스크롤이 내려간단 점입니다. 두 가지 단점을 모두 해결한 방법을 소개해 드리려 합니다. HTML CSS.first, .second { width: 100%; height: 100vh; position: relative} .bg-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .bg { position: fixed; display: block; top: 0; left: 0; width: 100%; height: ..

유튜브 썸네일 추출하기
유튜브 썸네일 추출하기

추출 미리보기 유튜브 썸네일을 자동으로 가져오는 스크립트를 만들긴 했지만, 포털 사이트 등에서 영상을 검색하면 아무런 이미지도 없는 것처럼 보이기 때문에 만든 스크립트입니다. https://github.com/marshall-ku/Youtube-Thumbnail-Saver에도 정리해놨습니다. 사용 방법 추출하고 싶은 영상의 주소나, '공유'를 눌러 나오는 주소를 복사합니다. '추출'버튼을 클릭한 후 내려받기를 클릭합니다. 이미지를 다른 이름으로 저장하시면 됩니다.

svg로 스크롤 인디케이터 만들기
svg로 스크롤 인디케이터 만들기

svg의 stroke-dashoffset 값을 통해 만드는 스크롤 인디케이터입니다. 스크롤 해보세요! HTML123 Colored by Color Scriptercs path의 내용은 별로 중요하지 않고, "scroll-indicator"란 id와 'stroke, stroke-width, fill 세 가지 옵션이 중요합니다. JS12345678var a = document.getElementById("scroll-indicator"), b = a.getTotalLength(); a.style.strokeDasharray = b, a.style.strokeDashoffset = b, window.addEventListener("scroll", si); function si() { var c = (docum..

[Javascript] Iframe 내부 요소 수정하기
[Javascript] Iframe 내부 요소 수정하기

Iframe으로 가져오는 요소들은 css로 백날 건드려봐야 수정할 수 없습니다. 하지만, 간단한 스크립트를 통해 내부에 있는 요소들을 수정 / 제거할 수 있습니다. Loading... 예를 위해 https://publish.twitter.com/ 에서 불러온 트위터 타임라인을 수정해보겠습니다. 550px로 높이를 변경하는 커스터마이징만 하고 가져온 타임라인입니다. Loading... 수정된 타임라인입니다. 상단과 하단에 고정돼있던 header와 footer를 제거하고, 크롬에서 스크롤바의 모양을 변경했습니다. HTML (예시)1cs JS123$("#iframe").one("load", function() { $("#iframe").contents().find(/*something*/).remove()})..

스킨/스킨 목록
잡담
갤러리