인생은 언제나 Try and Except
close
프로필 사진

인생은 언제나 Try and Except

github: @koreanraichu

  • 분류 전체보기 (801) N
    • 잡담 (377)
      • 단문 (123)
      • 장문 (40)
      • 그림있음 (147)
      • 나야, 언박싱 (66)
    • Coding (213) N
      • 코딩잡담 (40)
      • JavaScript (61)
      • Python (89) N
      • R (23)
    • BOJ (122)
      • [BOJ] Python (122)
    • 잔머리 엑셀 (88)
  • 홈
  • 태그
  • 방명록
::selection 색상을 부분부분 다르게 할 수 있을까?

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

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

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

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

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

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

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

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

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

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

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

  • format_list_bulleted Coding/JavaScript
  • · 2025. 1. 24.
간단한 이미지 갤러리를 만들어보자

간단한 이미지 갤러리를 만들어보자

이전 시간에는 not 선택자를 이용해 강조하는 법을 배워봤는데, 오늘은 이걸 응용해서 갤러리를 만들거다. 어떤 갤러리냐면, 마우스를 올렸을때 펴지면서 이미지가 보이는 갤러리이다. 링크가 왜 없냐면 이건 예약글이기 때문... 이전 예약글이 1월 6일에 업로드 될 예정이다.참고로 오늘은 JS 안쓰고 HTML, CSS만 쓸 예정이다.  마우스를 올려보세요! 일단 갤러리 이미지를 다섯개정도 넣었다. 이거 내가 만든거라 괜찮음. 참고로 이미지 선정하는 건 좋은데, 이미지의 크기가 일정해야 보기 좋다. 가로세로 비율이 일정한건 괜찮은데 비율 망하면 뵈기 싫어짐… 사실 div에 배경화면으로 넣을거면 괜찮은데, 문제는 div에 배경화면을 따로 넣을..

  • format_list_bulleted Coding/JavaScript
  • · 2025. 1. 7.
마우스 오버 강조하는 방법(with not)

마우스 오버 강조하는 방법(with not)

