HTML/CSS

온라인 쇼핑몰에서 고객이 머무는 시간은 평균 3초입니다. 이 짧은 시간에 “어? 여기 좀 전문적인데?”라는 느낌을 주지 못하면 뒤로 가기를 누릅니다. 문제는 네이버 스마트스토어나 카페24 기본 템플릿이 다 거기서 거기라는 점입니다. 저는 10년 차 쇼핑몰 운영자분들께 항상 이렇게 말합니다. “인테리어 공사(코딩)는 못 해도, 페인트칠(CSS)은 직접 하셔야죠.” 디자이너에게 의뢰하면 건당 10만 원이 넘는 작업들, 오늘 제가 드리는 […]

웹사이트를 만들다 보면 사용자의 정보를 받아야 할 때가 반드시 옵니다. 회원가입, 로그인, 검색창, 댓글 등 모든 ‘입력’의 순간에 쓰이는 것이 바로 HTML Form(양식)입니다. 오늘은 이 태그들을 조합해서 ‘가장 기본적인 로그인 창’을 직접 코딩해 보겠습니다. 이 원리만 알면 검색창이나 회원가입 페이지도 식은 죽 먹기입니다. 1. 기본 골격: <form> 태그 모든 입력 요소는 <form>이라는 울타리 안에 있어야

2026년 현재, 감마(Gamma)는 최고의 웹 빌더입니다. 하지만 많은 초보자분들이 사이트만 예쁘게 만들어놓고 정작 가장 중요한 ‘간판 달기(SEO)’ 작업을 건너뜁니다. 검색 엔진 봇에게 “나 여기 있어요!”라고 신고하지 않으면, 아무리 멋진 사이트도 디지털 우주를 떠도는 먼지에 불과합니다. 코딩을 몰라도 괜찮습니다. 복잡한 개발 지식 없이 복사하고 붙여넣기(Ctrl+C, Ctrl+V)만으로 구글과 네이버에 내 명함을 돌리는 방법을 지금 바로 시작합니다. STEP

잘 나가던 클라이언트의 블로그 트래픽이 갑자기 30%나 곤두박질친 적이 있습니다. 콘텐츠는 여전히 훌륭했지만, 문제는 구글 서치 콘솔의 ‘환경’ 탭이었습니다. INP(상호작용 후 다음 페인트) 점수가 500ms를 넘겨 ‘불량’ 판정을 받고 있었던 거죠. 사용자가 메뉴를 눌렀는데 0.5초 동안 아무 반응이 없으니 구글이 페널티를 준 겁니다. 밤새 원인을 파헤친 결과, 범인은 무거운 자바스크립트였습니다. 오늘 소개할 이 ‘플러그인 조합’을

2022년, 한 기업의 브랜드 블로그를 세팅해 줄 때였습니다. 디자인은 완벽했는데, 모든 글 상단에 ‘작성자: 관리자(Admin)’라는 문구가 박혀 있어 전체적인 톤 앤 매너를 해치고 있었죠. 클라이언트는 “이거 좀 없애주세요, 너무 아마추어 같아요”라고 요청했지만, 당시 아스트라 테마 업데이트로 설정 메뉴 위치가 바뀌어 한참을 헤맸던 기억이 납니다. 독자는 콘텐츠를 보러 왔지, 누가 썼는지나 댓글이 0개라는 사실을 확인하러 온

2022년 가을이었나요? 특정 카드의 하단에 버튼이 있을 때만 카드 전체의 테두리 색을 바꾸고 싶어서 퇴근 직전까지 자바스크립트와 씨름했던 기억이 납니다. “아니, 자식 상태에 따라 부모를 바꾸는 게 왜 CSS에선 안 되는 거야?”라며 샷건을 칠 뻔했죠. 당시엔 부모 선택자가 성능을 망칠 거라는 우려 때문에 수십 년간 표준이 되지 못했거든요. 하지만 2026년 지금, `:has()`는 프론트엔드 개발자의 가장

2021년 여름이었나요? 외부 미팅 중에 급하게 클라이언트로부터 HTML 형식의 결과물 시안을 확인해달라는 요청을 받은 적이 있습니다. 노트북은 차에 있고, 폰으로 파일을 다운로드했는데… 화면에는 정체를 알 수 없는 외계어만 가득하거나 아예 열리지 않더군요. 결국 저는 5분 만에 해결책을 찾아냈고, 무사히 미팅을 마쳤습니다. 사실 스마트폰은 이미 HTML을 읽을 수 있는 모든 준비가 되어 있습니다. 다만 ‘어떤 앱으로

2018년 겨울, 대기업 클라이언트에게 연말 성과 보고용 웹 대시보드를 만들어 납품했던 날이 생생합니다. 클라이언트가 “이거 그대로 출력하게 PDF로 좀 뽑아주세요”라고 무심코 던진 요청에, 저는 당연히 ‘Ctrl+P(인쇄)’를 눌렀죠. 하지만 결과물은 처참했습니다. 화려했던 CSS 스타일은 다 사라지고 텍스트만 앙상하게 남은, 말 그대로 ‘깨진 문서’가 나왔으니까요. 식은땀을 흘리며 밤새 변환 툴을 찾아 헤매던 기억이 납니다. 아마 지금 이

지난달, 한 클라이언트의 웹사이트 속도가 너무 느리다는 상담을 받았습니다. 이미지를 다 압축했는데도 모바일 점수가 50점대였죠. 원인을 파헤쳐 보니 범인은 ‘무거운 폰트 파일’이었습니다. 3MB가 넘는 폰트 파일을 통째로 내려받느라 브라우저가 흰 화면(White Screen)을 띄우고 멈춰 있었던 겁니다. 한국 웹의 새로운 표준이 된 ‘프리텐다드(Pretendard)’. 가독성 좋고 깔끔하지만, 최적화 없이 그냥 쓰면 ‘데이터 덩어리’일 뿐입니다. 오늘 이 글을

혹시 웹사이트를 디자인하다가 “겨우 장식 아이콘 하나 넣자고 텅 빈 <div> 태그를 또 만들어야 하나?”라는 자괴감에 빠진 적 없으신가요? 코드는 지저분해지고, 유지보수는 어려워지는 그 답답함, 저도 너무 잘 압니다. HTML 구조를 깔끔하게 유지하면서도 전문가 수준의 디테일을 챙기는 방법이 있습니다. 바로 CSS의 ‘투명 망토’라 불리는 가상 요소(Pseudo-elements)를 활용하는 것이죠. 이 글을 끝까지 읽으시면, 여러분의 웹페이지는 HTML