Frontend2026년 6월 29일
HTML 시맨틱 태그 — div와 무엇이 다르고 언제 무엇을 쓸까
header·nav·main·section·article·aside·footer가 각각 무엇을 뜻하는지, div와 어떻게 다른지, 스크린리더·검색엔진이 얻는 이점과 흔한 오용까지 표로 정리했습니다. div만 쓰던 입문자가 구조에 의미를 입히고 싶을 때 맞는 글입니다.
Category — 카테고리
Frontend
HTML·CSS를 처음 만지는 사람을 위한 단계별 강의. 흔한 실수와 함께 따라하는 실습 위주.
← 모든 글 보기Frontend2026년 6월 29일
웹 접근성 기초 — 시맨틱·ARIA·색 대비·포커스 한 번에 챙기기
마우스를 못 쓰거나 화면이 잘 안 보이는 사람도 같은 페이지를 끝까지 쓸 수 있게 만드는 법을 정리합니다. 시맨틱 태그, aria-label, 색 대비, 키보드 포커스 네 가지를 한 번에 익혀 키보드만으로 페이지를 처음부터 끝까지 다녀 봅니다.
Frontend2026년 6월 27일
CSS 변수 사용법 — var()와 :root로 정의하고 다크모드까지
CSS 변수(커스텀 속성)를 --이름으로 선언하고 var()로 꺼내 쓰는 법을, :root 전역 선언부터 상속·폴백·다크모드 토글까지 예제로 정리했습니다. 색·간격을 한곳에서 관리하고 싶은 입문자에게 맞습니다.
Frontend2026년 6월 27일
CSS 다크 모드 — prefers-color-scheme와 변수로 라이트/다크 전환하기
같은 페이지를 색 값만 바꿔 라이트와 다크 두 모습으로 보여 주는 법을 정리합니다. 시스템 설정을 감지하는 prefers-color-scheme와 CSS 변수를 묶어, 색을 곳곳에 흩지 않고 한곳에서 갈아 끼우는 방식을 익힙니다.
Frontend2026년 6월 26일
CSS 가상 클래스와 가상 요소 — 콜론 하나(:)와 둘(::)의 차이
가상 클래스(:hover, :nth-child)와 가상 요소(::before, ::after)가 콜론 하나·둘로 어떻게 갈리는지, 각각 무엇을 고르고 무엇을 만드는지 예제와 비교 표로 정리했습니다. 선택자 뒤에 붙는 :과 ::가 헷갈리는 입문자에게 맞습니다.
Frontend2026년 6월 26일
그림자·필터·클립패스 — box-shadow 입체감부터 clip-path 도형까지
같은 카드 하나를 종이처럼 띄우고, 유리처럼 비치게 하고, 원하는 도형으로 잘라내는 세 가지 CSS 비주얼 디테일을 한 번에 정리합니다. box-shadow·text-shadow로 입체감을, filter·backdrop-filter로 유리 느낌을, clip-path로 사각형 밖의 도형을 만드는 법을 다룹니다.
Frontend2026년 6월 25일
CSS 선택자 우선순위 — 점수 계산법과 CSS가 안 먹을 때
선택자 우선순위(명시도)를 ID·클래스·타입 세 칸으로 세는 법과 inline style·!important의 위치, 점수가 같을 때 무엇이 이기는지 한 표로 정리했습니다. 분명히 쓴 CSS가 적용되지 않아 헤매는 입문자에게 맞습니다.
Frontend2026년 6월 25일
CSS Animation — @keyframes로 만드는 첫 무빙 UI
transition이 두 상태 사이를 한 번 건너가는 일이라면, animation은 여러 장면을 순서대로 이어 스스로 움직이는 UI를 만드는 일입니다. @keyframes로 장면을 그리는 법, animation 줄임 표기, 무한 반복 스피너와 첫 진입 카드 등장, 그리고 모션을 불편해하는 사용자를 위한 prefers-reduced-motion까지 다룹니다.
Frontend2026년 6월 24일
CSS 단위 차이 — px·em·rem·vw·vh, 언제 무엇을 쓸까
절대 단위 px와 상대 단위 em·rem·%·vw·vh가 각각 무엇을 기준으로 삼는지, em 중첩 곱셈과 100vh 모바일 함정까지 한 표로 정리했습니다. 단위가 헷갈려 글자·여백 크기가 의도와 다르게 나오는 입문자에게 맞습니다.
Frontend2026년 6월 24일
CSS Transition — 호버를 부드럽게, 그러나 너무 길지 않게
호버처럼 값이 바뀔 때 그 변화가 툭 끊기지 않고 부드럽게 이어지게 하는 CSS transition을, 문을 쾅 닫지 않고 천천히 닫아 주는 도어 클로저에 빗대 익힙니다. transition의 네 부분(속성·시간·속도 곡선·지연), transition: all을 피해야 하는 이유, ease와 cubic-bezier로 자연스러운 속도 곡선을 고르는 법까지 다룹니다.
Frontend2026년 6월 23일
CSS 애니메이션 keyframes 사용법 — @keyframes와 animation 속성 정리
@keyframes로 구간을 정의하고 animation 속성으로 재생하는 법을, 여덟 가지 하위 속성과 무한 반복·transition과의 차이·성능·접근성까지 한 페이지에 정리했습니다. 버튼을 넘어 스스로 움직이는 애니메이션을 만들고 싶은 입문자에게 맞습니다.
Frontend2026년 6월 23일
CSS Transform — translate로 옮기고 rotate로 회전, 자리는 그대로
요소를 레이아웃 자리에서 떼지 않고 옮기고(translate)·돌리고(rotate)·키우는(scale) CSS transform을, 벽에 건 액자를 못은 그대로 두고 비스듬히 기울이는 일에 빗대 익힙니다. margin·top으로 옮길 때와 무엇이 다른지, transform-origin으로 회전 기준점을 바꾸는 법, 카드 호버에 살짝 떠오르는 효과를 주는 법까지 다룹니다.
Frontend2026년 6월 22일
CSS transition 사용법 — hover 애니메이션 부드럽게 만들기
CSS transition으로 색·크기·위치 변화를 부드럽게 만드는 법을 네 가지 속성, hover 결합, transform 조합, 안 먹는 원인까지 한 페이지에 정리했습니다. 버튼·카드에 움직임을 주고 싶은 입문자에게 맞습니다.
Frontend2026년 6월 22일
::before와 ::after 차이 — content 속성으로 본문 앞뒤에 장식 붙이기
HTML에 태그를 더 쓰지 않고도 본문 앞뒤에 따옴표·체크 표시·뱃지 같은 장식을 자동으로 붙이는 ::before/::after 의사 요소를, 책에 매다는 작은 장식 끈에 빗대 익힙니다. content 속성이 없으면 왜 아무것도 안 보이는지, attr()와 counter로 값을 자동으로 끌어오는 법까지 다룹니다.
Frontend2026년 6월 21일
position absolute relative 차이 — 5가지 한눈에
CSS position의 static·relative·absolute·fixed·sticky 차이를 기준과 흐름 중심으로 정리하고, absolute의 기준이 무엇인지와 z-index가 안 먹는 이유까지 짚습니다. position이 매번 헷갈리는 분께 맞습니다.
Frontend2026년 6월 21일
CSS Grid 사용법 — 행·열 2차원 레이아웃 한 번에
CSS Grid로 행과 열을 동시에 잡는 법을 grid-template, repeat·minmax 반응형, 영역 배치, grid vs flex 선택까지 한 페이지에 정리했습니다. 레이아웃이 매번 헷갈리는 입문자에게 맞습니다.
Frontend2026년 6월 21일
CSS flexbox 정렬 — 주축·교차축으로 한 번에 이해하기
flexbox로 요소를 정렬·배치하는 법을 주축/교차축 개념부터 컨테이너·아이템 속성, 실전 예제, 안 될 때 원인까지 한 페이지에 정리했습니다. flex가 매번 헷갈리는 입문자에게 맞습니다.
Frontend2026년 6월 21일
scroll-snap과 sticky 헤더 — JavaScript 없이 만드는 스크롤 인터랙션
스크롤이 아무 데서나 멈추지 않고 한 화면씩 딱 맞춰 멈추게 하는 scroll-snap을, 책장 넘기는 감각에 빗대 익힙니다. mandatory와 proximity의 차이, sticky 헤더와 함께 인스타 스토리 같은 풀스크린 슬라이드를 자바스크립트 없이 만드는 실습까지 다룹니다.
Frontend2026년 6월 20일
HTML 특수문자 정리 — 자주 쓰는 엔티티 표와 쓰는 법
부등호 < > 와 앰퍼샌드 &, 공백 nbsp, 저작권·화살표 기호까지 실제로 자주 쓰는 HTML 특수문자만 표로 모았습니다. 왜 엔티티가 필요한지, 이름 참조와 숫자 참조의 차이까지 입문자가 헷갈리는 지점을 짚습니다.
Frontend2026년 6월 20일
CSS 변수 — var()와 --custom으로 디자인 토큰 만들기
색·간격 같은 값에 이름표를 붙여 한곳에서 관리하는 CSS 변수를 익힙니다. :root에 표준 값을 두고 var()로 꺼내 쓰고, 색 5개를 변수로 묶어 다크 모드를 한 줄로 전환하는 실습까지 다룹니다.
Frontend2026년 6월 19일
CSS 미디어쿼리 사용법 — 모바일 퍼스트 반응형 한 번에 정리
@media 문법부터 min-width와 max-width의 차이, 자주 쓰는 breakpoint까지 복사해 바로 쓰는 예제로 정리했습니다. 반응형 CSS를 어디서부터 잡아야 할지 막막한 입문자에게 맞습니다.
Frontend2026년 6월 19일
반응형 이미지 — srcset로 해상도 고르고 object-fit으로 칸에 맞추기
작은 액자엔 작은 인화를, 큰 액자엔 큰 인화를 넣듯, 화면 크기와 화질에 맞는 이미지를 브라우저가 알아서 고르게 하는 srcset·picture를 익힙니다. 고른 이미지를 정해진 칸에 깔끔히 담는 object-fit·object-position·aspect-ratio까지, 같은 사진을 두 해상도로 자동 선택되게 만드는 실습으로 배웁니다.
Frontend2026년 6월 18일
HTML input type 종류 정리 — 표로 한눈에, 자주 쓰는 속성까지
text부터 date·email·number·file까지 HTML input의 type을 표 하나로 정리했습니다. 폼을 만들 때 매번 찾게 되는 required·placeholder·pattern 같은 속성도 함께 묶어 바로 골라 쓰게 했습니다.
Frontend2026년 6월 18일
반응형 디자인 — 미디어 쿼리와 모바일 퍼스트 사고
한 벌의 옷을 키와 체형에 맞춰 늘리고 줄이듯, 같은 페이지를 화면 폭마다 다르게 입히는 미디어 쿼리와 모바일 퍼스트 사고를 익힙니다. min-width와 max-width의 차이, breakpoint를 기기가 아니라 콘텐츠로 정하는 법, 한 페이지를 모바일·태블릿·데스크톱 3단계로 만드는 실습까지 다룹니다.
Frontend2026년 6월 17일
Grid 심화 — grid-template-areas와 auto-fit/auto-fill로 만드는 반응형 격자
지난 시간에 그린 격자에 이름표를 붙여 신문 1면처럼 영역을 배치하고, repeat(auto-fit, minmax())로 화면 폭에 따라 카드가 알아서 줄바꿈되는 grid 반응형 레이아웃을 만듭니다. auto-fit과 auto-fill의 차이, minmax()로 최소 폭을 지키는 법까지 한 번에 정리합니다.
Frontend2026년 6월 15일
Grid 기초 — display:grid와 grid-template-columns의 첫 만남
Flexbox가 한 줄 정렬이라면 Grid는 가로·세로를 동시에 칸으로 나누는 도구입니다. display:grid로 격자를 펼치고, grid-template-columns로 열을, fr 단위로 폭을 비율대로 나눠 3×3 사진 갤러리를 직접 만들어 봅니다. fr와 px의 차이, repeat()로 12칸 격자를 줄여 쓰는 법까지 한 번에 정리합니다.
Frontend2026년 6월 6일
Flexbox 심화 — flex-grow/shrink/basis와 gap으로 공간 나누기
한 줄에 세운 flex 아이템들이 남는 공간을 어떻게 나눠 갖고(flex-grow) 좁아질 땐 어떻게 줄어드는지(flex-shrink), 그 출발점이 되는 flex-basis까지 한 번에 정리합니다. flex: 1과 flex-grow: 1은 왜 결과가 다른지, gap으로 간격을 깔끔하게 주는 법, align-items로 교차축을 맞추는 법을 사이드바·본문 레이아웃으로 익힙니다.
Frontend2026년 6월 5일
VS Code 단축키 — 매일 쓰는 것만, 맥·윈도우 한 번에
VS Code에서 손이 가장 자주 가는 단축키만 골라 맥과 윈도우 키를 나란히 정리했습니다. 멀티커서, 줄 이동·복사, 바꾸기처럼 자주 헷갈리는 것 위주라 필요할 때 바로 찾아 쓸 수 있습니다.
Frontend2026년 6월 5일
Flexbox 정렬 기초 — display:flex, flex-direction, justify-content
`display: flex` 한 줄로 자식들을 한 줄에 세우고, flex-direction으로 방향을, justify-content로 줄을 따라 모으거나 벌리는 법을 헤더 예제로 익힙니다. justify-content와 align-items가 각각 어느 축을 맡는지, flex-direction을 바꾸면 왜 정렬이 돌아가는지까지 한 번에 정리합니다.
Frontend2026년 6월 4일
CSS 가운데 정렬, 가로·세로 한 번에 정리
text-align과 margin auto, 그리고 flex로 요소를 가운데 두는 법을 한 페이지에 모았습니다. 왜 가운데 정렬이 자꾸 안 되는지, 실패하는 이유까지 짚습니다.
Frontend2026년 6월 4일
float의 시대는 끝났다 — 그래도 알아야 하는 이유와 clearfix
한때 웹 페이지의 모든 레이아웃을 책임졌던 float은 지금 Flexbox와 Grid에 그 자리를 내줬습니다. 신문 편집에 빗대 float이 여전히 맞는 자리(이미지 둘레로 흐르는 텍스트)와, 부모 높이가 무너질 때 쓰는 clearfix, 같은 2단 배치를 flex로 다시 만드는 법을 예제로 정리합니다.
Frontend2026년 6월 3일
position 5종 — static, relative, absolute, fixed, sticky 한 번에 정리
요소를 보통 흐름에서 떼어내 원하는 자리에 고정하거나 띄우는 position 다섯 값을, 전시실 벽에 무언가를 거는 일에 빗대 정리합니다. absolute가 어느 조상을 기준으로 잡는지, sticky가 안 먹는 진짜 이유, z-index가 가려지는 까닭까지 예제로 짚습니다.
Frontend2026년 6월 1일
display 속성 — block, inline, inline-block의 정확한 차이
display 한 줄로 요소가 줄을 따라 흐를지, 한 줄을 통째로 차지할지가 정해집니다. inline에 width가 안 먹는 이유, inline-block의 한계, display:none과 visibility:hidden의 자리 차이까지 예제로 정리합니다.
Frontend2026년 5월 31일
배경 — background-color, 이미지, 그리고 CSS 그라데이션
단색 배경부터 배경 이미지, linear-gradient로 만드는 그라데이션까지 background 속성으로 페이지 분위기를 바꾸는 법을 정리합니다. cover와 contain의 차이, 그라데이션 각도까지 한 번에 잡습니다.
Frontend2026년 5월 30일
폰트와 타이포그래피 — font-family, line-height, 그리고 웹폰트 적용
글꼴을 고르는 font-family, 읽는 리듬을 정하는 line-height, 그리고 Pretendard 같은 한글 웹폰트를 불러와 적용하는 방법을 한 번에 정리합니다. line-height에 왜 단위 없는 숫자를 쓰는지, 웹폰트를 어떻게 불러야 첫 화면이 늦지 않는지까지, 글자를 '읽기 편하게' 앉히는 기준을 잡습니다.
Frontend2026년 5월 30일
색상과 단위 — hex·rgb·hsl과 px·rem·em, 어느 걸 언제 쓸까
색을 적는 hex·rgb·hsl 세 표기와 길이를 재는 px·rem·em·% 단위를 '무엇을 기준으로 재느냐'라는 한 가지 질문으로 꿰어 정리합니다. 글자 크기를 키워도 안 깨지는 화면을 만들려면 px 대신 무엇을 써야 하는지, 같은 카드를 세 단위로 만들어 직접 비교합니다.
Frontend2026년 5월 28일
박스 모델 — margin, padding, border 그리고 box-sizing
화면 위의 모든 요소는 사실 네 겹의 상자입니다. 내용물·완충재·포장지·바깥 간격으로 이뤄진 박스 모델을 선물 포장에 빗대 풀고, 너비 계산이 자꾸 어긋나는 원인인 box-sizing 한 줄까지 한 자리에 정리합니다.
Frontend2026년 5월 27일
우선순위와 캐스케이드 — 명시도 계산법과 !important의 함정
CSS가 '안 먹힐 때' 십중팔구는 우선순위 문제입니다. 같은 요소에 여러 선택자가 동시에 닿을 때 누가 이기는지를 정하는 명시도 계산법과 캐스케이드 순서를, 회사의 결재 라인에 빗대 한 자리에 정리합니다.
Frontend2026년 5월 26일
결합 선택자와 가상 클래스 — 자식·자손·형제 그리고 :hover, :nth-child
HTML 트리는 부모·자식·형제로 이어진 가족 관계도입니다. 자손·자식·형제 결합 선택자와 :hover·:focus·:nth-child를 한 번에 정리하고, 같은 카드 목록을 짝수·첫째·마지막만 다른 색으로 칠해 봅니다.
Frontend2026년 5월 25일
CSS 선택자 기초 — 태그·클래스·ID 그리고 언제 무엇을 쓰나
CSS의 선택자는 옷을 입힐 대상을 가리키는 이름입니다. 가장 자주 쓰는 세 가지 — 태그·클래스·ID의 차이와, 같은 디자인을 세 방식으로 만들었을 때 무엇이 달라지는지를 한 번에 정리합니다.
Frontend2026년 5월 24일
CSS 첫걸음 — 인라인·내부·외부, 스타일을 적용하는 세 가지 방법
CSS를 HTML 페이지에 끼우는 방법은 세 가지 — 외부 스타일시트, 내부 스타일시트, 인라인 스타일 — 입니다. 세 방식의 차이와 같은 자리에서 부딪칠 때의 우선순위, 평소에 무엇을 기본으로 두어야 하는지를 한 번에 정리합니다.
Frontend2026년 5월 23일
테이블과 글로벌 속성 — table은 표일 때만, id·class·data·aria는 무엇을 하나
자료를 행과 열로 보여 줄 때만 table 태그를 쓰고, 레이아웃을 잡는 데는 쓰지 않습니다. 모든 태그가 공통으로 가지는 id·class·data·aria 속성이 각각 어떤 일을 하는지, 영양성분표 한 장을 만들며 정리합니다.
Frontend2026년 5월 22일
폼 심화 — select, textarea, checkbox, radio, fieldset/legend
한 줄 입력 칸을 넘어 목록에서 고르는 select, 여러 줄을 받는 textarea, 하나만 고르는 라디오 버튼, 여러 개를 켜는 체크박스를 정리합니다. 흩어진 칸들을 fieldset과 legend로 한 묶음으로 엮어, 눈으로 보든 보조기기로 듣든 맥락이 통하는 폼을 만듭니다.
Frontend2026년 5월 21일
폼 기초 — form, input, label, button의 올바른 연결
사용자가 직접 정보를 입력하는 폼을 form·input·label·button 네 태그로 짭니다. label을 칸에 잇는 for/id, 값을 서버로 보내는 name, button의 type처럼 빠뜨리면 화면은 멀쩡한데 폼이 조용히 망가지는 연결을 하나씩 짚습니다.
Frontend2026년 5월 20일
시맨틱 태그 7개 — header, nav, main, section, article, aside, footer
div로만 채우던 페이지를 의미 있는 7개의 구역 태그로 다시 짭니다. section과 article은 어디서 갈리는지, main은 왜 한 페이지에 하나여야 하는지, aside는 정확히 어떤 자리에 쓰이는지를 정리합니다.
Frontend2026년 5월 19일
링크와 이미지 — a 태그, img 태그, 그리고 alt가 SEO에 미치는 영향
다른 페이지로 이어주는 a 태그와 그림을 끼워 넣는 img 태그를 한자리에 정리합니다. alt가 접근성·SEO·이미지 깨짐에서 각각 무슨 일을 하는지, 새 탭 링크를 안전하게 여는 법까지 짚습니다.
Frontend2026년 5월 18일
리스트 정리 — ul, ol, dl 언제 어떤 걸 쓰는가
항목을 나열할 때 ul·ol·dl 중 무엇을 골라야 하는지 의미를 기준으로 정리합니다. 메뉴는 꼭 ul이어야 하는지, dl은 대체 언제 쓰는지처럼 초보자가 자주 멈추는 지점을 짚습니다.
Frontend2026년 5월 17일
텍스트 태그 정리 — h1~h6, p, span, strong, em, 그리고 주석
제목·문단·강조를 화면 모양이 아니라 의미로 적는 법을 정리합니다. h1을 몇 개 써야 하는지, strong과 b가 무엇이 다른지처럼 초보자가 가장 자주 막히는 지점을 짚습니다.
Frontend2026년 5월 16일
메타 태그 — viewport, charset, og 이미지로 검색·공유 노출 잡기
검색 결과 카드와 카카오톡 미리보기를 결정하는 메타 태그를 한자리에 정리합니다. viewport로 모바일 화면을, og 태그로 공유 카드를 직접 만져보는 회입니다.
Frontend2026년 5월 15일
첫 HTML 파일과 문서 구조 — DOCTYPE, html, head, body의 역할
HTML 페이지의 첫 다섯 줄이 어떻게 생겼는지, 그 안에서 DOCTYPE·html·head·body가 각각 무슨 일을 하는지 풀어봅니다. 빈 페이지 한 채를 손으로 직접 짓는 첫 회입니다.
Frontend2026년 5월 14일
개발 환경 셋업 — VS Code와 Live Server로 HTML 시작하기
HTML 학습을 시작하는 첫날, 책상 위에 둘 도구를 정리합니다. VS Code 설치, Live Server 자동 새로고침, 안전한 폴더 구조까지 30분이면 끝납니다.
Frontend2026년 5월 13일
웹은 어떻게 동작할까 — 브라우저가 HTML을 그리는 순서
주소창에 URL을 치면 어떤 일이 벌어지는지, HTML이 화면이 되기까지의 흐름을 식당에 비유해 설명합니다. 초보자가 자주 헷갈리는 세 가지도 함께 짚습니다.