https://koreanraichu.tistory.com/718 텍스트 에디터에 뭔가 추가해보자https://koreanraichu.tistory.com/711 아주 간단한 텍스트 에디터를 만들어보자카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋkoreanraichu.tistory.com여기서 이어진다. 텍스트 에디터를 만들면서 처음에 얘기했던 '텍스트 파일을 불러오면 제목에 파일명, 이름에 내용을 띄우는'걸 해 보자. 이건 일단 input이랑 FileReader API가 필요하다고 한다.저기 셀렉트박스 오른쪽에 보면 버튼 하나가 있다. 저건 사실 인풋 파일+라벨 붙여놓고 라벨에 CSS 준 거임. 아무튼 그럼. const fileO..

https://koreanraichu.tistory.com/711 아주 간단한 텍스트 에디터를 만들어보자카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋㅋㅋㅋ 여기서 더 들어가면 지피티 불러야됩니다…기본적인 기능(저장koreanraichu.tistory.com여기서 이어진다. 원래 추가하려던 건 파일 불러서 파일 이름을 제목으로 하는거였는데… 씁 그건 지피티 있어야되고… 오늘 추가해볼 건 그거다. 에디터 글꼴 변경하는 거. 페이지 전체 글꼴이 아니라, 글 작성하는 부분 글꼴(인풋이랑 텍스트에리어) 말이다.우선 이걸 하려면 먼저 할 일이 있다. 물론 HTML에 추가하는 것도 할 일인 건 맞는데, CSS단에서 바꾸려면 폰트 URL을 imp..

카테고리를 보시면 아시겠지만, 자바스크립트로 할 거다. 근데 일단 구현할 기능이 쓴 걸 저장하는 것 말고 없음… ㅋㅋㅋㅋㅋㅋ 여기서 더 들어가면 지피티 불러야됩니다…기본적인 기능(저장하기)그니까 뭘 할거냐면, 여기서 글씨를 적고 하단의 저 버튼을 누르면 저 텍스트에리어 안의 글이 저장된다. 오케이? const textArea = document.querySelector('#textarea');const textSave = Document.querySelector('#save');일단 자바스크립트로 뭘 할라면 가져와야된다. textSave.addEventListener('click',()=>{ console.log(textArea.value);})이 블로그를 많이 봐오신 분들은 다 알겠지만, 여기까지..

여러분들 카톡할때 사진 모아서 보내기 하시죠? 그걸 구현해볼건데, 이게 사진 장 수에 따라서 구성이 어떻게 되냐면 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 = ..

이번에 애플이 iOS 26을 발표하면서 리퀴드 글래스인가 뭐시기인가를 도입한다고 했는데… 우리 쿡이는 19 20 21 22 23 24 25를 못 세나요? 왜 갑자기 26으로 건너뛰었음? 우리 쿡쪽이는 수학공부를 안 했나? 각설하고 우리도 그 리퀴드 글래스인지 뭔지 하는 그 효과 좀 내 보자. 근데 애플처럼 깔쌈하게 나올거라는 장담은 못 드림. 잊지 마십시오. 이 블로그 주인장은 뉴비입니다. 애플처럼 진짜 깔쌈한 유리 효과를 내고 싶으시면 여기 말고 다른 블로그를 가십시오.일단 유리 하면 투명하다. 아무것도 안 묻은 새삥 유리는 투명한데… 문제가 하나 있다. 이걸 그대로 CSS에 도입하게 되면, 배경에 뭐가 있을 경우 콘텐츠가 안 보일 위험이 있다. 정확히는 사용자가 콘텐츠에 집중을 못 할 위험이 크고,..

오늘 그래서 뭘 해볼거냐... 두가지를 해볼건데 1. 당신 컴퓨터에 있는 음악 파일(예: *.mp3)을 열어서 2. 재생할거다. 끝이다. 나한테 많은 걸 기대하지 말라.파일 첨부를 할 수 있게끔 만들자컴퓨터에 있는 파일을 불러오려면 input type="file"을 써야 한다. 그리고 이 인풋을 통해 사용자가 음악 파일만 입력하도록 해야 하는데내가 아는 음악파일이 이거밖에 없으니 걍 이것만 함. 그리고 저 파일 첨부하는 거 그대로 올라와있는 거 뵈기 싫어서 라벨 연결하고 숨겼다. 본격적으로 자바스크립트에 들어가자올 것이 왔다. 아주 크나큰 난관이 예상되지만 아무튼... const musicUpload = document.querySelector('#uploader');var audio = new Audi..

왜 가끔 그런거 있다. 여러개(혹은 하나)를 선택하는 선택지인데 버튼같이 생긴 거. 그럼 이건 체크박스거나 라디오 버튼이라는 얘기인데, 이걸 체크박스로 만들 수 있나? 를 해볼거다. 이건 뭐 일단 체크박스를 만들고 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;을 줘서 기존의 네모 상자를 없애면 이런 식으로 커스터마이..

