HTML·CSS 웹 입문 24강

웹과 HTML/CSS 개요

웹은 클라이언트(브라우저)-서버가 HTTP로 주고받는 구조이며, HTML(구조)·CSS(표현)·JavaScript(동작)의 역할 분담과 브라우저가 DOM·CSSOM을 거쳐 화면을 그리는 렌더링 과정을 개괄합니다.

개발 환경과 첫 페이지

코드 에디터 VS Code를 설치하고, HTML 문서의 기본 골격(doctype·html·head·body)을 직접 작성해 브라우저로 열어보며 첫 웹 페이지를 만든다.

기본 태그

웹 페이지의 뼈대를 이루는 가장 기본적인 텍스트 태그들 — 제목(h1~h6), 문단(p), 줄바꿈(br), 구분선(hr) — 을 코드로 익히고, 브라우저가 공백을 처리하는 방식까지 이해한다.

목록과 링크

여러 항목을 나열하는 목록(순서 없는 ul, 순서 있는 ol, 항목 li)과, 다른 페이지로 이동하는 하이퍼링크(a 태그와 href 속성)를 코드로 익히고, 내부·외부 링크와 새 탭 열기까지 다룬다.

이미지와 미디어

웹 페이지에 그림을 넣는 img 태그(src·alt 속성)와 파일 경로 지정법을 익히고, video·audio 태그로 동영상과 소리를 넣는 기본까지 코드로 배운다.

표 만들기

데이터를 행과 열로 정리해 보여 주는 표를 만든다. table·tr·th·td의 기본 구조와 thead·tbody 구분, 그리고 colspan·rowspan을 이용한 셀 병합까지 코드로 익힌다.

폼 기초

사용자가 정보를 입력하는 폼(form)의 기초를 익힌다. input의 type으로 만드는 텍스트·비밀번호·체크박스·라디오·버튼, label로 입력칸에 이름표를 붙이는 법을 코드로 배운다.

시맨틱 태그

의미 없는 div 대신, 영역의 역할을 이름으로 드러내는 시맨틱 태그(header·nav·main·section·article·aside·footer)로 페이지 구조를 짜는 법과 그 접근성·SEO 이점을 배운다.

CSS 시작하기

HTML 뼈대에 디자인을 입히는 CSS를 시작한다. '선택자 { 속성: 값; }'이라는 규칙 구조를 이해하고, 인라인·내부·외부의 세 가지 CSS 적용 방법과 각각의 권장 여부를 코드로 배운다.

선택자

원하는 요소만 콕 집어 스타일을 주는 CSS 선택자를 익힌다. 타입·클래스·아이디 선택자, 후손·자식 선택자, 그리고 여러 규칙이 충돌할 때 무엇이 이기는지(우선순위)의 기초를 코드로 배운다.

색상과 단위

색을 지정하는 여러 방법(이름·16진수·rgb)과 글자·배경 색을 다루는 법, 그리고 크기를 나타내는 단위(px·%·em·rem)의 차이와 쓰임을 코드로 익힌다.

텍스트 스타일

글자를 꾸미는 CSS 속성들을 익힌다. 크기(font-size)·굵기(font-weight)·서체(font-family), 줄 간격(line-height), 정렬(text-align)과 밑줄(text-decoration)을 코드로 다루며 읽기 좋은 글을 만든다.

박스 모델

모든 요소가 하나의 상자라는 박스 모델을 이해한다. 안쪽 여백(padding)·경계선(border)·바깥 여백(margin)의 네 겹 구조와, 크기 계산 방식을 바꾸는 box-sizing을 코드로 익혀 레이아웃의 토대를 다진다.

display와 배치

요소가 화면에 배치되는 기본 원리인 문서 흐름과 display 속성을 이해한다. block·inline·inline-block의 차이, 요소를 완전히 숨기는 none을 코드로 익혀 레이아웃의 기초를 세운다.

position

요소를 문서 흐름에서 떼어내 원하는 위치에 두는 position 속성을 익힌다. static·relative·absolute·fixed·sticky의 차이와 top·left 오프셋, 겹침 순서를 정하는 z-index를 코드로 배운다.

Flexbox ①

요소들을 손쉽게 한 줄로 정렬하는 Flexbox의 기초를 익힌다. display:flex로 만드는 플렉스 컨테이너, 방향(flex-direction), 주축 정렬(justify-content)과 교차축 정렬(align-items)을 코드로 배운다.

Flexbox ②

Flexbox의 유연한 배치 기능을 익힌다. 아이템 사이 간격(gap), 줄바꿈(flex-wrap), 그리고 남는 공간을 채우고 줄어드는 flex(grow·shrink·basis)를 코드로 배우며 실전 정렬 패턴을 만든다.

Grid 레이아웃

가로와 세로를 동시에 다루는 2차원 배치 도구 Grid를 익힌다. display:grid와 grid-template-columns로 격자를 만들고, fr 단위·repeat·gap을 활용해 반응형 카드 그리드까지 코드로 배운다.

반응형 디자인

하나의 페이지가 모바일·태블릿·데스크톱 어디서나 잘 보이게 하는 반응형 디자인을 익힌다. viewport 설정, 화면 크기에 따라 스타일을 바꾸는 미디어 쿼리, 그리고 모바일 우선 설계를 코드로 배운다.

전환과 애니메이션

페이지에 부드러운 움직임을 더하는 법을 익힌다. 상태 변화를 매끄럽게 잇는 transition, 요소를 이동·확대·회전하는 transform, 그리고 복잡한 움직임을 만드는 keyframes 애니메이션을 코드로 배운다.

변수와 재사용

값을 한 곳에서 관리해 재사용하는 CSS 변수(custom property)를 익힌다. :root에 변수를 정의하고 var()로 불러 쓰는 법, 그리고 공통 스타일을 분리해 유지보수하기 좋은 CSS를 만드는 법을 코드로 배운다.

실전 — 헤더·내비

지금까지 배운 시맨틱 태그·Flexbox·호버·반응형을 종합해 실제 웹사이트의 헤더와 내비게이션을 단계별로 만든다. 로고와 메뉴 배치, 호버 효과, 반응형 대응까지 완성한다.

실전 — 랜딩 페이지

강좌 전체를 종합해 히어로·특징·푸터로 이루어진 완전한 랜딩 페이지를 만든다. Flexbox로 히어로를 가운데 정렬하고 Grid로 특징 카드를 배치하며, 반응형까지 적용해 하나의 페이지를 완성한다.

배포와 다음 단계

내 컴퓨터에만 있던 웹 페이지를 인터넷에 공개하는 배포를 배운다. Netlify Drop과 GitHub Pages 두 가지 무료 배포 방법을 단계별로 익히고, 자바스크립트·프레임워크 등 앞으로의 학습 방향을 안내하며 강좌를 마무리한다.