다크모드5 다크모드에 어울리는 네온 앰비언트 표 만들기 표를 바꿔보자! 옵시디언을 메모앱으로 쓰다 보면, 참 마음에 드는 기능이 많다.그런데 유독 눈에 걸리는 게 있었다. 표(table)였다.기본 스타일은 지나치게 단정하다 못해 밋밋했다.특히 다크모드를 사용할 때면, 배경과의 조화도 어색하고 가독성도 떨어졌다.그래서 CSS 스니펫을 직접 만들어서 표를 다시 디자인해보기로 했다.왜 굳이 표를 건드렸냐고?솔직히 말하자면, ‘필요해서’라기보다 ‘보기 좋게 만들고 싶어서’였다.일상적인 메모에서도, 구조가 보이는 정보 정리는 분명 더 오래 기억에 남는다.그 중에서도 표는 시선을 분산시키기도 하고, 정보를 구획화하기에도 좋다.그러니까, 표가 예뻐야 한다.목표는 이랬다다크모드에 어울리는 배경색부드러운 둥근 테두리셀마다 hover 반응 가능표 테두리에 은은한 노란빛 앰비언.. 2025. 4. 4. 다크모드용 네온 표 스타일 CSS 및 HTML 적용 코드 1. 목적티스토리 블로그를 다크모드로 커스터마이징하면서 가장 먼저 불편함을 느꼈던 영역은 표였다.표는 정보를 정리하고 비교할 때 유용한 도구지만 기본 표 서식은 다크모드 환경에서 시인성이 떨어졌고 색상 대비가 약해 내용이 묻히는 경우가 많았다.표만큼은 좀 더 선명하게, 그리고 필요할 때마다 쉽게 꺼내 쓸 수 있는 방식으로 바꾸고 싶었다.2. 원리표의 디자인은 HTML 구조와 CSS 스타일이 함께 작동하여 구현된다.기본적으로 요소는 브라우저나 스킨이 정한 스타일을 따른다.따라서 전체 스타일을 바꾸고자 한다면 두 가지 선택이 생긴다.CSS를 통해 전체 표의 디자인을 수정하거나특정 클래스(class)를 설정해, 원할 때만 스타일을 적용하는 방식으로 제한하거나후자를 선택하면, 글의 맥락에 따라 다양한 표 스타.. 2025. 3. 31. 프로필 누르면 나오는 메뉴창 CSS로 고치기 문제 상황다크모드로 스킨을 꾸미다보면 손볼 곳이 많다.그 중 하나가 돋보기나 숨겨진 메뉴와 같이 구석구석에 숨어 있는 '디테일'들에 대한 것. 며칠 전 프로필 메뉴를 누르면 나오는 '관리', '글쓰기', '로그아웃' 등의 메뉴를 어떻게 고칠 수 있는가로 골머리를 앓았었다. 해결 방법 해결은 간단하다. 해당 부분과 관련된 원본 CSS를 수정하면 된다.Book Club 스킨 기준으로 위 프로필 메뉴창에 대한 CSS 코드는 아래와 같다.아래에 적어둔 코드들은 현재 내가 적용해서 사용하고 있는 다크모드를 기준으로 적어둔 내용들이다.아울러 편집하기 용이하게 주석도 함께 달아두었다. 주석까지 그대로 복붙해도 CSS는 정상적으로 작동한다. 만약 다크모드를 사용하고 싶으시다면 그대로 복붙하면 되고, 각자가 원하는 색상.. 2025. 3. 31. 다크모드에서 Syntax Highlight가 출력되지 않는 문제 해결 방법 문제 상황전문가의 영역이든, 생활인의 영역이든 현대인이라면 코드를 보고 수정하는 일을 어느정도 할 수 밖에 없다.그럴 때마다 느끼는 것이, Syntax Highlighting이 얼마나 코드작업을 편리하게 해주는가이다.흑백의 코드 뭉치들이 각각의 역할에 맞게 색상을 부여받을 때, 개안을 하는 기분이니 말이다. 여하튼, 내 블로그에도 내가 직접 했던 코드 작업들을 기록해보려고 했는데, 아래와 같이 흑백으로만 출력되는 문제가 발생했다.아무래도 다크모드로 스킨을 편집하며 본문 색상을 강제하는 과정에서 코드블록에 적용되어야 할 색상이 disable된 것 같았다. 원인 분석우선, 내가 CSS에 추가로 작업해둔 다크모드는 다음과 같다. 저 #e0e0e0이 내가 블로그에서 사용하고자 했던 다크모드에서의 본문 색상이었다.. 2025. 3. 31. 다크 모드 커스터마이징 CSS 코드 블럭 올 초부터 옵시디언을 사용하기 시작하며 그간 생소했던 마크다운 문법과 CSS 등을 배우고 있다. 동네 사람들 모두 에버노트 쓸 때도, 번거롭고 유료 앱이라고 쓰기를 거부했던 나였는데...이젠 출근과 동시에 옵시디언부터 무조건 키고 하루를 시작한다. GPT 유료 버전에 한 번 맛들린 후로 정보화 도구의 활용도에 따라서 얼마나 삶의 질이 달라질 수 있는가를 체험한 것이 컸다. 작년, 교육청에서 교원들의 정보화 역량 증진을 위해 10만워 가량의 바우처를 지급했었는데, 처음 받을 당시엔 왜 이런 귀찮은 일을 또 시키나... 했었건만, 결과적으로 나같은 사람 한 명은 본청의 계획대로(?) 변하고야 말았다. 잡설이 길었는데... 여하튼, 마크다운 문법에 익숙해지다보니 자연스럽게 밀쳐두었던 티스토리 블로그도 다시 살.. 2025. 3. 30. 이전 1 다음
