HTML/CSS

지난주, 동네 치킨집 사장님과 담배 한 대를 태웠습니다. 사장님이 영수증 뭉치를 보여주시더군요. “작가님, 제가 어제 100만 원어치를 팔았거든요? 근데 배달비, 중개 수수료, 광고비 떼니까 통장에 60만 원 들어옵니다. 이게 맞습니까?” 속이 타들어 가는 그 마음, 저도 잘 압니다. 남의 땅(배달앱)에서 장사하면 세금을 낼 수밖에 없습니다. 그래서 제가 그 자리에서 노트북을 펴고 딱 20줄짜리 코드를 짜드렸습니다. […]

2018년, 제가 처음 웹 개발을 배울 때였습니다. 간단한 포트폴리오 페이지 하나 띄우겠다고 카페24 호스팅을 결제하고, 알드라이브(FTP)로 파일을 올리느라 반나절을 씨름했죠. 파일 하나 수정할 때마다 재업로드… 정말 끔찍했습니다. 그러다 동료 개발자가 지나가듯 말하더군요. “아직도 돈 내고 호스팅 써? 요새 누가 FTP를 써, 네트리파이 쓰지.” 그날 이후 제 통장에서 서버 비용은 사라졌습니다. 네트리파이(Netlify)는 여러분의 HTML 파일을 전

3년 전, 제 지인이 작은 공방을 열면서 홈페이지 제작 업체에 견적을 냈습니다. 돌아온 답변은 “기본형 150만 원, 관리비 월 5만 원”. 내용이라고 해봤자 가게 위치, 메뉴, 인스타그램 링크가 전부인데 말이죠. 제가 그 견적서를 찢어버리고 노트북을 켰습니다. 그리고 딱 30분 만에 똑같은 기능을 하는 사이트를 만들어줬습니다. 비용은? 도메인 구매비 2만 원이 전부였습니다. 사장님, 이제 ‘코딩’ 몰라도

온라인 쇼핑몰에서 고객이 머무는 시간은 평균 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을 읽을 수 있는 모든 준비가 되어 있습니다. 다만 ‘어떤 앱으로