position:fixed와 transform

position:fixed와 transform

결론부터 간단히 짚고 넘어가자면, transform으로 위치를 옮긴 요소의 자식은 position: fixed를 써도 고정되지 않습니다. https://www.w3.org/TR/css-transforms-1/#transform-rendering 여기서 상세한 설명을 읽으실 수 있습니다. 요소에 배경을 넣으면 글자가 읽기 힘들어져서, 전 보통 이미지의 opacity를 낮추고 배경을 검은색으로 만든 뒤, 글자를 흰색으로 변경합니다. 그때, background-image의 opacity 조절을 위해 새 자식 요소를 만들고, 그 요소의 opacity를 조절합니다. 이번에 드로워의 배경도 똑같이 만들다 문제에 봉착했는데, 드로워를 스크롤 하면 자식 요소에 부여한 position: fixed가 position: a..
Parallax Scroll 플러그인

Parallax Scroll 플러그인

출처 : 위키피디아 Parallax Scroll(패럴렉스 스크롤)은 위 움짤처럼 페이지를 스크롤 할 때 페이지와 배경 이미지 간 시차를 만들어서 움직이는듯한 느낌을 주는 것을 일컫습니다. 웹 페이지에 적용하기 위해 간단한 스크립트를 제작해봤습니다. 라이브 데모 & 설명서 : https://marshall-ku.github.io/Parallax-Scroll/깃허브 : https://github.com/marshall-ku/Parallax-Scroll 일전에 소개한 모바일 기기에서 background-attachment:fixed를 사용하는 방법(링크)와 함께 사용해, 모바일에서도 PC와 똑같이 동작하도록 했습니다. 위 사진처럼 요소의 크기를 class 하나로 변경하실 수 있고, 이미지의 추가나 이미지에 타..
[자바스크립트] 랜덤으로 강력한 비밀번호 만들기

[자바스크립트] 랜덤으로 강력한 비밀번호 만들기

결과물 : https://marshall-ku.github.io/Strong-Password-Generator/ 깃허브 : https://github.com/marshall-ku/Strong-Password-Generator 무작위로 섞인 스트링을 만드는 스크립트입니다. 크롬에서 특정 사이트에 회원가입을 하려 하면 어차피 크롬에 저장되니 어려운 패스워드 쓰라면서 패스워드를 만들어주길래, 재밌는 기능 같아 만들어봤습니다. document.getElementById("psbtn").addEventListener("click", function () { const pwoutput = document.getElementById("password"); let password = "", char, chars = "..
자바스크립트 키코드 확인하기

자바스크립트 키코드 확인하기

https://marshall-ku.github.io/Javascript-Keycode/ 자바스크립트 "keydown", function 등을 사용하는 키 코드나 키가 헷갈릴 때 사용할 수 있는 페이지입니다./*원활한 사용을 위해 원래 사용하시던 단축키는 대부분 비활성화했습니다.ctrl + w 같은 건 잘 먹힙니다.*/ 접속해서 아무 키나 누르시면 event.keyevent.locationevent.whichevent.code 네 가지 옵션을 확인하실 수 있습니다. event.which 에 적힌 내용이 event.keyCode 등과 동일하다고 보시면 됩니다.하지만 MDN에서 확인해보시면, 더는 사용하지 말라 해놨으니 이왕이면 다른 옵션들을 사용하시는 걸 추천합니다. 뭐 굳이 키 코드 외울 필요 없이 ev..
[자바스크립트] 팔린드롬인지 확인하기

[자바스크립트] 팔린드롬인지 확인하기

간단한 스크립트를 통해 받은 스트링이 팔린드롬(palindrome)인지 확인합니다. // 팔린드롬(회문) : 거꾸로 읽어도 내용이 같은 낱말 혹은 문장 palindrome = str => { const blank = / /g, // 공백 special = /[`~!()-?;:'",.\{\}\[\]\\\/]/g, //문장 부호 string = String(str).toLocaleLowerCase().replace(blank, "").replace(special, ""), // 스트링으로 변환 후 소문자로 변환하고 공백과 문장 부호 제거 reverse = string.split("").reverse().join(""); // 스트링 순서 뒤집음 return (string === reverse)} palind..
[자바스크립트] 스크롤 인디케이터 만들기

[자바스크립트] 스크롤 인디케이터 만들기

사용자가 글을 얼마나 읽었는지 표시해주는 막대를 화면에 첨부하는 방법입니다. 물론 옆에 있는 스크롤 바로도 알 수 있는 정보지만, 디자인도 훨씬 간단하게 수정이 가능할뿐더러, 이 페이지처럼 글에도 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 =..
[자바스크립트] 댓글에 이미지, 비디오, 유튜브 등 첨부하기

[자바스크립트] 댓글에 이미지, 비디오, 유튜브 등 첨부하기

내용 자체는 앞서 한 포스트에서 크게 바뀌지 않았습니다만, 조금 더 알아보고 수정하기 쉽게 재작업했습니다. 텍스트 내에서 url을 찾고, 그 url이 이미지인지, 비디오인지, 오디오인지, 유튜브 비디오인지 판별해서 적절한 태그로 감싸줍니다. 간단하게 댓글에 이미지 비디오 등을 넣고 싶으실 때 사용하시면 됩니다. function autowrap() { const 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 이미지..
[자바스크립트, CSS] 스크롤 밖으로 나가면 비디오 고정하기

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

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

[자바스크립트] 간단한 계산기 만들기

아는 동생한테 html, css 적당히 가르쳐주고 이제 javascript 차롄데...자바스크립트를 배우니 바로 계산기부터 만든다더라고요. C를 배워서 그런가... 당연히 하루 배워서 계산기 만들기는 무리였고..제가 짜봤습니다. See the Pen Simple Calculator by Marshall (@marshall-ku) on CodePen. 간단한 작동만 테스트한 거라, 모든 상황에서 잘 작동할진 모르겠습니다. Javascriptconst input = document.getElementsByClassName("input")[0], tmp = document.getElementsByClassName("tmp")[0]; function i_empty() { input.innerText = ""} ..
1 2 3 4 5 6
블로그 이사갔습니다 (클릭)