HTML/CSS

신입 퍼블리셔 시절, 게시판 목록을 만들 때마다 가장 골치 아팠던 건 ‘제각각인 이미지 사이즈’였습니다. 어떤 건 길쭉하고, 어떤 건 납작했죠. 이걸 width: 100%; height: 200px;로 강제 고정해버리면 여지없이 사진이 홀쭉해지거나 뚱뚱해졌습니다. “이미지를 보여주는 창문(Frame)만 만들고, 풍경(Image)은 자연스럽게 잘라내면 안 될까?” 이 고민을 해결해 준 것이 바로 object-fit입니다. 이제 <div> 배경으로 이미지를 넣는 꼼수는 그만두세요. 검색엔진이 […]

2015년, 정부 관련 프로젝트를 진행할 때였습니다. 검수 마지막 날, “할머니가 보시기엔 글씨가 너무 작아서 안 보이신다는데, 브라우저 설정을 바꿔도 그대로네요?”라는 피드백을 받았습니다. 등줄기에 땀이 흘렀습니다. 저는 모든 단위를 px로 고정해 놨었거든요. 결국 3천 줄이 넘는 CSS 코드를 전부 뒤엎어야 했습니다. 픽셀은 개발자에겐 편하지만, 사용자(특히 노안이나 저시력자)에겐 불친절한 단위입니다. 이 글을 읽는 여러분은 저와 같은 삽질을

2021년 봄, 핀테크 앱 프로젝트를 맡았을 때입니다. UI 디자이너가 “신뢰감을 주려면 카드가 투명해야 해요!”라며 시안을 가져왔습니다. 저는 습관처럼 opacity: 0.5를 줬죠. 결과는 처참했습니다. 배경은 보였지만, 위에 적힌 계좌번호와 금액까지 희미해져서 도저히 읽을 수가 없었거든요. “아니, 유리는 투명하고 글씨는 진해야죠!” 디자이너의 불만 섞인 목소리에 저는 머리를 싸맸습니다. 배경은 흐리게 뭉개면서(Blur), 텍스트는 선명하게 살리는 것. 이 모순적인

2018년, 한 쇼핑몰 사이트의 리뉴얼 프로젝트를 맡았을 때의 일입니다. 상품은 좋은데 노출이 너무 안 돼서 폐업 위기였죠. 코드를 뜯어보니 헤더부터 푸터까지 모든 요소가 <div>로만 도배되어 있었습니다. 구글 봇에게는 그저 거대한 ‘의미 없는 덩어리’로 보였을 겁니다. 저는 3일에 걸쳐 <div>를 <header>, <main>, <article>로 바꾸는 ‘이름표 붙이기’ 작업만 했습니다. 결과는 어땠을까요? 2주 뒤 오가닉 트래픽(자연 유입)이 250%

2014년 겨울로 기억합니다. 처음으로 클라이언트에게 반응형 홈페이지를 납품하던 날이었죠. 자신만만하게 링크를 보냈는데, 3분 뒤 전화가 왔습니다. “코드캠 님, 사장님 폰에서 메뉴가 화면 밖으로 튀어나가는데요?” 식은땀이 흘렀습니다. 알고 보니 저는 뷰포트(Viewport) 설정도 없이 픽셀만 맞추고 있었던 겁니다. 반응형 웹이 어렵게 느껴지는 이유는 ‘어디서 화면을 잘라야 할지’ 기준이 없기 때문입니다. 오늘 이 글을 끝까지 읽으시면, 더 이상

코딩을 처음 시작했을 때 가장 힘들었던 게 뭔지 아세요? 복잡한 문법? 아닙니다. 바로 ‘단순 노동’이었습니다. 코드 한 줄 고치고 크롬 창 띄워서 새로고침(F5) 누르고, 다시 에디터로 돌아오고… 이 짓을 하루에 500번쯤 하다 보면 “내가 지금 코딩을 하는 건지 막노동을 하는 건지” 현타가 오곤 했죠. 오늘 소개해 드릴 5가지 확장 프로그램(Extension)은 여러분의 손목 건강과 정신 건강을

여러분의 블로그 모바일 화면, 지금 한번 켜보시겠어요? 우측 상단(혹은 좌측)에 있는 메뉴 버튼이 눈에 확 들어오나요? 아스트라(Astra)는 가볍고 빠른 최고의 테마지만, 무료 버전의 기본 모바일 메뉴 아이콘은 솔직히 말해 너무 ‘소심’합니다. 배경색과 아이콘 색이 비슷해서 보호색을 띠고 있거나, 터치하기에 너무 작은 경우가 많죠. 이 작은 차이가 방문자를 3초 만에 나가게 만듭니다. ▲ (Before & After)

제 부사수 민수는 지독한 ‘길치’였습니다. CSS 좌표 잡는 걸 그렇게 어려워했죠. 어느 날 justify-content와 align-items를 반대로 적어서 레이아웃이 다 깨진 걸 보고, 제가 모니터에 포스트잇 한 장을 붙여줬습니다. 거기엔 딱 한 문장이 적혀 있었습니다. “지금 네가 깐 도로는 어디로 뚫려 있냐?”Flexbox는 사실 박스를 배치하는 게 아닙니다. ‘흐름(도로)’을 만드는 겁니다. 꼬치구이가 정적인 이미지라면, 도로는 우리가 매일

오늘 학원 수업 시간에 강사님이 그러시더군요. “여러분, 홈페이지는 사실 거대한 도시락 통입니다.” 처음엔 다들 무슨 소린가 해서 눈만 껌뻑였는데, 수업이 끝날 때쯤엔 모두 고개를 끄덕였습니다. 저도 예전에 혼자 독학할 때, 글자 색 하나 바꾸려다 레이아웃이 와장창 깨져서 당황했던 적이 있거든요. 그때 제가 몰랐던 게 바로 오늘 배운 ‘블록(Block)’과 ‘인라인(Inline)’의 차이였습니다. 오늘 이 글을 다 읽으시면,

2013년 여름, 제가 웹 에이전시에서 퍼블리싱 팀장으로 일할 때였습니다. 갓 입사한 신입 디자이너가 울상을 지으며 제게 찾아왔습니다. “팀장님, 제가 디자인한 건 텍스트가 이미지 위에 올라가 있는데, 코딩된 페이지에선 자꾸 아래로 떨어져요.” 저는 그 친구의 모니터 화면(포토샵)과 제 모니터 화면(VS Code)을 나란히 두고 말했습니다. “포토샵 레이어 패널에서 폴더를 접었다 폈다 하시죠? 코딩도 똑같아요. 단지 마우스로 드래그하느냐,