CSS7 다크모드에 어울리는 네온 앰비언트 표 만들기 표를 바꿔보자! 옵시디언을 메모앱으로 쓰다 보면, 참 마음에 드는 기능이 많다.그런데 유독 눈에 걸리는 게 있었다. 표(table)였다.기본 스타일은 지나치게 단정하다 못해 밋밋했다.특히 다크모드를 사용할 때면, 배경과의 조화도 어색하고 가독성도 떨어졌다.그래서 CSS 스니펫을 직접 만들어서 표를 다시 디자인해보기로 했다.왜 굳이 표를 건드렸냐고?솔직히 말하자면, ‘필요해서’라기보다 ‘보기 좋게 만들고 싶어서’였다.일상적인 메모에서도, 구조가 보이는 정보 정리는 분명 더 오래 기억에 남는다.그 중에서도 표는 시선을 분산시키기도 하고, 정보를 구획화하기에도 좋다.그러니까, 표가 예뻐야 한다.목표는 이랬다다크모드에 어울리는 배경색부드러운 둥근 테두리셀마다 hover 반응 가능표 테두리에 은은한 노란빛 앰비언.. 2025. 4. 4. 블로그 본문 폰트, CSS로 변경하기 티스토리 본문 폰트 변경 기록티스토리 블로그를 운영하다 보면, 어느 순간부터 본문 폰트가 눈에 거슬리기 시작한다. 내용이 아무리 정돈되어 있어도, 폰트가 주는 인상이 그것을 흐려놓는 경우가 많다. 나 역시 그런 이유로 본문에 적용되는 기본 글꼴을 바꾸기로 결심했다. 이번에 손을 댄 부분은 #article-view였다. 티스토리에서 글의 내용이 실제로 출력되는 가장 핵심적인 영역이며, 이 부분을 수정하면 대부분의 본문 텍스트에 일괄적으로 새로운 폰트를 적용할 수 있다. 이전에도 여러 방식으로 시도해 본 적은 있었지만, 이번에는 폰트 지정의 우선순위와 시스템 호환성까지 고려하여 보다 신중하게 접근했다.적용한 CSS 코드/* 만년교생의 커스터마이징 시작 *//* #article-view는 티스토리 본문 콘텐츠.. 2025. 3. 31. 다크모드용 네온 표 스타일 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 편집으로 네임카드 숨기기 블로그 활성화를 위해 스킨을 다듬는 중이다. 다크모드로 써보자고 이것저것 다듬는 중인데, 현재 스킨의 바탕이 되는 Book Club은 라이트모드가 기본이라 CSS 코드 덧씌우기만 어설프게 해서는 군데군데에서 눈뽕(?)을 당하게 된다. 오늘은 오전 내내 매달린 것이 하나 있었는데, 바로 네임카드 편집. 문제는 크게 두 가지였다. 1. 블로그 제목과 소개글이 링크된 글의 색상과 동일하게 처리되어 연보라색으로 출력되는 문제.2. 구독하기 버튼의 내부 글자와 배경 색상을 변경할 수 없는 문제. 개발자 모드에서 한참 소스를 살펴보고 관련 키워드를 CSS에서 검색해보았지만 건들 수 없었다.important 값을 넣어서 색상에 대한 우선 처리를 강제해도 꿈쩍도 하지 않는 색상들. 알고보니 티스토리에서 기본값으로 고정.. 2025. 3. 30. 다크 모드 커스터마이징 CSS 코드 블럭 올 초부터 옵시디언을 사용하기 시작하며 그간 생소했던 마크다운 문법과 CSS 등을 배우고 있다. 동네 사람들 모두 에버노트 쓸 때도, 번거롭고 유료 앱이라고 쓰기를 거부했던 나였는데...이젠 출근과 동시에 옵시디언부터 무조건 키고 하루를 시작한다. GPT 유료 버전에 한 번 맛들린 후로 정보화 도구의 활용도에 따라서 얼마나 삶의 질이 달라질 수 있는가를 체험한 것이 컸다. 작년, 교육청에서 교원들의 정보화 역량 증진을 위해 10만워 가량의 바우처를 지급했었는데, 처음 받을 당시엔 왜 이런 귀찮은 일을 또 시키나... 했었건만, 결과적으로 나같은 사람 한 명은 본청의 계획대로(?) 변하고야 말았다. 잡설이 길었는데... 여하튼, 마크다운 문법에 익숙해지다보니 자연스럽게 밀쳐두었던 티스토리 블로그도 다시 살.. 2025. 3. 30. 이전 1 다음
