01강-웹 프로그래밍 기초와 HTML 텍스트 요소

인터넷과 웹의 차이

인터넷: 전 세계 네트워크가 연결된 인프라
웹(Web): 인터넷 위에서 동작하는 서비스
이메일, 파일 전송, 게임, 웹 등은 모두 인터넷 인프라 위에서 제공되는 서비스들
웹은 HTTP, URL, HTML 등을 이용해 정보를 제공하는 서비스

웹사이트와 웹문서와 웹페이지

웹사이트: 여러 개의 웹페이지가 모여 하나의 서비스로 구성된 것
웹문서: 특정 주제나 기능을 중심으로 작성된 HTML 중심의 문서 집합
웹페이지: 브라우저에서 한 번에 보이는 개별 문서, 보통 하나의 HTML 파일

클라이언트와 서버 구조

웹은 기본적으로 클라이언트-서버 구조에서 동작한다

클라이언트: 서비스를 요청하는 쪽
- 대표 예: 웹 브라우저
서버: 요청받은 서비스를 제공하는 쪽
- 데이터와 문서를 저장하고 응답을 반환

기본 흐름

사용자가 URL 입력 → DNS 서버를 통해 IP 주소 확인 → 브라우저가 서버에 요청 전송 → 서버가 요청 처리 후 응답 반환 → 브라우저가 HTML 문서를 해석(parsing) → 화면에 렌더링

HTTP와 HTTPS의 의미

HTTP: 클라이언트와 서버가 데이터를 주고받기 위한 통신 규칙
HTTPS: HTTP에 보안 기능을 추가한 형태
실제 서비스에서는 보안 강화를 위해 HTTPS가 기본적으로 사용됨

웹페이지를 이루는 세 가지 기술

웹페이지는 크게 다음 세 가지 요소로 구성된다

HTML: 웹페이지의 구조와 내용
CSS: 웹페이지의 디자인과 스타일
JavaScript: 웹페이지의 동작과 상호작용

역할 구분

HTML = 뼈대
CSS = 디자인 / 인테리어
JavaScript = 기능 / 동작

HTML과 CSS와 JavaScript의 역할 분리

웹페이지를 만들 때는 각 기술의 역할을 섞지 않는 것이 중요하다

HTML은 구조와 의미
CSS는 디자인
JavaScript는 동작

즉, 글자 크기를 키우고 싶으면 HTML이 아니라 CSS로 처리해야 하고,
버튼 클릭 시 동작을 만들고 싶으면 JavaScript로 처리해야 한다

프론트엔드와 백엔드

웹 프로그래밍은 크게 두 영역으로 나뉜다

프론트엔드 프로그래밍

사용자가 직접 보는 화면을 개발
주로 사용하는 기술
- HTML
- CSS
- JavaScript

백엔드 프로그래밍

서버에서 동작하는 기능을 개발
데이터 처리, 데이터베이스, API 등을 담당

웹사이트 제작의 전체 흐름

웹사이트 제작은 보통 다음 순서로 진행된다

기획
디자인
퍼블리싱(HTML, CSS 작성)
프론트엔드 개발(JavaScript)
백엔드 개발
테스트
배포

이 강의에서는 주로 퍼블리싱과 프론트엔드 기초에 초점을 맞춘다

HTML 문서를 구성하는 요소

HTML 문서는 기본적으로 HTML 요소들의 조합으로 이루어진다

요소의 기본 형식

시작 태그
내용
종료 태그

예시 구조

<p>내용</p>
<a href="">링크</a>

태그와 속성의 기본 형식

HTML 요소

HTML 문서를 구성하는 기본 단위
하나의 요소는 보통 시작 태그와 종료 태그를 가짐

속성

요소에 추가 정보를 주는 역할
시작 태그 안에 작성
속성명="속성값" 형태로 사용

규칙

속성은 여러 개를 사용할 수 있음
속성값은 보통 큰따옴표로 묶음
등호 주변에는 공백 없이 작성하는 것이 일반적

내용 없이 단독으로 쓰는 요소

일부 요소는 내용이 없고 단독으로 사용된다

모든 요소에 공통으로 쓰는 속성

대부분의 HTML 요소에서 공통으로 사용할 수 있는 속성들이다

대표 예

id: 요소를 고유하게 식별
class: 여러 요소를 같은 그룹으로 묶음
title: 마우스를 올렸을 때 설명 표시

추가 예

data-*: 화면에는 보이지 않지만 개발용 정보를 저장
role, aria-*: 웹 접근성을 위한 속성

HTML 작성 시 기본 규칙

