인생은 언제나 Try and Except
close
프로필 배경
프로필 로고

인생은 언제나 Try and Except

  • 분류 전체보기 (677) N
    • 잡담 (313) N
      • 단문 (106)
      • 장문 (32)
      • 그림있음 (129) N
      • 나야, 언박싱 (45) N
    • Coding (179)
      • 코딩잡담 (22)
      • JavaScript (56)
      • Python (81)
      • R (20)
    • BOJ (116)
      • [BOJ] Python (116)
    • 잔머리 엑셀 (68)
  • 홈
  • 태그
  • 방명록
카카오톡 모아보내기를 대충 구현해보자

카카오톡 모아보내기를 대충 구현해보자

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

  • format_list_bulleted JavaScript
  • · 2025. 6. 27.
  • textsms
우리도 그 유리 효과인지 뭔지 해봅시다 거

우리도 그 유리 효과인지 뭔지 해봅시다 거

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

  • format_list_bulleted JavaScript
  • · 2025. 6. 18.
  • textsms
자바스크립트로 음악 재생기를 만들어보자

자바스크립트로 음악 재생기를 만들어보자

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

  • format_list_bulleted JavaScript
  • · 2025. 6. 7.
  • textsms

체크박스를 버튼처럼 만들어보자

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

  • format_list_bulleted JavaScript
  • · 2025. 5. 19.
  • textsms

토스트 창을 만들어보자

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

  • format_list_bulleted JavaScript
  • · 2025. 5. 17.
  • textsms
아이디 생성기에 복사버튼을 달아보자

아이디 생성기에 복사버튼을 달아보자

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

  • format_list_bulleted JavaScript
  • · 2025. 5. 9.
  • textsms
클립보드 버튼을 만들어보자

클립보드 버튼을 만들어보자

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

  • format_list_bulleted JavaScript
  • · 2025. 5. 8.
  • textsms
CSS로 스크롤바를 내 입맛대로 주물러보자

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..

  • format_list_bulleted 카테고리 없음
  • · 2025. 4. 28.
  • textsms
::selection 색상을 부분부분 다르게 할 수 있을까?

::selection 색상을 부분부분 다르게 할 수 있을까?

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

  • format_list_bulleted JavaScript
  • · 2025. 4. 23.
  • textsms
글자 수 카운터를 만들어보자

글자 수 카운터를 만들어보자

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

  • format_list_bulleted JavaScript
  • · 2025. 4. 8.
  • textsms
모바일 뷰포트 확인하는 법(feat. 개발자 도구)

모바일 뷰포트 확인하는 법(feat. 개발자 도구)

https://koreanraichu.tistory.com/572 미디어쿼리에 대해 알아보자미디어쿼리? 그게 뭐죠? 에 대해 설명하기 전에 한번 잘 생각해보자. 진짜 완전 찐으로 구식인 웹사이트... 그니까 막 쌍팔년도에 만들어져서 방치된 스멜이 폴폴 풍기면서 들어koreanraichu.tistory.com이 글에서 미디어쿼리로 모바일에서 UI 배치를 바꿔봤는데… 읽으면서 에이 뭐 뷰포트 뭐 창 줄여서 보지 이런 분들도 계셨겠지만 아니 저거 어케봄??? 이런 분들도 계셨을 거라 생각한다. 그거 어케 하는지 알려드림.  얘까지 한 글에 쓰면 내용이 번잡시러워서 포스트 분리한겁니다.다들 알다시피 브라우저에서 F12키를 누르면 개발자도구가 열린다.F12 눌렀는데 안열려요? 오페라 쓰신다고요? 오페라는 단축키가..

  • format_list_bulleted JavaScript
  • · 2025. 1. 24.
  • textsms
미디어쿼리에 대해 알아보자

미디어쿼리에 대해 알아보자

미디어쿼리? 그게 뭐죠? 에 대해 설명하기 전에 한번 잘 생각해보자. 진짜 완전 찐으로 구식인 웹사이트... 그니까 막 쌍팔년도에 만들어져서 방치된 스멜이 폴폴 풍기면서 들어가면 플래시 죽었어염 하는 그런 사이트를 빼면 대부분의 사이트는 PC와 핸드폰에서 접속했을 때 각각 화면이 다르다. 왜냐하면 PC의 화면을 그대로 모바일에서 출력하면 여러분들은 UI에서 뭘 찾거나 누르는게 상당히 빡세지고 모바일(특히 핸드폰)에 최적화된 디자인은 PC에게는 너무 부담스럽게 크기 때문이다. 이 화면을 서마터폰에서 본다고 생각해보자. 아오 내눈... 태블릿PC라면 사정이 좀 낫겠지만 핸드폰으로 저걸 본다?  미쳤습니까 휴먼? 소리가 절로 나온다. 이 UI는 핸드폰에서 네이버를 키면 나온다. (태블릿PC용 네이버 앱에서도 ..

  • format_list_bulleted JavaScript
  • · 2025. 1. 24.
  • textsms
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • ···
  • 6
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (677) N
    • 잡담 (313) N
      • 단문 (106)
      • 장문 (32)
      • 그림있음 (129) N
      • 나야, 언박싱 (45) N
    • Coding (179)
      • 코딩잡담 (22)
      • JavaScript (56)
      • Python (81)
      • R (20)
    • BOJ (116)
      • [BOJ] Python (116)
    • 잔머리 엑셀 (68)
최근 글
인기 글
최근 댓글
태그
  • #코딩잡담
  • #JavaScript
  • #R
  • #천원마트깡
  • #Excel
  • #알리익스프레스
  • #잔머리엑셀
  • #BioPython
  • #Python
  • #BOJ
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.