Phase 99-1
HTML/CSS/JS 기초
웹의 3요소인 HTML, CSS, JavaScript의 역할을 노무사 눈높이에서 이해하고, Claude Code가 코드를 대신 작성해 주는 흐름을 배웁니다.
웹페이지는 어떻게 만들어지나요?
모든 웹사이트는 세 가지 요소로 이루어져 있습니다. HTML, CSS, JavaScript입니다. 법률 용어도 처음엔 어려웠지만 지금은 자연스럽게 쓰시잖아요. 코딩 용어도 마찬가지입니다. 노무사 업무에 비유하면 금방 이해할 수 있습니다.
HTML은 '내용'입니다. 진정서에서 사실관계, 법리, 결론 같은 내용 자체에 해당합니다. '여기에 제목을 넣고, 여기에 본문을 넣겠다'는 구조를 정하는 것입니다.
CSS는 '서식'입니다. 진정서의 글꼴, 줄간격, 여백, 머리글 같은 디자인 요소에 해당합니다. 같은 진정서 내용이라도 서식이 깔끔하면 신뢰감이 달라지듯, CSS가 웹페이지의 인상을 결정합니다.
JavaScript는 '자동 검증 기능'입니다. 상담 접수 폼에서 전화번호 형식이 맞는지 자동으로 확인하거나, 퇴직금 계산기에서 숫자를 입력하면 바로 결과를 보여주는 것처럼, 웹페이지의 움직이는 부분을 담당합니다.
[기존 방식] 블로그나 웹사이트 만들려면 외주 맡기고 100만 원 이상 비용이 들었습니다.
[AI 자동화] Claude Code에게 '노무 상담 페이지 만들어 줘'라고 하면 무료로 직접 제작할 수 있습니다.
간단한 예시로 보는 HTML 구조
HTML은 태그(tag)라는 것으로 내용을 감싸는 구조입니다. 태그는 꺾쇠괄호(<>)로 표시합니다. 코드를 읽을 줄 몰라도 됩니다. 노무사시험에서 영어 지문 해석할 때처럼, 대략적인 구조만 파악하면 됩니다. <h1>은 '큰 제목', <p>는 '문단', <button>은 '버튼'이라는 정도만 알면 충분합니다.
아래 예시는 '노무 상담 안내'라는 제목과 설명이 있는 가장 단순한 웹페이지입니다. 직접 코드를 외울 필요는 전혀 없습니다. Claude Code에게 '이런 내용의 웹페이지를 만들어 줘'라고 하면 알아서 작성해 줍니다.
<!DOCTYPE html>
<html>
<head>
<title>한동노무법인 상담 안내</title>
</head>
<body>
<h1>노무 상담 안내</h1>
<p>부당해고, 임금체불, 산업재해 등
노동 문제로 어려움을 겪고 계신가요?</p>
<p>전문 노무사가 도와드리겠습니다.</p>
<button>상담 신청하기</button>
</body>
</html>TIP: 코드를 직접 작성하실 필요가 없습니다. 이 레슨의 목적은 '웹페이지가 이런 구조로 되어 있구나'를 이해하는 것입니다. 실제 코딩은 Claude Code가 대신합니다.
Claude Code에게 웹페이지 만들어 달라고 하기
이 세 가지(HTML, CSS, JS) 개념을 아는 것만으로도 Claude Code에게 훨씬 정확한 요청을 할 수 있습니다. 'HTML 구조는 이렇게, CSS 디자인은 저렇게' 같은 전문적인 지시를 할 필요는 없습니다. 그냥 원하는 결과물을 설명하면 됩니다.
예를 들어 이렇게 요청합니다. '한동노무법인 소개 웹페이지를 만들어 줘. 상단에 법인 이름과 대표 노무사 소개, 중간에 주요 업무 분야(부당해고, 임금체불, 산업안전, 중대재해) 카드 4개, 하단에 연락처와 오시는 길을 넣어 줘. 디자인은 깔끔하고 전문적인 느낌으로.'
Claude Code는 이 요청을 받아 HTML로 내용(진정서의 사실관계처럼)을 구성하고, CSS로 디자인(진정서의 서식처럼)을 입히고, JavaScript로 동작(계산기나 폼 검증 기능)을 추가합니다. 여러분은 결과물을 보고 '카드 색상을 파란색으로 바꿔 줘', '전화번호를 추가해 줘' 같은 수정 요청만 하면 됩니다. 코드를 한 줄도 직접 쓸 필요가 없습니다.
핵심 정리
- ✓웹페이지는 HTML(내용), CSS(디자인), JavaScript(동작) 세 가지로 구성됩니다.
- ✓코드를 직접 작성할 필요 없이 Claude Code에게 원하는 내용을 설명하면 됩니다.
- ✓웹의 기본 구조를 이해하면 Claude Code에게 더 정확하고 구체적인 요청을 할 수 있습니다.