표2 다크모드에 어울리는 네온 앰비언트 표 만들기 표를 바꿔보자! 옵시디언을 메모앱으로 쓰다 보면, 참 마음에 드는 기능이 많다.그런데 유독 눈에 걸리는 게 있었다. 표(table)였다.기본 스타일은 지나치게 단정하다 못해 밋밋했다.특히 다크모드를 사용할 때면, 배경과의 조화도 어색하고 가독성도 떨어졌다.그래서 CSS 스니펫을 직접 만들어서 표를 다시 디자인해보기로 했다.왜 굳이 표를 건드렸냐고?솔직히 말하자면, ‘필요해서’라기보다 ‘보기 좋게 만들고 싶어서’였다.일상적인 메모에서도, 구조가 보이는 정보 정리는 분명 더 오래 기억에 남는다.그 중에서도 표는 시선을 분산시키기도 하고, 정보를 구획화하기에도 좋다.그러니까, 표가 예뻐야 한다.목표는 이랬다다크모드에 어울리는 배경색부드러운 둥근 테두리셀마다 hover 반응 가능표 테두리에 은은한 노란빛 앰비언.. 2025. 4. 4. 다크모드용 네온 표 스타일 CSS 및 HTML 적용 코드 1. 목적티스토리 블로그를 다크모드로 커스터마이징하면서 가장 먼저 불편함을 느꼈던 영역은 표였다.표는 정보를 정리하고 비교할 때 유용한 도구지만 기본 표 서식은 다크모드 환경에서 시인성이 떨어졌고 색상 대비가 약해 내용이 묻히는 경우가 많았다.표만큼은 좀 더 선명하게, 그리고 필요할 때마다 쉽게 꺼내 쓸 수 있는 방식으로 바꾸고 싶었다.2. 원리표의 디자인은 HTML 구조와 CSS 스타일이 함께 작동하여 구현된다.기본적으로 요소는 브라우저나 스킨이 정한 스타일을 따른다.따라서 전체 스타일을 바꾸고자 한다면 두 가지 선택이 생긴다.CSS를 통해 전체 표의 디자인을 수정하거나특정 클래스(class)를 설정해, 원할 때만 스타일을 적용하는 방식으로 제한하거나후자를 선택하면, 글의 맥락에 따라 다양한 표 스타.. 2025. 3. 31. 이전 1 다음
