JavaScript (81) 현재 목록에서 글 찾기 × 썸네일형 리스트형 Coding/JavaScript 프로그레스 바 만들어보기 여기서 만들 건 나우 로딩하면 나오는 프로그레스 바가 아니라, 스크롤 프로그레스 바다. 티스토리 블로그 중에 가끔 글을 읽을 때 화면 상단에 무슨 막대기같은 게 자라는 게 있는데, 그걸 해 볼거다.Referencehttps://doooodle932.tistory.com/177 [JS] 스크롤 프로그레스 바 만들기완성본 HTML CSS body { margin: 0; padding: 0; height: 1000px; /* 스크롤을 위해 임시로 추가 */ } .progressWrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #fff; } .bar { width: 0%; height: inherit; posi.. 2025. 9. 16. 02:35 Coding/JavaScript 드디어 추가되는 파일 불러오기 기능 https://koreanraichu.tistory.com/718 텍스트 에디터에 뭔가 추가해보자https://koreanraichu.tistory.com/711 아주 간단한 텍스트 에디터를 만들어보자카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋkoreanraichu.tistory.com여기서 이어진다. 텍스트 에디터를 만들면서 처음에 얘기했던 '텍스트 파일을 불러오면 제목에 파일명, 이름에 내용을 띄우는'걸 해 보자. 이건 일단 input이랑 FileReader API가 필요하다고 한다.저기 셀렉트박스 오른쪽에 보면 버튼 하나가 있다. 저건 사실 인풋 파일+라벨 붙여놓고 라벨에 CSS 준 거임. 아무튼 그럼. const fileO.. 2025. 9. 11. 00:44 Coding/JavaScript 텍스트 에디터에 뭔가 추가해보자 https://koreanraichu.tistory.com/711 아주 간단한 텍스트 에디터를 만들어보자카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋㅋㅋㅋ 여기서 더 들어가면 지피티 불러야됩니다…기본적인 기능(저장koreanraichu.tistory.com여기서 이어진다. 원래 추가하려던 건 파일 불러서 파일 이름을 제목으로 하는거였는데… 씁 그건 지피티 있어야되고… 오늘 추가해볼 건 그거다. 에디터 글꼴 변경하는 거. 페이지 전체 글꼴이 아니라, 글 작성하는 부분 글꼴(인풋이랑 텍스트에리어) 말이다.우선 이걸 하려면 먼저 할 일이 있다. 물론 HTML에 추가하는 것도 할 일인 건 맞는데, CSS단에서 바꾸려면 폰트 URL을 imp.. 2025. 8. 18. 23:39 Coding/JavaScript 아주 간단한 텍스트 에디터를 만들어보자 카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋㅋㅋㅋ 여기서 더 들어가면 지피티 불러야됩니다…기본적인 기능(저장하기)그니까 뭘 할거냐면, 여기서 글씨를 적고 하단의 저 버튼을 누르면 저 텍스트에리어 안의 글이 저장된다. 오케이? const textArea = document.querySelector('#textarea');const textSave = Document.querySelector('#save');일단 자바스크립트로 뭘 할라면 가져와야된다. textSave.addEventListener('click',()=>{ console.log(textArea.value);})이 블로그를 많이 봐오신 분들은 다 알겠지만, 여기까지.. 2025. 8. 8. 00:26 Coding/JavaScript 카카오톡 모아보내기를 대충 구현해보자 여러분들 카톡할때 사진 모아서 보내기 하시죠? 그걸 구현해볼건데, 이게 사진 장 수에 따라서 구성이 어떻게 되냐면 3장: 3*14장: 2*25장: 3*1+2*210장: 3*2+2*2이렇게 된다. 10은 3*3+1로 해도 되지 않아요? 그렇게 해도 되는데 카톡 모아서 보내기는 사진 한장만 보낼 때 빼고는 밑에 한장만 띡 안 띄우고 3배수+2배수로 한다. 아, 근데 사진을 매번 만들기도 힘들고 해서 일단은 div를 동적으로 만드는걸로 나 자신이랑 합의 보기로 했음. 오늘은 감도 안 잡혀서 걍 GPT한테 해달라고 했다. 고수 코더 여러분들은 따라하지 마세여...const photoContainer = document.querySelector('.photocontainer');const photoCount = .. 2025. 6. 27. 00:59 Coding/JavaScript 우리도 그 유리 효과인지 뭔지 해봅시다 거 이번에 애플이 iOS 26을 발표하면서 리퀴드 글래스인가 뭐시기인가를 도입한다고 했는데… 우리 쿡이는 19 20 21 22 23 24 25를 못 세나요? 왜 갑자기 26으로 건너뛰었음? 우리 쿡쪽이는 수학공부를 안 했나? 각설하고 우리도 그 리퀴드 글래스인지 뭔지 하는 그 효과 좀 내 보자. 근데 애플처럼 깔쌈하게 나올거라는 장담은 못 드림. 잊지 마십시오. 이 블로그 주인장은 뉴비입니다. 애플처럼 진짜 깔쌈한 유리 효과를 내고 싶으시면 여기 말고 다른 블로그를 가십시오.일단 유리 하면 투명하다. 아무것도 안 묻은 새삥 유리는 투명한데… 문제가 하나 있다. 이걸 그대로 CSS에 도입하게 되면, 배경에 뭐가 있을 경우 콘텐츠가 안 보일 위험이 있다. 정확히는 사용자가 콘텐츠에 집중을 못 할 위험이 크고,.. 2025. 6. 18. 22:33 Coding/JavaScript 자바스크립트로 음악 재생기를 만들어보자 오늘 그래서 뭘 해볼거냐... 두가지를 해볼건데 1. 당신 컴퓨터에 있는 음악 파일(예: *.mp3)을 열어서 2. 재생할거다. 끝이다. 나한테 많은 걸 기대하지 말라.파일 첨부를 할 수 있게끔 만들자컴퓨터에 있는 파일을 불러오려면 input type="file"을 써야 한다. 그리고 이 인풋을 통해 사용자가 음악 파일만 입력하도록 해야 하는데내가 아는 음악파일이 이거밖에 없으니 걍 이것만 함. 그리고 저 파일 첨부하는 거 그대로 올라와있는 거 뵈기 싫어서 라벨 연결하고 숨겼다. 본격적으로 자바스크립트에 들어가자올 것이 왔다. 아주 크나큰 난관이 예상되지만 아무튼... const musicUpload = document.querySelector('#uploader');var audio = new Audi.. 2025. 6. 7. 02:28 Coding/JavaScript 체크박스를 버튼처럼 만들어보자 왜 가끔 그런거 있다. 여러개(혹은 하나)를 선택하는 선택지인데 버튼같이 생긴 거. 그럼 이건 체크박스거나 라디오 버튼이라는 얘기인데, 이걸 체크박스로 만들 수 있나? 를 해볼거다. 이건 뭐 일단 체크박스를 만들고 input[type="checkbox"] { width: 100px; height: 33px; appearance: none; background-color: #ffffff; color: #000000; border: 1px solid #000000;}input[type="checkbox"]:checked { background-color: #000000; color: #ffffff;}appearance: none;을 줘서 기존의 네모 상자를 없애면 이런 식으로 커스터마이.. 2025. 5. 19. 23:51 Coding/JavaScript 토스트 창을 만들어보자 토스트 창이 뭐냐… 가끔 뭐 하다보면 뿅 하고 나오는 그거 맞다. 예를 들자면 메일을 보냈을 때, 화면 한 켠에서 보냈습니다! 하고 뿅 나왔다가 사라지는 그거 말이다.일단 들어가기 전에 생각해보자. 토스트창을 왜 쓰나요? 모달창도 있고 alert()로 알림을 띄울 수도 있는데 굳이 토스트 창을 만드는 이유가 뭘까? 모달창과 alert()로 띄우는 알림은 사용자가 상호작용을 해야 없어진다. 뭐 예를 들어서 오류가 났다, 그거는 내가 확인하고 상호작용 해야 하는거니까 모달이나 alert()를 쓰는 게 맞다. 오류가 났으면 오류메시지를 통해서 뭔 오류가 어떻게 터졌는지 보고 확인하고 문의를 하든 대처를 해야 하니까. 근데 그게 상대적으로 사소한거라 굳이 모달이나 alert()로 안 해도 되는 알림이라면? 예를.. 2025. 5. 17. 00:16 Coding/JavaScript 아이디 생성기에 복사버튼을 달아보자 https://koreanraichu.tistory.com/634 클립보드 버튼을 만들어보자오늘 해볼 건 그거다. 일반적으로 복사할때는 컨트롤씨 컨트롤브이를 눌러야 하는데, 가끔 다른 앱이나 사이트같은 거 이용하다 보면 클릭하면 복사가 되거나 옆에 있는 버튼을 누르면 복사되koreanraichu.tistory.com여기서 이어진다.기존의 아이디 생성기는 생성된 아이디를 직접 드래그해서 컨트롤씨를 눌러야 복사가 됐다. 솔직히 붙여넣는건 그렇다치고 복사까지 그렇게 한다고요? 아 귀차낭. 그래서 복사버튼을 추가해봤음. 그래서 전체적으로 어떻게 바꼈느냐… 1. 전체적인 디자인 변경2. 체크박스에 라벨 추가(이거 해두면 글자 눌러도 체크박스 선택됨)3. 입력창 포커스 상태 CSS 추가4. 생성되는 아이디에 복사버.. 2025. 5. 9. 01:19 Coding/JavaScript 클립보드 버튼을 만들어보자 오늘 해볼 건 그거다. 일반적으로 복사할때는 컨트롤씨 컨트롤브이를 눌러야 하는데, 가끔 다른 앱이나 사이트같은 거 이용하다 보면 클릭하면 복사가 되거나 옆에 있는 버튼을 누르면 복사되는 뭐 그런 게 있다. 그걸 해 볼거다.\그냥 이렇게 만들었음. 여기서 뭘 해볼거냐면 위에다가 아무거나 텍스트를 쓰고 저 클립보드 아이콘을 누르면 텍스트 상자에 입력한 게 복사가 되게 할 거다. const Text = document.querySelector('#text');const copyButton = document.querySelector('#button');어디갑니까 가져와야지. 우리야 컨트롤씨 컨트롤브이 하면 다 되니까 복붙은 쉽다고 생각할 수 있지만, 사실 복붙을 하려면 컴퓨터 입장에서는 클립보드에 적어뒀다가.. 2025. 5. 8. 23:45 카테고리 없음 CSS로 스크롤바를 내 입맛대로 주물러보자 우리가 웹 서핑을 하다가 흔히 보는 스크롤바는 이렇게 생겼다. 근데 가끔 코딩 좀 하시는 분들이 꾸며놓은 블로그나 다른 사이트를 보면 스크롤바 디자인이 저렇게 생기지 않은 경우가 있다. 당장 내 티스토리 블로그 스크롤바도 저거랑은 다르게 생겼잖음. 이게 CSS로 스크롤바 속성을 조절해서 그런거다. See the Pen CSS scrollbar by koreanraichu (@koreanraichu) on CodePen.코드는 여기 가서 볼 수 있다. .scroll2::-webkit-scrollbar { background-color: #000000; }.scroll2::-webkit-scrollbar-thumb { background-color: #eeeeee;}.scroll2::-webkit-sc.. 2025. 4. 28. 23:36 이전 1 2 3 4 5 ··· 7 다음