태그 이름은 보통 소문자로 작성
파일 확장자는 html 또는 htm
공백을 여러 번 입력해도 브라우저에서는 보통 한 칸만 인식
요소는 중첩할 수 있지만 먼저 열린 태그는 나중에 닫혀야 함

HTML 문서의 전체 틀

HTML 문서는 다음과 같은 기본 구조를 가진다

<!DOCTYPE html>
<html>
<head>
<body>

이 구조를 템플릿처럼 두고 필요한 내용을 채워 넣어 작성한다

HTML5 문서 선언

<!DOCTYPE html>
현재 문서가 HTML5 문서임을 선언
반드시 문서의 첫 줄에 작성해야 함

html 태그의 역할

문서 전체를 감싸는 최상위 요소
문서의 시작과 끝을 나타냄
lang 속성으로 문서 언어를 지정

예

lang="ko": 한국어 문서

이 값은 검색 엔진, 브라우저, 스크린 리더가 문서를 해석하는 데 중요하다

head 영역에 들어가는 정보

웹페이지의 메타 정보를 담는 영역
화면에 직접 보이지 않음
브라우저, 검색 엔진, 외부 서비스가 참고하는 정보 포함

body 영역에 들어가는 내용

실제 브라우저 화면에 출력되는 본문 영역
사용자가 눈으로 보게 되는 모든 내용이 이 안에 들어감

주석을 작성하는 방법

HTML에서는 주석을 사용해 설명을 남길 수 있다

주석은 화면에 출력되지 않음
문서의 어느 위치에서나 사용할 수 있음

또한 CSS와 JavaScript는 각각 다른 형식의 주석 문법을 가진다

meta 태그가 담는 정보

meta 요소는 문서에 대한 추가 정보를 제공한다

대표 예

문자 인코딩 지정
검색 결과 설명
모바일 화면 설정
작성자 정보
키워드 정보

특히 자주 쓰는 것

charset="UTF-8"
- 한글 깨짐 방지
description
- 검색 결과에 표시될 설명
viewport
- 모바일 반응형 페이지에서 중요

Open Graph 설정

SNS 공유 시 제목, 설명, 이미지 등을 제어하기 위한 메타 정보다

대표 항목

og:title
og:description
og:image
og:url

브라우저 탭 제목 지정

title 요소는 브라우저 탭 제목으로 표시
즐겨찾기 제목으로 사용
검색 결과 제목에도 활용

따라서 페이지마다 고유하고 구체적인 제목을 작성하는 것이 중요하다

외부 CSS와 내부 CSS 연결

link 요소

외부 CSS 파일 연결

style 요소

문서 내부에 CSS를 직접 작성

CSS는 보통 head 안에 배치하는 것이 일반적이다

JavaScript 연결 방식

JavaScript 코드를 작성하거나 외부 JS 파일을 연결할 때 사용

보통

외부 JS 파일 사용
defer 속성과 함께 head 안에 배치

defer를 사용하면 HTML 파싱을 막지 않고 문서가 다 준비된 뒤 스크립트를 실행할 수 있다

base 태그를 조심해서 써야 하는 이유

문서의 기본 URL이나 기본 링크 동작 방식을 지정

하지만

경로 혼란을 일으킬 수 있고
유지보수에 불편할 수 있어서

가능하면 사용을 자제하는 편이 좋다

HTML 문서 작성 도구

문서 작성 도구

메모장 같은 단순 텍스트 편집기
또는 전문 코드 편집기

Visual Studio Code에서 유용한 확장

Live Server
- 저장 즉시 실행 결과 확인 가능
- 로컬 서버 형태로 실행 가능
Prettier
- 코드 정리(포맷팅)

브라우저 실행과 개발자 도구

작성한 HTML 파일은 브라우저에서 실행
F12를 누르면 개발자 도구 열기 가능

개발자 도구에서 할 수 있는 것

HTML 구조 확인
CSS 적용 상태 확인
JavaScript 오류 확인
콘솔 출력 보기
네트워크 요청 확인

텍스트 요소를 선택하는 기준

텍스트 요소는 단순히 모양 때문에 선택하면 안 된다

“크게 보이게 하고 싶다”
“굵게 보이게 하고 싶다”

이런 이유보다 먼저
이 요소가 어떤 의미를 가지는가를 기준으로 선택해야 한다

줄 바꿈을 넣는 br 태그

줄 바꿈을 나타냄
텍스트 편집기의 엔터와 비슷한 역할

적절한 예

주소
시
가사
전화번호처럼 줄 바꿈 자체가 의미가 있는 경우

주의할 점

줄 간격을 벌리기 위해 br을 여러 개 연속 사용하는 것은 바람직하지 않음
간격 조절은 CSS로 해야 함

