Life is One coin인생은 한번뿐

Series — 시리즈

HTML+CSS 60일 강의

HTML과 CSS를 처음 만지는 사람을 위한 60일 단계별 강의. 이론 → 실습 → 클론 순서로 따라가며, 흔한 실수까지 함께 짚습니다.

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