[JS] 스크롤 인디케이터 만들기
[JS] 스크롤 인디케이터 만들기

사용자가 글을 얼마나 읽었는지 표시해주는 막대를 화면에 첨부하는 방법입니다. 물론 옆에 있는 스크롤 바로도 알 수 있는 정보지만, 디자인도 훨씬 간단하게 수정이 가능할뿐더러, 이 페이지처럼 글에도 Infinite-scroll을 적용했다면 더더욱 필요한 기능입니다. 완성본 See the Pen Scroll Indicator by Marshall (@marshall-ku) on CodePen. HTML CSS#scroll_container { position: absolute; top: 0; left: 0; width: 100%; height: 3px} #scroll { width: 100%; height: 3px; background: #000} Vanilla JSfunction si() { var a =..

[JS] 댓글에 이미지, 비디오, 유튜브 등 첨부하기
[JS] 댓글에 이미지, 비디오, 유튜브 등 첨부하기

내용 자체는 앞서 한 포스트에서 크게 바뀌지 않았습니다만, 조금 더 알아보고 수정하기 쉽게 재작업했습니다. 텍스트 내에서 url을 찾고, 그 url이 이미지인지, 비디오인지, 오디오인지, 유튜브 비디오인지 판별해서 적절한 태그로 감싸줍니다. 간단하게 댓글에 이미지 비디오 등을 넣고 싶으실 때 사용하시면 됩니다. function autowrap() { var c = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, // 링크 찾기 i = /\.(?:jpe?g(:large)?|gif|png(:large)?|svg)$/i, // 이미지 x = /(?:\?original)$/i, // 티스토리 ?original 이미지 j..

[JS, CSS] 스크롤 밖으로 나가면 비디오 고정하기
[JS, CSS] 스크롤 밖으로 나가면 비디오 고정하기

스크롤을 내려보세요! 비디오가 화면에 보이지 않으면, 좌측 하단에 position:fixed인 상태로 고정해줍니다. HTML에 첨부(embed)하는 비디오에 사용할 수 있는 스크립트입니다. 유튜브, 네이버 TV, 카카오 TV 등 꽤 많은 비디오 공유 사이트에서 퍼온 비디오에 정상적으로 작동합니다. Iframe을 반응형으로 감싸는 스크립트(링크)가 있어야 작동합니다. Github Codepen 깃허브와 코드펜 모두 Iframe을 반응형으로 감싸는 스크립트와 함께 들어있습니다. 참고하셔서 잘 적용해주세요. 비디오가 하나뿐일 때만 작동하는 스크립트입니다. 이 스크립트가 작동하지 않았으면 하는 페이지엔 을 넣으시면 스크립트가 작동하지 않습니다. See the Pen Sticky Youtube Video by M..

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

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

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

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이나 체크박스의 위치를 변경하셨다면, 부모 요소를 잘 확인하셔야 제대로 작동합니다.

[JS, CSS] 유튜브 등의 비디오를 반응형으로 감싸기
[JS, 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: ..

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