김평범's OrdinaryCode

어느 순간부터인가 크롬 브라우저에서 클릭을 하면 자꾸 커서 깜빡이는 현상이 나왔다. 사실 귀찮아서 그냥 쓰고 있었다가 오늘은 개발할 때 갑자기 너무 신경이 쓰여서 미뤄두었던 해결 방법을 찾기로 했다. 해당 기능은 크롬 브라우저에서 제공하는 기능이다. 👏크롬 브라우저 텍스트 커서 제거 단축키 간단히 없애려면 F7을 누르면 된다. F7을 누르면 해당 기능을 껐다가 켰다할 수 있다. 😃텍스트 커서로 페이지 탐색 기능 OFF 하기 먼저 해당 기능은 우측 상단 점3개를 클릭하면 설정 메뉴에 들어갈 수 있다. 일단 크롬 브라우저에서 설정 > 접근성 메뉴에 들어가면 텍스트 커서로 페이지 탐색 기능을 OFF 하면 더 이상 클릭 시 커서 깜빡임이 없어지는 것을 확인할 수 있다. 그럼 왜 해당 기능이 필요한 것일까? 🥕캐..

📑 태그란? hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다. 보통 주제가 변경이 될 때 이용하는 태그이다. 태그는 기본적으로 검은색으로 제공되고 있다. 만약에 해당 색상을 바꾸고 싶다면? 🧡태그 선 색상 변경 코드 hr { background:pink; height:1px; border:0; } hr 태그를 변경하려면 background나 color 속성만 변경하면 색상이 변하지 않는다. height를 1px을 주고 background를 주면 색상이 변하는 걸 확인할 수 있고 이때 border는 0으로 맞춰준다. 줄 넓이를 키우고 싶을 경우 height를 조절해주면 끝!

첫 퍼블리셔가 되어서 날 매일 같이 괴롭히던 internet Expolorer가 드디어 서비스가 종료되었다.🎉 막상 현업에 있을 때 크로스 브라우징 할 때는 빨리 사라져 버려라!!라고 생각했지만 막상 서비스가 실제로 종료되니 왜 좀 섭섭한건지 구 internet Explorer 11에 접속하니 22년 6월 15일 이후 서비스가 종료되었다는 안내가 뜬다. 사실문제가 되는 이유는 과거에 internet Explorer 환경에 최적화되어서 만들어진 웹 솔루션을 현업에서 사용하는 분들도 상당히 많다. 다행히 이런 분들을 위해서 Edge에서 과거 Internet Explorer 모드를 지원하는듯했다. 💙Microsoft Edge 시작하기 다행히 다양한 방법으로 에지(Edge) 브라우저에서 구 IE 모드를 지원을 ..

input에서 체크박스, 라디오 버튼의 백그라운드 컬러를 바꾸고 싶을 때가 있다. 그냥 생각으로는 background 속성을 사용을 하면 변경이 되지 않을까라고 해서 적용을 해봤지만 input의 기본 color는 원래 css로 변경이 불가능했다. checkbox, radio button의 색상을 바꾸려면, 단순 css로 원래 불가능했는데 최근 새롭게 출시된 css 기능 중 accent-color가 추가되었다. 🎨css accent-color accent-color는 HTML 요소 기본 색상을 변경할 수 있는 새로운 기능의 css이다. 기존 css의 디자인을 바꾸려면 Label 등을 이용한 편법으로 수정해야 되고 가장 기본적인 컬러 변경 자체도 안돼서 브라우저에서 제공하는 기본 디자인을 사용해야 되었다. ..

글래스모피즘이란? 반투명한 유리를 댄듯한 효과를 말한다. "얼린유리" 효과라고 해서 배경에 불투명한 유리를 올린 것 같은 효과를 말한다. 🙂글래스모피즘을 잘 활용하려면? 어느정도 배경 투영되어야 되서 비비드한 컬리와 패턴이 있는 배경 위에 사용을 해야 효과가 난다(배경 위에 떠있는 효과) 내부 쉐도우를 넣어서 테두리는 살짝 밝게 처리해준다. 글래스모피즘은 불투명도와 블러를 조절해서 효과를 낼 수 있다. 손 쉽게 글래스모피즘 효과를 보고싶다면 아래 링크에서 확인해보자. 👉https://hype4.academy/tools/glassmorphism-generator 클레이모피즘 클레이모피즘은 좀 더 부풀려진 말랑해보이는 3D모양의 UI 트랜드를 말한다. inner shadow, outerShadow를 활용해서..

윈도우 11에서 화면을 녹화하는 방법은 매우 간단하다. window11에서 단축키로 윈도우 화면 녹화를 제공한다. 별도의 프로그램 설치 없이 바로 되는게 너무 편리하다. ✂️윈도우 화면 녹화 단축키 윈도우키 + Alt + R 해당 단축키를 누르면 바로 녹화가 시작된다. 녹화가 시작되면 오른쪽 상단 위에 녹화가 시작되었다는 창이 뜨게 된다. 녹화 종료는 동일한 단축키로 윈도우 + Alt +R을 눌러주거나 왼쪽 상단의 녹화창의 정지 버튼을 클릭하면 된다. 📒윈도우 화면 녹화 저장 경로 내 PC > 동영상 > 캡처 위 경로에서 화면 녹화가 된 것을 확인할 수 있다.

🙋‍♀️JavaScript alert 이용하기 자바스크립트에서 알람을 발생하는 것 중에 가장 많이 사용하는 것이 바로 alert이다. alert으로 알람을 발생시키면 해당 웹에 들어가면 바로 알람을 확인할 수 있다. 하지만 alert의 문제의 경우는 해당 탭에 포커싱이 되어있을 때는 잘 볼 수 있지만 해당 탭에 포커싱이 안되어있을 경우 해당 알람창이 뜨는지를 알 수가 없다. 🤔HTML5 Web Notification API HTML에서는 웹페이지에서 알람을 표시하면 페이지 외부에서 표시가 되는 Notification API를 제공한다. 해당 웹페이지가 백그라운드로 돌고 있어도 내가 쓰는기기에서 알람을 볼 수 있는 기능이다. 📝Web Notification 사용 조건 해당 기능을 이용하려면 하지만 조건이 ..