문단을 만드는 p 태그

하나의 문단(단락) 을 나타냄
독립된 문단을 표현할 때 사용

특징

문단 앞뒤로 자동 줄 바꿈
문단 사이에 기본 여백 존재

주의할 점

p 안에 또 다른 p를 넣는 식으로 중첩하면 의미적으로 부적절
문단 간 간격 조절은 CSS로 처리

구분선을 넣는 hr 태그

단순히 선을 그리는 용도가 아니라
주제 전환 또는 내용 구분을 나타내는 요소

특징

화면에는 수평선처럼 보임
자동 줄 바꿈이 적용됨

주의할 점

단순한 시각 효과용 선은 CSS로 처리하는 것이 바람직함

제목 구조를 만드는 h1부터 h6까지

제목 구조를 나타내는 요소
문서의 목차 구조를 표현할 때 사용

규칙

h1: 페이지의 대표 제목, 보통 한 페이지에 하나
숫자가 작을수록 더 상위 제목
h1 → h2 → h3 순서로 구조적으로 사용

중요한 점

글자를 크게 보이게 하려고 h 태그를 쓰면 안 됨
제목 구조 표현 용도로만 사용해야 함
검색 엔진이 문서 구조를 이해하는 데 매우 중요

공백과 줄 바꿈을 그대로 보여주는 pre 태그

작성한 공백과 줄 바꿈을 그대로 유지해서 출력
텍스트 편집기에서 보이는 형태를 그대로 보여주고 싶을 때 사용

주요 용도

소스코드 표현
정해진 서식을 유지해야 하는 텍스트

자주 함께 쓰는 요소

code

긴 인용문을 나타내는 blockquote 태그

긴 인용문을 블록 단위로 표현
일반적으로 들여쓰기가 적용됨

특징

독립된 인용 영역을 형성
출처 정보를 함께 표시하는 것이 좋음

짧은 인용문은 보통 다른 요소를 사용해 표현한다

특수문자를 입력하는 엔티티

HTML에서 직접 쓰기 어려운 문자나 특수 문자는 엔티티로 입력한다

주의할 점

공백을 여러 개 띄우기 위해 엔티티를 남용하는 것은 좋지 않음
간격 조절은 가급적 CSS로 처리

물리적 요소와 논리적 요소의 차이

물리적 요소

모양 자체에 초점
예: 굵게, 기울임, 밑줄

논리적 요소

의미에 초점
예: 중요함, 강조함, 약어, 키보드 입력 등

가능하면 물리적 요소보다 논리적 요소를 우선 사용하는 것이 좋다

의미를 담는 텍스트 요소들

대표 예

strong: 매우 중요함
em: 강조
mark: 형광펜처럼 강조
kbd: 키보드 입력
abbr: 약어
code: 코드
var: 변수
samp: 샘플 출력

이런 요소들은 단순한 시각 효과보다 의미를 전달하는 데 중요하다

블록 요소와 인라인 요소의 차이

HTML 요소는 크게 두 종류로 나뉜다

블록 요소

한 줄 전체를 차지
자동 줄 바꿈 발생
너비/높이 조절 가능

인라인 요소

내용만큼만 공간 차지
줄 바꿈 없이 옆으로 이어짐
크기 조절에 제한이 있음

div와 span의 쓰임새

둘 다 콘텐츠를 묶는 컨테이너 역할을 한다

div

블록 요소를 묶는 블록 컨테이너
여러 요소를 한 덩어리로 묶어 CSS를 적용할 때 자주 사용

span

인라인 텍스트 일부를 묶는 인라인 컨테이너
문장 중 일부 텍스트만 선택적으로 스타일을 줄 때 사용

div 남용을 피해야 하는 이유

div는 의미가 없는 일반 컨테이너다
따라서 남용하지 않는 것이 중요하다
가능하면 의미를 가진 시멘틱 요소를 먼저 사용하고
정말 적절한 요소가 없을 때 div를 사용하는 것이 좋다

정리

인터넷은 인프라이고, 웹은 그 위에서 동작하는 서비스다
웹페이지는 HTML, CSS, JavaScript 세 요소로 구성된다
HTML은 구조와 의미를 담당하며, CSS는 디자인, JavaScript는 동작을 담당한다
HTML 문서는 DOCTYPE, html, head, body의 기본 구조를 가진다
텍스트 요소를 사용할 때는 모양보다 의미와 구조를 기준으로 선택해야 한다
br, p, hr, h1~h6, pre, blockquote 등은 각각 고유한 의미와 용도가 있다
웹 표준, 접근성, 검색 엔진 최적화, 유지보수를 고려해 문서를 작성하는 것이 중요하다