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 적용 방법과 각각의 권장 여부를 코드로 배운다.