이번에 애플이 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자가 남았는지 표시해보는 것이다. 아, 저 원은 아쉽게도 구현을 못 한다. 내 능력 밖임.입력창의 글자 수를 나타내보자그러니까 일단 남은 글자수는 모르겠고 몇 글자 썼는지 실시간으로 띄우는 것 먼저 해 보자. 얘를 해야 밑에께 좀 더 쉬워진다. 뭐 해요,..
https://koreanraichu.tistory.com/572 미디어쿼리에 대해 알아보자미디어쿼리? 그게 뭐죠? 에 대해 설명하기 전에 한번 잘 생각해보자. 진짜 완전 찐으로 구식인 웹사이트... 그니까 막 쌍팔년도에 만들어져서 방치된 스멜이 폴폴 풍기면서 들어koreanraichu.tistory.com이 글에서 미디어쿼리로 모바일에서 UI 배치를 바꿔봤는데… 읽으면서 에이 뭐 뷰포트 뭐 창 줄여서 보지 이런 분들도 계셨겠지만 아니 저거 어케봄??? 이런 분들도 계셨을 거라 생각한다. 그거 어케 하는지 알려드림. 얘까지 한 글에 쓰면 내용이 번잡시러워서 포스트 분리한겁니다.다들 알다시피 브라우저에서 F12키를 누르면 개발자도구가 열린다.F12 눌렀는데 안열려요? 오페라 쓰신다고요? 오페라는 단축키가..
미디어쿼리? 그게 뭐죠? 에 대해 설명하기 전에 한번 잘 생각해보자. 진짜 완전 찐으로 구식인 웹사이트... 그니까 막 쌍팔년도에 만들어져서 방치된 스멜이 폴폴 풍기면서 들어가면 플래시 죽었어염 하는 그런 사이트를 빼면 대부분의 사이트는 PC와 핸드폰에서 접속했을 때 각각 화면이 다르다. 왜냐하면 PC의 화면을 그대로 모바일에서 출력하면 여러분들은 UI에서 뭘 찾거나 누르는게 상당히 빡세지고 모바일(특히 핸드폰)에 최적화된 디자인은 PC에게는 너무 부담스럽게 크기 때문이다. 이 화면을 서마터폰에서 본다고 생각해보자. 아오 내눈... 태블릿PC라면 사정이 좀 낫겠지만 핸드폰으로 저걸 본다? 미쳤습니까 휴먼? 소리가 절로 나온다. 이 UI는 핸드폰에서 네이버를 키면 나온다. (태블릿PC용 네이버 앱에서도 ..
이전 시간에는 not 선택자를 이용해 강조하는 법을 배워봤는데, 오늘은 이걸 응용해서 갤러리를 만들거다. 어떤 갤러리냐면, 마우스를 올렸을때 펴지면서 이미지가 보이는 갤러리이다. 링크가 왜 없냐면 이건 예약글이기 때문... 이전 예약글이 1월 6일에 업로드 될 예정이다.참고로 오늘은 JS 안쓰고 HTML, CSS만 쓸 예정이다. 마우스를 올려보세요! 일단 갤러리 이미지를 다섯개정도 넣었다. 이거 내가 만든거라 괜찮음. 참고로 이미지 선정하는 건 좋은데, 이미지의 크기가 일정해야 보기 좋다. 가로세로 비율이 일정한건 괜찮은데 비율 망하면 뵈기 싫어짐… 사실 div에 배경화면으로 넣을거면 괜찮은데, 문제는 div에 배경화면을 따로 넣을..
not이 뭐냐면 가상 클래스 중 하나인데, 얘 빼고 다를 의미한다. 아니 그런데 저걸로 강조가 되나요? 그럼요. 생각해보자. 어떤 것을 강조하고 싶을때는 강조하고 싶은 객체가 눈에 잘 띄도록 하는 방법도 있지만 강조하고 싶은 객체 '빼고' 나머지가 눈에 안 띄게 하는 방법도 있다. 오늘은 not 서브클래스와 함께 후자를 해볼거다.See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.코드가 실행되면 블러처리가 돼서 흐릿해진 카드들을 볼 수 있는데, 이 카드들 중 아무 카드에나 마우스를 한번 가져가서 올려보자. 마우스 오버 된 카드가 뾰로롱하고 선명하게 드러날것이다. .card:not(:hover) { opacity: 0.5; filter: ..