not이 뭐냐면 가상 클래스 중 하나인데, 얘 빼고 다를 의미한다. 아니 그런데 저걸로 강조가 되나요? 그럼요. 생각해보자. 어떤 것을 강조하고 싶을때는 강조하고 싶은 객체가 눈에 잘 띄도록 하는 방법도 있지만 강조하고 싶은 객체 '빼고' 나머지가 눈에 안 띄게 하는 방법도 있다. 오늘은 not 서브클래스와 함께 후자를 해볼거다.See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.코드가 실행되면 블러처리가 돼서 흐릿해진 카드들을 볼 수 있는데, 이 카드들 중 아무 카드에나 마우스를 한번 가져가서 올려보자. 마우스 오버 된 카드가 뾰로롱하고 선명하게 드러날것이다. .card:not(:hover) { opacity: 0.5; filter: ..

  • format_list_bulleted Coding/JavaScript
  • · 2025. 1. 6.

마우스를 스크롤하면 스르륵 올라오는 카드를 만들어보자

See the Pen Hovering card by koreanraichu (@koreanraichu) on CodePen.이거 해볼거다. 퀄이 좀 조잡하지 않냐고요? 초보한테 너무 많은 걸 바라지 말자.일단 여기서는 크게 두가지를 해볼건데1. 첫번째로 마우스 스크롤을 하면 숨어있던 카드가 나타나게 해 볼거고2. 그 카드가 밑에서 뿅 하고 올라오게 해볼거다.일단 HTML 코드는 볼 거 없고 CSS부터 보자. .wrapper { width: 50%; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center;}여기는 뭐 없고 그냥 가로 길이만 50%로 해 놓았다. .card { ..

  • format_list_bulleted Coding/JavaScript
  • · 2024. 12. 26.

CSS의 트랜지션(Transition) 속성에 대해 알아보자

일단... 자바스크립트에 이런거 올려도 되냐고요? 내가 올려도 된다고 정의했으니까 넘어가자.Transition이란? CSS로 어떤 애니메이션... 그러니까 어떤 메뉴에 마우스를 올렸을때 색깔이 바뀐다거나, 난데없이 밑줄이 생긴다던가 하는 거 말이다. 그런걸 할 때 주는 속성인데, 사실 트랜지션을 안 준다고 애니메이션이 제대로 작동을 안 하는 건 아니다. 알리오올리오에 베이컨이 안 들어가도 알리오올리오는 알리오올리오인 것처럼 말이다. (마늘 빠지면 크리티컬 히트) 대신 트랜지션을 주면 애니메이션 속도를 조절할 수 있기 때문에 좀 더 스무스해보인다. 알리오올리오에 베이컨이 딱히 들어가지 않아도 상관 없지만 들어가면 맛있는것처럼. 트랜지션의 속성에는 Delay, Duration, Property, timing..

  • format_list_bulleted Coding/JavaScript
  • · 2024. 12. 6.
자바스크립트로 달력을 만들어보자. (feat. 음력 달력)

자바스크립트로 달력을 만들어보자. (feat. 음력 달력)

여러분 생각해봅시다. 설날 언제예요? 양력으로 하면 매번 날짜 바뀌는데 음력 1월 1일입니다. 그럼 추석은요? 양력으로 하면 이것도 날짜가 다른데 음력으로는 항상 8월 15일이 국룰입니다. 그런데 이놈의 달력은!! 항상 양력밖에 안 나와요!! 서양에서는 음력을 안 챙긴다 이거지!! (일본도 안 챙김) 그래서 만들었다.Referencehttps://koreanraichu.tistory.com/164 나홀로 메모장 파생형 만들기-구성 및 사이드바 달력Reference https://bigtop.tistory.com/63 [JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기 만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일koreanr..

  • format_list_bulleted Coding/JavaScript
  • · 2024. 9. 5.
색 조합으로 그라데이션을 만들어보자

색 조합으로 그라데이션을 만들어보자

https://koreanraichu.tistory.com/426 색 조합 확인 페이지를 만들어보자그 왜 내가 어제 자주 들어가는 사이트 중 하나로 알려줬던 Two color combination 있죠? 그거를 쪼매 간단하게 만들어볼건데, 색깔을 두 개 입력하면 두 가지 색을 배경색, 글자색koreanraichu.tistory.com여기서 대충 Two color combinnaton 비슷한 걸 만들어봤는데… 사실 색깔이 여러개 있으면 그라데이션 한번쯤 넣어보고 싶지 않음? 에이~ 해보면 좋지만 그게 돼요? 예, CSS에서는 됩니다. 그럼 진짜로 되나 해보자.Referencehttps://developer.mozilla.org/ko/docs/Web/CSS/gradient/linear-gradient 데이터..

  • format_list_bulleted Coding/JavaScript
  • · 2024. 8. 9.

자바스크립트로 16진수 수동변환 해보기

https://koreanraichu.tistory.com/442 자바스크립트로 진수변환 해보기그 왜 예전에 백준 진수변환 풀이하면서 했던 '그' 진수변환… 그것도 해볼거긴 한데… 아무튼 할겁니다. 그것도 해볼거니까 진정하시고…일단 자바스크립트에서 진수변환을 하koreanraichu.tistory.com여기서 수동변환은 10->2랑 2->10만 해봤는데... 사실 세상은 넓고 진수는 많습니다. 그 중에는 10보다 큰 수가 기본인 진수가 있는데 일단 12진수(시간) 16진수(...) 60진수 이런 게 있다. 그러면 얘네들은 10부터 어떻게 처리하냐고? 16진수와 12진수의 경우 해당하는 알파벳이 있다. 그럼 어떻게 하나요? 아 그걸 지금부터 해볼거다.10진수->16진수a = int(input())hex_l..

  • format_list_bulleted Coding/JavaScript
  • · 2024. 7. 5.
자바스크립트로 진수변환 해보기

자바스크립트로 진수변환 해보기

그 왜 예전에 백준 진수변환 풀이하면서 했던 '그' 진수변환… 그것도 해볼거긴 한데… 아무튼 할겁니다. 그것도 해볼거니까 진정하시고…있는거 써보기일단 자바스크립트에서 진수변환을 하는 방법이 있긴 있다.numBtn.addEventListener('click',()=>{ let binary = document.createElement('p'); binary.innerText = parseInt(numberInput.value,10).toString(2) numResult.appendChild(binary)});일단 쟤가 왜 저렇게 된 건지를 보자... 단순히 숫자로 입력받아서 변환하는 경우에는let number = 1024;console.log(number.toString(2));이렇게 toString..

  • format_list_bulleted Coding/JavaScript
  • · 2024. 7. 4.
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (801) N
    • 잡담 (377)
      • 단문 (123)
      • 장문 (40)
      • 그림있음 (147)
      • 나야, 언박싱 (66)
    • Coding (213) N
      • 코딩잡담 (40)
      • JavaScript (61)
      • Python (89) N
      • R (23)
    • BOJ (122)
      • [BOJ] Python (122)
    • 잔머리 엑셀 (88)
인기 글
전체 방문자
오늘
어제
Copyright © Lv. 35 라이츄 모든 권리 보유.
SKIN: Copyright © 쭈미로운 생활 All rights reserved. Designed by JJuum.
and Current skin "dev-roo" is modified by Jin.

티스토리툴바