[CSS] 텍스트 커서(caret) 색상 변경 2021. 7. 17. 텍스트 커서(caret) 정의 웹페이지의 텍스트 커서 색상을 변경하기 위해서는 CSS의 caret-color 속성을 적용할 수 있습니다. 다소 생소한 속성인 caret-color을 이용하면 텍스트를 작성할 때 깜빡이는 커서의 색상을 변경할 수 있습니다. 원래는 별도로 설정하지 않아도 텍스트 색상의 색깔을 그대로 따라가지만, 텍스트 색상과 무관하게 별도로 색상을 지정해주고 싶은 경우에 적용이 가능합니다. 적용 예시 /* Keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentcolor; /* values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0,..

CSS3 텍스트 그림자 효과(Text Shadow Effects) 2021. 7. 17. CSS3 텍스트 그림자 효과(Text Shadow Effects) 4가지 Elegant Shadow Deep Shadow Inset Shadow Retro Shadow 해당 기술은 텍스트에 그림자 효과를 입히는 방법으로 총 4가지 스타일이 있다. 어떤 스타일을 선택하든지 그것은 취향 차이다. 개인적으로 Deep Shadow와 Inset Shadow가 가장 깔끔해보인다. 해당 스타일은 필요한 부분만 가져와서 활용할 수 있을 것이다. %h1.elegantshadow Elegant Shadow %h1.deepshadow Deep Shadow %h1.insetshadow Inset Shadow %h1.retroshadow Retro Shadow h1 { font-family: "Avant Garde", Avan..

유니코드(Unicode) 한글 범위 2021. 7. 17. 한글 범위 U+1100 ~ U+11FF 한글 자모 ㄱ ~ ᇿ 256 U+3000 ~ U+303F 한중일 문장부호 ・ ~ ー 2 U+3130 ~ U+318F 한글 호환 자모 ㄱ ~ ㆎ 94 U+A960 ~ U+A97F 한글 확장 자모A ꥠ ~ ꥼ 29 U+AC00 ~ U+D7AF 한글 글자 마디 가 ~ 힣 11,172 U+D7B0 ~ U+D7FF 한글 확장 자모B ힰ ~ ퟻ 72 U+FF00 ~ U+FFEF 반각 자모 ﾡ ~ ￜ 52 U+3400 ~ U+4DBF CJK Unified Ideographs Extension A (한중일 통합 한자 확장 A) 6,592 6,582 한자 U+4DC0 ~ U+4DFF Yijing Hexagram Symbols 64 64 일반 U+4E00 ~ U+9FFF CJK Un..

CSS 이미지 스프라이트란 무엇일까? 2021. 7. 17. 이미지 스프라이트(image sprite) 웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러 개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러 개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다. 일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버 요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다. 이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 ..

라이트 모드 다크 모드 토글스위치 CSS(Dark Mode toggle switch) 디자인 2021. 7. 17. 1) Switch Button See the Pen Switch Button by Hugo (@kapz) on CodePen. 2) Switch ButtonPure CSS Toggle Buttons | ON-OFF Switches See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen. 3)CodePen Home Pure CSS toggle buttons See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen. 4) Switch See the Pen Switch by Fabrice Lejeune ..

맥 OS Dock 구성(Mac OS Dock) 2021. 7. 17. 맥 OS Dock 구성(Mac OS Dock) 순수 CSS3와 HTML이 있는 MacOS Dock 메뉴가 가능할까요? 우리는 웹 애플리케이션에서 다양한 종류의 메뉴를 봐왔습니다. 메뉴에는 다양한 스타일, 다양한 애니메이션, 다양한 색상 등이 사용됩니다. MacOS에 익숙하다면 도커 메뉴가 어떤지 잘 알고 있을 것입니다. 도커는 화면 하단에 있는 아이콘 모음입니다. Mac에 있는 일부 Apple 애플리케이션에 쉽게 액세스 할 수 있습니다. 오늘은 CSS3로 Mac 스타일의 Dock Menu를 만드는 방법을 알아보겠습니다. MacOS Docker 메뉴와 비슷하게 생긴 메뉴는 CSS3와 HTML만 사용하는 메뉴입니다. 아시다시피 CSS3 속성은 아이콘에 애니메이션 효과와 반사 효과를 추가하는 데 도움이 될 것..