HTML/CSS/JavaScript

이 장에서는 웹 페이지를 구성하는 세 가지 핵심 기술인 HTML, CSS, JavaScript의 기초를 다룹니다. 직접 코드를 짜는 연습이 아닙니다. Code 탭이 만들어 준 결과물을 열어 봤을 때 무엇이 무엇인지 알아보고, 고쳐 달라고 말할 수 있을 만큼만 익히는 것이 목표입니다.

프론트엔드(Frontend)는 여러분이 웹 브라우저에서 보고 계신 바로 그 화면단을 지칭합니다. 이 용어에서 '프론트(Front)'는 사용자와 가장 가까운 최전방을 의미하며, '엔드(End)'는 시스템의 한 끝단을 나타냅니다. 즉, 전체 웹 시스템에서 사용자와 직접 맞닿아 있는 부분이 프론트엔드입니다. 반대로 사용자에게는 보이지 않지만 서버에서 데이터를 처리하는 부분을 백엔드(Backend)라고 부릅니다. 백엔드는 9장에서 다룹니다.

1. 들어가기 전

간단한 실습을 통해 우리가 보고 있는 화면들이 어떻게 구성되어 있는지 확인해보도록 하겠습니다. 네이버에서 '로또'를 검색해보세요. 저는 크롬을 사용하고 있습니다. 크롬을 설치하고 실습을 따라와주세요.

네이버에서 로또를 검색한 화면입니다.

여기서 F12 또는 Ctrl + Shift + i, 맥북은 Cmd + opt + i를 누르면 개발자 도구가 열립니다. Elements 탭을 눌러주시고 왼쪽에 있는 화살표 모양을 클릭해주세요. 그리고 여러분이 수정을 원하는 곳에 커서를 가지고 가보세요.

개발자 도구를 열고 Elements 탭에서 요소 선택 화살표를 누른 화면입니다.

아래와 같이 요소를 선택한 다음 클릭해주세요.

로또 번호 요소 위에 마우스를 올리면 영역이 표시됩니다.

요소를 클릭하면 오른쪽에 해당 코드가 선택됩니다.

오른쪽에 <span class="ball type1">6</span>이라는 코드가 보이시나요? 이 코드가 로또 번호의 6을 만들어내는 텍스트입니다. 이것은 이미지도 아니고, 동영상도 아니에요. 단지 이 텍스트로 만들어내는 화면일 뿐입니다. 6이라는 숫자를 더블클릭하여 수정해보세요.

숫자 6을 더블클릭하면 글자를 고칠 수 있는 상태가 됩니다.

실제 텍스트가 수정이 된 것을 볼 수 있습니다.

수정한 숫자가 화면에 그대로 반영된 모습입니다.

이렇게 여러분이 보고 있으신 웹 페이지뿐만 아니라, 윈도우 화면, 맥북 화면, 게임 등 모든 것은 코드로 만들어지는 화면입니다. 그 중에서 웹 브라우저를 열어 보는 화면은 HTML, CSS, JavaScript라는 언어로 만들어진 화면입니다. 하나씩 살펴보도록 하겠습니다.

2. 실습 폴더 준비

이 장의 예제 파일은 여러분이 타이핑하지 않습니다. Code 탭에 만들어 달라고 하고, 만들어진 파일을 열어 읽어 보는 방식으로 진행합니다. 바탕화면에 FE라는 폴더를 하나 만들고, Code 탭에서 폴더 선택을 눌러 이 폴더를 지정해주세요. 폴더를 지정하는 방법이 기억나지 않으면 3장을 참고하세요.

폴더를 지정했다면 아래처럼 한 번에 요청합니다. 이 장에서 볼 예제 다섯 개를 한꺼번에 만들어 달라는 요청입니다.

이 폴더에 HTML 공부용 예제 파일을 만들어줘.

- 001.html: h1 태그와 p 태그만 있는 가장 단순한 문서
- 002.html: 001.html에 style 태그를 추가해서 h1 글자색을 파란색으로
- 003.html: 아이디 선택자와 클래스 선택자를 각각 하나씩 쓴 예제
- 004.html: 버튼을 누르면 h1 글자가 바뀌는 JavaScript 예제
- 005.html: DOCTYPE, html, head, body를 모두 갖춘 기본 구조 예제

각 파일은 짧게, 주석으로 설명을 달아줘.

작업이 끝나면 폴더에 파일 다섯 개가 생깁니다. 파일을 더블클릭하면 브라우저로 열립니다. 코드를 보고 싶다면 파일에서 마우스 오른쪽 버튼을 누르고 연결 프로그램 > 메모장(맥은 텍스트 편집기)을 선택하세요. 아래부터는 각 파일에 어떤 코드가 들어 있는지, 그 코드가 무슨 뜻인지 함께 읽어 봅니다. Claude가 만든 코드는 아래 예시와 조금 다를 수 있습니다. 괜찮습니다. 태그와 구조가 같은지만 보시면 됩니다.