토스트 창이 뭐냐… 가끔 뭐 하다보면 뿅 하고 나오는 그거 맞다. 예를 들자면 메일을 보냈을 때, 화면 한 켠에서 보냈습니다! 하고 뿅 나왔다가 사라지는 그거 말이다.일단 들어가기 전에 생각해보자. 토스트창을 왜 쓰나요? 모달창도 있고 alert()로 알림을 띄울 수도 있는데 굳이 토스트 창을 만드는 이유가 뭘까? 모달창과 alert()로 띄우는 알림은 사용자가 상호작용을 해야 없어진다. 뭐 예를 들어서 오류가 났다, 그거는 내가 확인하고 상호작용 해야 하는거니까 모달이나 alert()를 쓰는 게 맞다. 오류가 났으면 오류메시지를 통해서 뭔 오류가 어떻게 터졌는지 보고 확인하고 문의를 하든 대처를 해야 하니까. 근데 그게 상대적으로 사소한거라 굳이 모달이나 alert()로 안 해도 되는 알림이라면? 예를..

https://koreanraichu.tistory.com/634 클립보드 버튼을 만들어보자오늘 해볼 건 그거다. 일반적으로 복사할때는 컨트롤씨 컨트롤브이를 눌러야 하는데, 가끔 다른 앱이나 사이트같은 거 이용하다 보면 클릭하면 복사가 되거나 옆에 있는 버튼을 누르면 복사되koreanraichu.tistory.com여기서 이어진다.기존의 아이디 생성기는 생성된 아이디를 직접 드래그해서 컨트롤씨를 눌러야 복사가 됐다. 솔직히 붙여넣는건 그렇다치고 복사까지 그렇게 한다고요? 아 귀차낭. 그래서 복사버튼을 추가해봤음. 그래서 전체적으로 어떻게 바꼈느냐… 1. 전체적인 디자인 변경2. 체크박스에 라벨 추가(이거 해두면 글자 눌러도 체크박스 선택됨)3. 입력창 포커스 상태 CSS 추가4. 생성되는 아이디에 복사버..

오늘 해볼 건 그거다. 일반적으로 복사할때는 컨트롤씨 컨트롤브이를 눌러야 하는데, 가끔 다른 앱이나 사이트같은 거 이용하다 보면 클릭하면 복사가 되거나 옆에 있는 버튼을 누르면 복사되는 뭐 그런 게 있다. 그걸 해 볼거다.\그냥 이렇게 만들었음. 여기서 뭘 해볼거냐면 위에다가 아무거나 텍스트를 쓰고 저 클립보드 아이콘을 누르면 텍스트 상자에 입력한 게 복사가 되게 할 거다. const Text = document.querySelector('#text');const copyButton = document.querySelector('#button');어디갑니까 가져와야지. 우리야 컨트롤씨 컨트롤브이 하면 다 되니까 복붙은 쉽다고 생각할 수 있지만, 사실 복붙을 하려면 컴퓨터 입장에서는 클립보드에 적어뒀다가..

일단 ::selection이 뭐냐면 이거다. 이게 뭐냐고? 마우스로 긁었을 때의 색깔을 ::selection을 통해 줄 수 있다. 기본은 파란 배경에 흰색 글씨인데, 가끔 코딩 좀 하시는 분들 블로그 가 보면 텍스트를 마우스로 긁었을 때 배경색이 다른 것을 볼 수 있다. 이것도 보면 위랑 색깔이 다르죠? 괴담수사대는 일부러 빨간색+어두운색 기반으로 색깔을 정해서 ::selection 배경이 빨간색이다. 이런 효과를 줄 때 배경색은 걍 CSS 백그라운드 주면 되고 글자색은 color 주면 된다. ::selection { background-color: #cc0000; color: #ffffff;}이렇게 말이지. CSS는 저렇게 ::붙어있는 게 있는데 다른건 나중에 또 알아봅시다. 참고로 괴담수..

우리가 해 볼 게 위 그림 두 장에 나와있다. 머스크가 인수해서 똥을 싸제끼고 있는 트위터나 마스토돈, 블루스카이에는 한 번에 올릴 수 있는 내용에 글자수 제한이 있다. 트위터는 140자, 마스토돈은 500자(하이퍼스페이스 인스턴스), 블루스카이는 300자. 오늘은 입력창의 글자수를 실시간으로 세 보는 걸 할 건데, 해볼 게 총 두가지이다. 첫번째는 그냥 입력창에 몇 글자가 입력됐는지를 세 주는거고, 두번째가 위 두 장의 사진에 나와있는 n자 제한에서 n자가 남았는지 표시해보는 것이다. 아, 저 원은 아쉽게도 구현을 못 한다. 내 능력 밖임.입력창의 글자 수를 나타내보자그러니까 일단 남은 글자수는 모르겠고 몇 글자 썼는지 실시간으로 띄우는 것 먼저 해 보자. 얘를 해야 밑에께 좀 더 쉬워진다. 뭐 해요,..