WeniVooks

검색
북마크 이동

바이브코딩 에센셜 with claude code

HTML/CSS/JavaScript

8. HTML/CSS/JavaScript

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

1. 들어가기 전

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

8.1-1

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

8.1-2

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

8.1-3 8.1-4

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

8.1-5

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

8.1-6

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

2. HTML

8.1-7

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

앞서 설치한 VSCode를 FE라는 폴더를 만들어 이 폴더 기준으로 열어주세요. 그리고 File > New File을 클릭한 다음에 아래와 같이 입력해주세요. 파일 이름은 001.html 입니다.

형식은 <태그이름>콘텐츠</태그이름>의 형식을 가집니다.

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

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

8.1-8

3. CSS

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

VSCode에서 002.html 파일을 새로 만들고 아래 코드를 입력해보세요.

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

아래와 같이 글자의 색이 바뀌어 있을 것입니다.

8.1-9

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

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

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

<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>
<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로 저장하고 실행해보면, 아래와 같이 보여집니다.

8.1-10

아이디(id)는 문서에서 단 하나의 요소에만 사용되며, 클래스(class)는 여러 요소에 반복해서 사용할 수 있습니다.

4. JavaScript

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

004.html 파일을 만들고 아래 코드를 입력해보세요.

<h1 id="greeting">안녕하세요!</h1>
<button onclick="changeText()">클릭해보세요</button>
 
<script>
function changeText() {
    document.getElementById('greeting').innerHTML = '반갑습니다!';
}
</script>
<h1 id="greeting">안녕하세요!</h1>
<button onclick="changeText()">클릭해보세요</button>
 
<script>
function changeText() {
    document.getElementById('greeting').innerHTML = '반갑습니다!';
}
</script>

버튼을 클릭하면 '안녕하세요!'가 '반갑습니다!'로 바뀌는 것을 확인할 수 있습니다. 이러한 상호작용을 만들어내는 것이 JavaScript의 기본적인 동작입니다.

8.1-11 8.1-12

5. HTML의 구조

지금까지 우리는 HTML 태그를 간단하게만 사용해왔습니다. 하지만 실제 웹 페이지는 정해진 구조를 가지고 있습니다. 이제 HTML 문서의 전체적인 구조와 각 부분의 역할을 자세히 알아보겠습니다.

VSCode에서 .html 확장자를 가진 새 파일을 만들고, !를 입력한 후 Tab 키를 누르면 HTML5의 기본 구조가 자동으로 생성됩니다. 005.html 파일을 만들어 실습해보세요.

<!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>문서 제목</h1>
    <p>문서 내용</p>
    <script>
        alert("안녕하세요!!");
    </script>
</body>
</html>
<!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가 실행되도록 하여 오류를 방지하고 페이지 로딩 속도를 개선하기 위함입니다.

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

바이브 코딩으로 생성한 파일은 대부분 html 문서 하나 안에 CSS나 JavaScript가 있지 않고 별도로 분리가 되어 있습니다. 아래와 같이요.

8.1-13

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>
<!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;
}
h1 {
    color: red;
}

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

alert('hello world!');
alert('hello world!');
7장 바이브 코딩을 위한 프론트엔드7.2 프론트엔드 기술 선택 가이드