3. HTML

기술	역할	비유
HTML	웹 페이지의 구조/뼈대	얼굴의 눈, 코, 입 등 구성요소
CSS	디자인/스타일링	위치, 색상, 크기 등 꾸미기
JavaScript	동작/상호작용	눈 깜빡임, 클릭 반응 등

라이캣 캐릭터로 HTML, CSS, JavaScript의 역할을 표현한 그림입니다.

HTML(Hyper Text Markup Language)은 웹 페이지의 뼈대를 만드는 언어입니다. 위에 사자탈을 쓴 고양이인 라이캣이라는 캐릭터가 있습니다. 이 캐릭터의 각 구성요소를 나타내는 것이 HTML이라고 보시면 됩니다.

001.html을 메모장으로 열어보세요. 형식은 <태그이름>콘텐츠</태그이름>의 형식을 가집니다.

<!-- 이 글자는 문서에 나타나지 않습니다. 주석이라 합니다. -->
<h1>안녕하세요.</h1>
<p>이것은 HTML 문서입니다.</p>

같은 파일을 더블클릭해 브라우저로 열면 아래와 같은 화면이 나올 것입니다. 여기서 h1은 대제목을 뜻합니다. h1, h2, h3 등 h6까지 있습니다. p는 문단을 뜻합니다. 태그를 전부 외울 필요는 없습니다. 우리는 바이브 코딩으로 나온 결과물을 해석하거나 유추할 수 있으면 됩니다.

001.html을 브라우저로 연 화면입니다. 큰 제목 하나와 문단 하나가 보입니다.

4. CSS

CSS(Cascading Style Sheets)는 HTML로 만든 뼈대에 옷을 입히는 언어입니다. 위 라이캣 캐릭터로 다시 설명하면, HTML이 눈, 코, 입, 사자탈 등의 콘텐츠를 넣었다면 CSS는 위치를 지정하고, 색을 칠하고, 모서리를 깎는 등의 역할을 하게 됩니다. 즉, 색상, 크기, 위치 조정 등 모든 디자인을 담당합니다.

002.html을 열어보세요. 아래와 같은 코드가 들어 있을 것입니다.

<style>
h1 {
    color: blue;
}
</style>
<!-- 이 글자는 문서에 나타나지 않습니다. 주석이라 합니다. -->
<h1>안녕하세요.</h1>
<p>이것은 HTML 문서입니다.</p>

브라우저로 열면 아래와 같이 글자의 색이 바뀌어 있을 것입니다.

002.html을 브라우저로 연 화면입니다. 제목 글자가 파란색으로 바뀌었습니다.

<style>이라는 태그를 사용하여 CSS 문서를 작성합니다. 여기 안에 있는 h1은 선택자라고 부릅니다. 아래 태그 중에 해당 선택자를 가진 것을 꾸며주겠다는 것이죠.

이 선택자는 크게 태그, 아이디, 클래스 3개로 나뉩니다. 바이브 코딩을 하게 되면 이 3개를 자주 접하게 될 테니 알고 가는 것을 권합니다. 위에서는 h1 태그를 선택자로 썼습니다.

선택자 유형	표기법	특징	사용 예
태그	태그이름	모든 해당 태그에 적용	`h1 { color: blue; }`
아이디	#이름	문서에서 단 하나만 사용	`#special { color: red; }`
클래스	.이름	여러 요소에 반복 사용 가능	`.highlight { background: yellow; }`

003.html은 아이디와 클래스를 선택자로 쓰는 예제입니다.

<style>
/* 이건 CSS의 주석입니다. 코드에 영향을 미치지 않습니다. */
/* 아이디 선택자는 #으로 시작합니다 */
#special {
    color: red;
    font-size: 24px;
}

/* 클래스 선택자는 .으로 시작합니다 */
.highlight {
    background-color: yellow;
    padding: 5px;
}
</style>

<h1 id="special">아이디로 선택된 제목</h1>
<p class="highlight">클래스로 선택된 문단입니다.</p>
<p class="highlight">클래스는 여러 요소에 적용할 수 있습니다.</p>

브라우저로 열면 아래와 같이 보여집니다.

003.html을 브라우저로 연 화면입니다. 빨간 제목과 노란 배경의 문단 두 개가 보입니다.

아이디(id)는 문서에서 단 하나의 요소에만 사용되며, 클래스(class)는 여러 요소에 반복해서 사용할 수 있습니다. 나중에 Code 탭에 "highlight 클래스의 배경색을 연두색으로 바꿔줘"처럼 말할 수 있게 되는 것이 이 표를 익히는 이유입니다.

5. JavaScript

JavaScript는 웹 페이지에 생명을 불어넣는 언어입니다. HTML이 뼈대를 만들고, CSS로 꾸몄다면, JavaScript는 움직임과 상호작용을 만들어냅니다. 라이캣 캐릭터로 비유하자면, 눈을 깜빡이게 하거나, 클릭했을 때 인사를 하게 만드는 것이 JavaScript의 역할입니다.

