정정지용
기술스택 목록
프론트엔드

HTML

프로젝트 2개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어

HTML(HyperText Markup Language)은 제목, 문단, 이미지, 링크 같은 요소를 태그로 감싸 문서의 구조와 의미를 표현하는 마크업 언어입니다. 브라우저가 이해할 수 있는 표준 형식으로 콘텐츠를 기술함으로써, 서로 다른 기기와 브라우저에서도 동일한 내용을 일관되게 보여줄 수 있도록 만들어졌습니다. CSS가 화면 표현을, JavaScript가 동작을 담당한다면 HTML은 그 바탕이 되는 뼈대 역할을 합니다.

이럴 때 사용합니다

  • 브라우저에서 보여줄 콘텐츠와 구조가 필요한 모든 웹 페이지의 기본 뼈대로 사용
  • 별도 서버나 빌드 과정 없이 정적 데모나 프로토타입 페이지를 빠르게 만들 때
  • 스마트컨트랙트나 API 동작을 확인하기 위한 간단한 테스트 화면을 구성할 때

핵심 개념

Element
여는 태그와 닫는 태그로 콘텐츠를 감싼 단위로, HTML 문서를 구성하는 기본 블록입니다.
Tag
요소의 시작과 끝을 표시하는 꺾쇠괄호 표기로, div, p, img 등 종류에 따라 의미가 다릅니다.
Attribute
태그 안에 추가 정보를 지정하는 속성으로, href나 class처럼 요소의 동작이나 스타일 연결을 제어합니다.
DOM (Document Object Model)
브라우저가 HTML 문서를 파싱해 만드는 트리 구조로, JavaScript가 페이지 내용을 읽고 조작할 때 이 구조를 통해 접근합니다.
Semantic Markup
header, nav, article처럼 의미를 담은 태그를 사용해 콘텐츠의 역할을 명확히 드러내는 작성 방식입니다.

기본 HTML 문서 구조

가장 기본적인 HTML 문서 골격으로, 제목과 문단, 버튼 하나를 화면에 표시합니다.

예시
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>데모 페이지</title>
</head>
<body>
  <h1>안녕하세요</h1>
  <p>이것은 정적 데모 페이지입니다.</p>
  <button onclick="alert('클릭됨')">확인</button>
</body>
</html>

처음 쓸 때 흔한 함정

  • 태그를 닫지 않거나 중첩 순서를 잘못 지정해도 브라우저가 알아서 보정해 오류를 놓치기 쉽다
  • HTML만으로는 동작을 정의할 수 없어 CSS·JavaScript와의 역할 구분을 혼동하기 쉽다
  • div만 남발하면 구조는 표시되지만 의미가 사라져 접근성과 유지보수에 불리하다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Claude Code CLICSSHardhatJavaScriptNode.jsSolidity