전체 글118 CSS 눈 피로 줄이기 (색상 설정, 줄 길이, 다크모드) - 모니터도 안경도 아닌, 설정 색상 설정, 줄 길이, 다크모드. 직접 써보고 달라진 것들.한참 모니터를 들여다보다가 퇴근하면 눈이 뻑뻑하고 화면이 잔상처럼 남는 느낌, 한 번쯤 겪어봤을 겁니다. 저는 그게 당연한 줄 알았습니다. 컴퓨터를 많이 써서 그런 거라고. 그런데 어느 날 CSS를 조금 손봤더니 같은 시간을 봐도 눈이 덜 피로한 걸 느꼈습니다. 모니터가 바뀐 것도, 안경을 새로 맞춘 것도 아니었는데.그 뒤로 화면이 눈에 주는 피로감이 설정에 따라 달라진다는 걸 체감했습니다. 이 글은 제가 직접 써보고 "이건 확실히 다르다"고 느낀 CSS 설정 다섯 가지와, 그걸 다크모드까지 연결하는 방법을 정리한 기록입니다.배경색, 글자색, 줄 길이 — 숫자로 보는 색상 설정배경색을 순수 흰색 대신 아주 약간 따뜻한 색으로 바꾸는 것은 단순한 .. 2026. 4. 10. CSS 강조 박스 (박스 모델, 박스 유형, 다크모드) - 박스가 독자에게 신호를 보내는 도구가 된 과정 CSS를 시작했을 때, 박스 하나 만드는 데 왜 이렇게 헤매는지 몰랐습니다. 테두리를 넣고, 배경을 바꾸고, 안쪽 여백이 왜 이렇게 튀어나오지 하면서 새로고침만 수십 번 눌렀습니다. 그러다 어느 순간 깨달았습니다. 박스는 그냥 사각형이 아니라 독자에게 신호를 보내는 도구라는 걸. 그 뒤로 박스를 만드는 방식이 달라졌습니다.이 글은 제가 블로그와 토이 프로젝트에서 실제로 써먹으며 "이건 진짜 쓸 만하다"고 느낀 7가지 강조 박스 유형을 정리한 기록입니다. 각각 어떤 상황에서 왜 써야 하는지, 그리고 직접 써보며 발견한 맹점까지 담았습니다.박스 모델 — 수치 뒤에 숨어 있는 구조의 진실CSS에서 강조 박스를 만들 때 가장 먼저 맞닥뜨리는 개념이 박스 모델입니다. 박스 모델이란 HTML 요소 하나가 화면에서 .. 2026. 4. 9. CTA 버튼 디자인 (버튼 유형, 접근성, hover) 설계에서 배운 것들 버튼 하나를 바꿨을 뿐인데 클릭이 생겼습니다. 저도 처음엔 그 차이가 버튼에서 나온다는 걸 몰랐습니다. 배경색에 텍스트만 얹으면 된다고 생각했으니까요. 그런 믿음이 꽤 오래 갔습니다. CTA(Call to Action)란 사용자에게 특정 행동을 유도하는 요소로, "지금 구매하기"나 "더 알아보기" 같은 버튼이 대표적입니다.처음 블로그에 달았던 CTA 버튼은 배경이 연한 파란색이었고 텍스트는 회색이었습니다. 당연히 클릭이 없었습니다. 나중에 보니 버튼이 있는 건지 없는 건지 구분조차 안 될 정도였습니다. 그때 처음으로 버튼 디자인이 단순히 예쁨의 문제가 아니라는 걸 알았습니다. 버튼이라는 요소는 생각보다 훨씬 섬세한 설계가 필요합니다. 어떤 색을 쓰느냐, 크기가 얼마냐, hover 반응이 있느냐 없느냐, .. 2026. 4. 8. CSS 폰트 가독성 - 콘텐츠가 아니라 설정이 문제였다 제 글이 재미없어서 독자가 안 읽는다고 생각했습니다. 통계가 나빠도 그냥 글을 더 잘 써야겠다는 방향으로만 생각했고, 설정 자체를 의심해본 적이 없었습니다. 그러다 어느 날 직접 스마트폰으로 제 블로그를 열어봤는데, 두 문단도 채 읽기 전에 눈이 불편해졌습니다. 내용이 문제가 아니었습니다. 화면이 문제였습니다. 티스토리 기본 스킨의 글자 크기가 14픽셀로 설정되어 있다는 걸 그때 처음 알았습니다.사소해 보이는 숫자 하나가 독자를 머물게도 하고 떠나게도 한다는 걸, 그 경험으로 처음 실감했습니다. 이 글은 그 이후 제가 직접 바꿔보고, 틀리기도 하고, 다시 조정하면서 정착한 CSS 설정들에 대한 기록입니다. 완벽한 답이 아니라 제가 부딪힌 과정을 솔직하게 담았습니다.독자 이탈의 원인을 콘텐츠로만 돌리는 함.. 2026. 4. 8. Media Query로 모바일 최적화-광고가 화면 밖으로 삐져나왔다 티스토리 블로그에 애드센스 광고를 붙이고 나서 PC로 보면 멀쩡한데 모바일로 열면 광고가 화면 밖으로 삐져나와 있었습니다. 가로 스크롤이 생기고 레이아웃이 무너지는 거였습니다. 처음엔 애드센스 설정 문제인 줄 알고 광고 코드를 이리저리 바꿔봤습니다. 원인은 거기 있지 않았습니다. CSS에서 화면 크기에 따라 반응하는 설정을 제대로 안 해뒀던 게 문제였습니다. 그게 Media Query입니다.이 경험이 답답했던 건, 문제 자체가 눈에 보이는데 원인을 못 찾는 상황이었기 때문입니다. 광고가 분명히 삐져나와 있는데, 뭘 고쳐야 하는지 몰랐습니다. CSS라는 단어는 알았지만 Media Query는 처음 듣는 개념이었고, 관련 글을 찾아보니 대부분 코드 예시만 잔뜩 있고 "왜 이게 필요한가"에 대한 설명은 빈약했.. 2026. 4. 7. HTML 주석 활용법 - 주석을 안 달았더니 한 달 뒤 내 코드가 남의 코드가 됐다 한 달 전에 내가 만든 HTML 파일을 다시 열었을 때 무슨 생각으로 이걸 짰는지 도무지 기억이 안 났습니다. div가 왜 이렇게 중첩되어 있는지, 이 클래스 이름은 왜 이렇게 지었는지. 내가 짠 코드인데 남이 짠 것처럼 낯설었습니다. 그날 이후로 주석을 제대로 달기 시작했습니다.이게 부끄러운 일처럼 들릴 수 있는데, 사실 이건 경험 유무의 문제가 아닙니다. 코드는 작성하는 순간의 맥락이 사라지면 이유 없이 보입니다. 숙련된 개발자일수록 주석을 더 꼼꼼하게 다는 경향이 있는 이유가 여기 있습니다. 기억력의 문제가 아니라, 코드가 원래 그런 성질을 갖고 있다는 걸 경험으로 배운 거겠지요.블로그 스킨을 직접 손대본 분들은 이 감각을 잘 알 것입니다. 처음에 한두 줄씩 고치다 보면 어느 순간 파일이 수백 줄을.. 2026. 4. 7. 이전 1 ··· 16 17 18 19 20 다음
