전체 글 201

[css]<hr> 태그 색상 바꾸는 방법

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

FrontEnd/css 2022.06.25

internet Explorer 서비스 종료! - 엣지(edge)에서 Internet Explorer 이용하기

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

Diary 2022.06.19

[css] 체크박스, 라디오버튼 색상 변경하기 (accent-color, 기본요소 컬러 변경)

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

FrontEnd/css 2022.06.15

2022 UI 트렌드 글래스모피즘과 클레이모피즘 CSS 생성하기(glassmorphism & claymorphism)

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

FrontEnd/css 2022.06.07

[Window 11] 윈도우 화면 간단하게 녹화 하는 방법

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

etc. 2022.06.04

[JavaScript] 웹에서 Push 알람 발생하기 (Web Notification/alert)

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

FrontEnd/Javascript 2022.06.01

ㅋㅣㅂㅗㄷㅡㄱㅏㅇㅣㅅㅏㅇㅎㅐㅇㅛ! 키보드 자음 모음 분리 해결하기

😥키보드 자음 모음 분리현상이 일어난 이유 오늘도 작업을 하느라 컴퓨터를 이용 중인데 갑자기 나도 모르는 팝업창이 생성되었다. "현재 언어로는 받아쓰기를 사용할 수 없습니다 : 한국어" 지원되는 언어를 확인하려면 여기를 클릭하세요. 다시 또 작업을 하려고 보니 키보드 자음 모음이 분리되는 현상이 나타났다; 처음에는 왜 나타나는지도 모르고 당황했다.😅 알고 보니 윈도우 + H키를 누르면 실행되는 음성인식이 실행되면 버그로 키보드 자음 모음이 분리되는 현상이 나타난다고 한다. 키보드 자음모음 분리현상 해결방법 해결방법은 매우 간단하다 윈도우키 + V를 눌러주면 정상적으로 작동한다.😎

Diary 2022.05.27

네이버 웨일 다크모드 설정하기 - 탄소중립을 위한 소소한 실천

최근 유튜브를 보다 보면 화질이 자동으로 떨어지는 것을 느껴본 적이 있을 것이다. 최근 국제적인 이상기후로 IT 업계에서 탄소중립을 위한 소소한 방법들이 제시되고 있다. 유튜브의 화질 저하도 이러한 실천 방법 중의 하나이다. 😎유튜브 화질 저하와 탄소중립 유튜브의 화질을 낮춰서 시청을 하게 되면, 탄소배출량이 감소한다고 한다. 낮은 화질로 영상을 보는 경우 전력사용량이 저하되는 것에 대한 효과라고 한다. 🌙다크 모드 이용하기 요즘 유행하는 다크 모드도 탄소배출 저하에 도움이 된다. 스마트폰에서 다크 모드를 적용할 경우 소비전력이 현저히 줄어든다고 한다. 이러한 탄소중립에 맞춰서 네이버 웨일 브라우저는 브라우저 자체에서 다크 모드를 지원하기 시작했다. 다크모드를 적용하는 것만으로도 환경에 도움이 되다니! ..

etc. 2022.05.25

[Notion] 노션 템플릿 갤러리 오픈! 유용한 노션 템플릿 모음

노션이 좋은 점은 템플릿이 너무 잘되어있다는 점이다. 나의 경우도 내가 직접 만든 템플릿을 쓰고 있지만, 남들이 만든 템플릿도 많이 이용하고 있다. ✨노션 템플릿 갤러리 오픈 노션 엠버서들이 만든 다양한 노션 템플릿 갤러리가 오픈되었습니다. 실제로 노션을 잘 사용하는 분들이 직접 만든 템플릿 위주로 모여있어서 내가 원하는 템플릿을 찾아서 사용할 수 있다. https://www.notion.so/ko-kr/templates Notion 추천 – 템플릿 갤러리 Notion 팀이 큐레이션한 커뮤니티 템플릿. 업무와 생활을 효과적으로 관리하고, Notion을 사용하는 새롭고 창의적인 방법을 발견하세요. www.notion.so - 윗 링크를 이용하면 노션 템플릿 갤러리를 들어갈 수 있다. 💡노션 템플릿 갤러리 ..

etc./Notion 2022.05.16

Javascript URL 리다이렉트 시키기 (vue.js router push)

Vue $router.push 오류가 나서 수정 방법을 찾다가 못 찾아서 일단은 Javascript로 Redirect 하는 소스로 변경해놨는데 오늘은 Javascript redirect와 Vue 에서 redirect를 하는 방법 정리하기로! 🧐Vue.js에서 page redirect 하는 방법 this.$router.push('/') Vue.js 에서 page를 이동하는 방법은 this.$router.push('경로')를 이용한다. 문제는 해당코드가 모바일에서 해당 코드가 작동하지 않는 이슈가 발생했다. 이것저것 코드를 바꾸다가 못 찾아서 :( 일단 Javascript 코드로 변경하기로 했다. 🐳Javascript에서 Page redirect 하는 방법 window.location.href = `${wi..

FrontEnd/Javascript 2022.05.11