HTML/CSS

HTML 코드가 깔끔한 디자인의 PDF 문서로 변환되는 과정을 보여주는 아이소메트릭 일러스트레이션. HTML 파일 PDF 변환, CSS 스타일 유지.

HTML 파일 PDF 변환 방법 자세히 (크롬 인쇄 설정부터 무료 툴 추천까지)

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

HTML 파일 PDF 변환 방법 자세히 (크롬 인쇄 설정부터 무료 툴 추천까지) 더 읽기"

무거운 바위(원본 폰트)와 가벼운 깃털(서브셋 폰트)이 웹 브라우저 게이트를 통과하는 모습을 비교한 아이소메트릭 일러스트

프리텐다드(Pretendard) 로딩 속도 0.1초로 줄이는 최적화 코드 공유

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

프리텐다드(Pretendard) 로딩 속도 0.1초로 줄이는 최적화 코드 공유 더 읽기"

CSS 코드와 함께 웹페이지 요소 위에 겹쳐지는 투명한 레이어를 보여주는 아이소메트릭 일러스트레이션

밋밋한 웹사이트 심폐소생술: CSS 가상 요소로 디테일 200% 올리는 법

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

밋밋한 웹사이트 심폐소생술: CSS 가상 요소로 디테일 200% 올리는 법 더 읽기"

찌그러진 원본 이미지와 object-fit cover 속성으로 비율이 유지된 이미지를 비교한 아이소메트릭 일러스트

CSS object-fit: cover 완벽 가이드: 반응형 이미지 비율 유지하기

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

CSS object-fit: cover 완벽 가이드: 반응형 이미지 비율 유지하기 더 읽기"

픽셀(px), em, rem 단위의 반응형 동작 원리를 비교한 아이소메트릭 다이어그램, 웹 디자인 단위 비교

CSS 단위 완벽 정리: px, em, rem 차이와 실무 사용 공식

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

CSS 단위 완벽 정리: px, em, rem 차이와 실무 사용 공식 더 읽기"

화려한 그라데이션 배경 위에 떠 있는 반투명한 유리 질감의 카드 UI, 텍스트 가독성이 확보된 상태

애플 홈페이지의 그 느낌: CSS backdrop-filter로 3분 만에 구현하기

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

애플 홈페이지의 그 느낌: CSS backdrop-filter로 3분 만에 구현하기 더 읽기"

엉망으로 쌓인 DIV 박스 더미와 깔끔하게 정리된 시맨틱 태그 서랍장을 비교한 아이소메트릭 일러스트

SEO 점수 올리는 HTML 시맨틱 태그 작성법 (초보자 실수 5가지)

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

SEO 점수 올리는 HTML 시맨틱 태그 작성법 (초보자 실수 5가지) 더 읽기"

반응형 웹 디자인을 위한 스마트폰, 태블릿, PC 화면 크기별 레이아웃 변화 아이소메트릭 다이어그램

반응형 웹의 모든 것: CSS 미디어 쿼리 분기점 완벽 가이드

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

반응형 웹의 모든 것: CSS 미디어 쿼리 분기점 완벽 가이드 더 읽기"

VS Code 확장 프로그램 마켓플레이스 화면에 Live Server, Prettier 등 추천 아이콘이 강조된 모습

아직도 F5 누르세요? 초보 퍼블리셔의 코딩 속도가 2배 빨라지는 VS Code 세팅법

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

아직도 F5 누르세요? 초보 퍼블리셔의 코딩 속도가 2배 빨라지는 VS Code 세팅법 더 읽기"

워드프레스 Astra 테마 모바일 메뉴 버튼의 기본 상태와 CSS 커스텀 후의 비교 이미지

워드프레스 Astra 모바일 메뉴 버튼, CSS로 크기·색상·디자인 내 맘대로 바꾸기

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

워드프레스 Astra 모바일 메뉴 버튼, CSS로 크기·색상·디자인 내 맘대로 바꾸기 더 읽기"