004.html을 열어보세요.

<h1 id="greeting">안녕하세요!</h1>
<button onclick="changeText()">클릭해보세요</button>

<script>
function changeText() {
    document.getElementById('greeting').innerHTML = '반갑습니다!';
}
</script>

브라우저에서 버튼을 클릭하면 '안녕하세요!'가 '반갑습니다!'로 바뀌는 것을 확인할 수 있습니다. 이러한 상호작용을 만들어내는 것이 JavaScript의 기본적인 동작입니다. <script> 태그 안에 있는 것이 JavaScript 코드입니다.

6. HTML의 구조

지금까지 우리는 HTML 태그를 간단하게만 사용해왔습니다. 하지만 실제 웹 페이지는 정해진 구조를 가지고 있습니다. 005.html을 열어보면 아래와 같은 뼈대가 보일 것입니다. Code 탭이 만들어 주는 모든 웹 페이지는 이 뼈대를 갖추고 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>문서 제목</h1>
    <p>문서 내용</p>
    <script>
        alert("안녕하세요!!");
    </script>
</body>
</html>

HTML 문서는 크게 <head>와 <body> 두 부분으로 나뉩니다.

먼저 <head> 영역은 문서의 정보를 담는 공간입니다. 이 부분에 작성한 내용은 브라우저 화면에 직접 표시되지 않습니다. 하지만 웹 페이지가 올바르게 작동하기 위한 필수적인 설정들이 모두 이곳에 위치합니다. 예를 들어 <title> 태그로 지정한 내용은 브라우저 탭에 표시되는 제목이 되며, 사용자가 여러 탭을 열어놓았을 때 각 페이지를 구분하는 역할을 합니다. 또한 <meta charset="UTF-8">이라는 설정은 한글이나 특수문자가 깨지지 않고 정상적으로 표시되도록 문자 인코딩을 지정하는 중요한 역할을 담당합니다. 내부 CSS를 작성할 때 사용하는 <style> 태그도 이 head 영역에 위치하며, 외부 CSS 파일이나 JavaScript 파일을 연결하는 링크들도 주로 이곳에 작성합니다.

반면 <body> 영역은 실제로 사용자의 화면에 표시되는 모든 콘텐츠가 들어가는 공간입니다. 여러분이 웹 페이지에서 보는 텍스트, 이미지, 버튼, 링크, 동영상 등 모든 시각적 요소들이 바로 이 body 태그 안에 작성됩니다. JavaScript를 포함하는 <script> 태그는 특별한 경우가 있는데, 주로 body 태그의 끝부분에 배치합니다. 이는 HTML 문서가 위에서부터 순차적으로 읽히기 때문에, 모든 콘텐츠가 먼저 로드된 후에 JavaScript가 실행되도록 하여 오류를 방지하고 페이지 로딩 속도를 개선하기 위함입니다.

한글이 깨져 보인다면 <meta charset="UTF-8">이 빠졌을 가능성이 큽니다. Code 탭에 "한글이 깨지는데 charset 설정을 확인해줘"라고 말하면 됩니다. 원인을 정확히 몰라도 증상을 말하면 충분하지만, 이렇게 이름을 알고 말하면 한 번에 고쳐집니다.

7. 바이브 코딩으로 생성해낸 파일

3장에서 만든 랜딩 페이지 폴더를 열어보면 파일이 하나가 아니었을 것입니다. 바이브 코딩으로 생성한 결과물은 대부분 html 문서 하나 안에 CSS나 JavaScript가 있지 않고 별도 파일로 분리가 되어 있습니다. 보통 아래와 같은 구성입니다.

vibe-coding/
├── index.html    # 화면의 뼈대
├── style.css     # 꾸미기
└── script.js     # 동작

index.html은 대문 페이지 역할을 합니다. 웹 서버는 사용자의 요청이 있을 경우 이 파일을 찾아서 보여주죠. 이 파일은 아래와 같은 구조로 되어 있어 .css와 .js 파일을 연결합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>hello world</h1>
    <script src="script.js"></script>
</body>
</html>

그리고 각 파일에는 CSS, JavaScript 코드가 아래와 같이 있는 구조입니다. 아래 파일은 style.css입니다. 위 아래로 style 태그를 삽입할 필요는 없습니다.

h1 {
    color: red;
}

아래 파일은 script.js입니다. 역시 위 아래로 script 태그를 삽입할 필요는 없습니다.

alert('hello world!');

그래서 Code 탭에 수정을 요청할 때 "글자색은 style.css에서, 버튼 동작은 script.js에서 고쳐줘"처럼 파일 이름을 말할 수 있으면 Claude가 엉뚱한 파일을 뒤지지 않습니다. 3장에서 배운 @로 파일을 지목하는 방법이 여기서 힘을 발휘합니다.