[입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력

들어가며

AI가 코드를 대신 써주는 시대,
“이제 HTML/CSS 같은 건 몰라도 되지 않을까?”, “이제 개발자는 다 AI로 대체 될 꺼야” 라는 말을 종종 듣습니다.

하지만 현실은 그렇지 않습니다. 물론 AI로 대체되는 부분이 많겠죠.
다만. 그 AI로 만든 모든 소스코드가 동작을 하느냐? 라고 묻는다면 그렇지 않다고 정확하게 말씀 드릴 수 있습니다. 전체적인 세밀한 조정은 반드시 “사람”이 해야 하기 때문입니다.

또한 AI에 자신들의 데이터를 마음대로 올려도 되느냐는 굉장히 중요한 부분입니다. 금융정보, 개인정보 등 민감한 정보들이 웹 상에 마음대로 올라가도 상관 없는 건 아니실 겁니다. 그렇기에 여전히 회사에서는 내부망을 사용하는 곳도 있고 방화벽에 보안이 철저한 사내 와이파이를 사용하는 곳도 있습니다(Wifi를 켜면 카톡이나 접속이 불가한 웹사이트가 생깁니다)

즉, 기본을 아는 사람만이 AI를 효율적으로 사용할 수 있습니다. 또한 어떻게 활용하느냐라는 능력으로 개발자의 역량을 판가름 할 수 있습니다.

AI가 자동으로 코드를 만들어줘도 그 코드가 어떤 구조로 동작하는지 이해하지 못한다면 결국 수정도, 유지보수도 어렵습니다.

HTML과 CSS는 모든 웹의 뼈대입니다. 즉, 기본 중의 기본입니다.
이 기본을 확실히 이해하면, 그 위에 자바스크립트나 프레임워크(React, Vue)를 쌓을 때 훨씬 빠르게 성장할 수 있습니다.

이번 포스팅은 처음 개발에 입문하는 입문자와 AI를 활용해 홈페이지를 만들거나 상세페이지를 만들어서 납품하는 부업 등을 하는 분들께도 굉장히 중요한 내용이라 생각합니다. 혹여나 AI를 활용한 부업을 하시는 분들은 이번 포스팅을 꼭 읽어보시고 기본 개념을 잡아 AI를 더욱 효율적으로 활용하시길 바랍니다.

HTML이란?

HTML(HyperText Markup Language)은 웹페이지의 구조를 담당하는 언어입니다.
쉽게 말해, 집의 뼈대를 짜는 설계도라고 생각하면 됩니다.
먼저 아래 예시를 보시겠습니다.

 <h1>안녕하세요</h1>
 <p>이것은 HTML의 기본 구조입니다.</p>

• <h1> : 제목 태그. 제목의 글자 크기를 조절할 수 있습니다. h1 > h2 > h3 > h4 등 숫자가 커질수록 글자 크기는 작아집니다.
• <p> : 문단(본문) 태그
• <img>, <a>, <div> 등 다양한 콘텐츠를 배치할 수 있습니다. 자세한 내용은 추후 포스팅에서 다루겠습니다.

HTML은 콘텐츠를 담는 틀이라고 생각하시면 됩니다.

HTML 기본 구조는 제목과 문단처럼 콘텐츠를 감싸는 태그로 구성됩니다.

CSS란?

CSS(Cascading Style Sheets)는 HTML 요소의 디자인을 담당하는 언어입니다.
색상, 크기, 여백, 위치 등 시각적 표현을 지정할 수 있습니다. 쉽게 말해 꾸며주는 효과라고 보시면 됩니다.
아래는 CSS의 예시입니다.

h1 {
  color: #2c3e50;
  text-align: center;
}

• color : 글자 색상 지정
• text-align : 정렬 방식
• font-size, margin, background-color 등으로 세밀하게 조정 가능

HTML이 ‘내용’을 만든다면, CSS는 그 내용을 ‘예쁘게 보여주는’ 언어입니다. CSS를 적절히 활용할 줄 안다면 웹 개발에서도 JSP 페이지를 쉽게 꾸미고 시각적인 효과를 만들 수 있습니다.

같은 HTML 구조라도 CSS를 적용하면 완전히 다른 분위기의 페이지를 만들 수 있습니다.

개발 환경 세팅 : VS Code 설치

HTML과 CSS는 별도의 복잡한 환경 없이도 연습할 수 있습니다. 가장 널리 쓰이는 도구는 VS Code (Visual Studio Code) 입니다.
자세한 내용을 알고 싶으시다면 [개발환경 입문] VS Code란? 입문자가 알아야 할 핵심 기능과 장점 여기를 참고해 주세요.

1️⃣ VS Code 공식 사이트 접속
2️⃣ 설치 후, 새로운 폴더 생성
3️⃣ index.html, style.css 파일을 만든 후 바로 코딩 시작

Visual Studio Code는 무료이면서도 가장 강력한 웹개발용 코드 에디터입니다.

VS Code 필수 확장팩 설정

코딩을 처음 시작할 때는 에디터를 “한국어 + 자동화 환경”으로 만드는 게 효율적입니다. 아래 확장팩들을 설치하면 학습 생산성이 2배로 올라갑니다. (요즘은 VS code 자체에서도 AI를 지원합니다.)

Korean Language Pack

• VS Code를 완전한 한국어 인터페이스로 바꿔줍니다.
• 설치 후 명령 팔레트(Ctrl + Shift + P) → 언어 구성 → “한국어” 선택

Live Server

• HTML 파일을 실시간으로 브라우저에서 확인할 수 있습니다.
• 저장(Ctrl + S)만 해도 브라우저가 자동 새로고침됩니다.
• CSS 실습 시 즉각적인 결과를 볼 수 있어 학습 효율이 높습니다.

Prettier – Code Formatter

• 코드 들여쓰기와 띄어쓰기를 자동 정리
• HTML/CSS/JS 모든 파일에 적용 가능
• 협업이나 블로그 예제 코드 작성 시 필수

Auto Rename Tag

• HTML 태그 이름을 바꾸면 닫는 태그도 자동으로 함께 수정(이 기능이 핵심입니다. 항상 코드는 시작과 끝을 닫아줘야 하거든요)
• <div> → <section> 변경 시 </section> 자동 변경

HTML CSS Support

• CSS 클래스명 자동 완성 기능 제공
• CSS에서 정의한 .class 이름이 HTML 작성 시 추천으로 표시됨

IntelliSense for CSS class names in HTML

• 여러 CSS 파일을 관리할 때 유용한 자동 완성 확장팩
• 팀 프로젝트나 학습 중 스타일이 많은 경우 도움

Material Icon Theme

• 파일 확장자별로 아이콘 색상 및 모양을 구분
• .html, .css, .js 파일을 한눈에 식별 가능

Live Preview

• VS Code 내부에서 바로 웹페이지 미리보기 가능
• 별도 창 없이 코드와 화면을 나란히 확인 가능(이 기능으로 실시간으로 결과 확인이 가능합니다)

✅ 설치 추천 순서

1️⃣ Korean Language Pack
2️⃣ Live Server
3️⃣ Prettier
4️⃣ Auto Rename Tag
5️⃣ HTML CSS Support
6️⃣ IntelliSense
7️⃣ Material Icon Theme

이 순서대로 설치하면 충돌 없이 안정적으로 동작합니다. 그렇게 어렵지 않으니 천천히 따라하시면서 환경을 모두 세팅해주세요.

AI 활용 코딩 학습법

AI를 제대로 활용하려면 “기본을 알고 질문하는 습관”이 중요합니다.

예를 들어

“HTML 코드를 써줘” ❌
“HTML로 기본 페이지를 만들 건데, 제목과 본문, 이미지 배치를 포함해줘” ✅

이렇게 질문하면 AI는 구조적으로 완성도 높은 코드를 제안합니다. 이후에는 직접 수정하면서 구조를 눈으로 익히면 됩니다.

AI는 도와주는 도구이지 대체 수단이 아닙니다.
기초를 아는 사람만이 AI를 더 효율적으로 정확하게 다룹니다.

마무리하며

AI 시대일수록 기본 구조를 이해한 개발자가 주도권을 갖습니다.
HTML과 CSS는 프론트엔드의 시작점이자, 모든 웹의 근본이 되는 언어입니다.

다음 편 예고

다음 편에서는 👉 [입문] HTML/CSS로 홈페이지를 만들어보자 (프론트엔드 2편) 을 통해, 실제로 HTML과 CSS를 활용한 간단한 홈페이지를 만들어보겠습니다. 알기 쉽게 천천히 그리고 정확하게 정보 전달을 하는 [제로] 가 되겠습니다. 다음편도 많이 기대해주세요!