본문 바로가기

블로그2

쉽게 블로그 다크 모드 적용하기 - 다른 블로그들의 경우 background-color 가 black인 경우가 있다. 보통 시각장애인을 위해서 검은 배경과 흰 글자는 가독성을 높이기 때문에 많이 이용되는 것 같다. 그리고 흰 배경은 블루스크린으로 인해 눈이 피로해지는 경우가 있다. 소스코드 아래의 두가지 코드들 중 하나를 넣으면 적용이 됩니다. HTML CSS :root { color-scheme: dark; } 후기 네이버 웨일의 경우 다크모드를 독립적으로 적용했다가 풀고 하는 기능이 있는데, 네이버 웨일의 기능의 경우엔 텍스트의 색상이 반전되면서도 위계가 뒤집히지는 않았는데 소스코드를 적용했을 땐 font color의 위계가 뒤집혀서 연한 글자가 진해지고 진한 글자가 연해지는 현상이 보였다. 해결하고픈 마음이 생겨서 가볍게 찾아본 .. 2022. 5. 26.
티스토리 블로그 코드 수정하기 - 2. 카테고리 transition 적용하기 처음 블로그를 열었을 때 다양한 플러그인과 광고 티스토리만의 어떤 서버 연결 등 처리가 느려서 그런지 css의 적용이 느렸다. 그리고 hover 효과를 주었었는데 깜박깜박 거리는게 사용자 경험이 좋지 않다고 판단이 되어서 transition을 부드럽게 주려고 마음먹었다. #gnb ul li a { position: relative; display: block; text-decoration: none; padding: 22px 4px 24px; color: #777; font-weight: bold; } #gnb ul li a:hover, #gnb ul li.current a { color: #FEB802; // 색 바꿈 } #gnb ul li.current a:after, #gnb ul li a:hove.. 2022. 5. 24.