연재 시리즈: 01/05 웹 개발 기초 마스터

1일차: 웹의 첫 단추, HTML
- 무너지지 않는 뼈대 만들기

"바이브로 코딩하는 여러분, 기세는 좋습니다! 하지만 기세가 실력이 되려면 기초라는 튼튼한 뼈대가 필요합니다. 오늘 그 뼈대를 함께 세워보죠."

1 HTML은 단순한 '언어'가 아닙니다

HTML(HyperText Markup Language)에서 가장 중요한 단어는 바로 Markup(마크업)입니다. 마크업은 문서의 특정 부분에 '이름표'를 붙이는 작업이에요.

"이 문장은 제목이야!", "여기는 버튼이야!", "이건 중요한 이미지야!" 라고 컴퓨터에게 속삭여주는 과정이죠.

💡 바이브 코더를 위한 HTML 문법 공식

태그는 열고(<tag>) 닫는(</tag>) 것이 기본입니다. 그 사이에 '내용'이 들어가죠.

<태그명 속성="값"> 콘텐츠 </태그명>

Element

태그와 내용을 통칭하는 요소

Attribute

태그의 추가 정보 (id, class, href)

2 현업에서 가장 많이 쓰는 실전 태그

<ul>, <ol>, <li>

리스트를 만들 때 사용합니다. 메뉴 바, 게시글 목록 등 활용도가 무궁무진해요.

<form>, <input>

사용자의 입력을 받을 때 사용합니다. 로그인, 회원가입의 핵심이죠.

<button>

클릭 이벤트를 발생시키는 가장 직관적인 요소입니다.

<span> vs <div>

한 줄 안에서 특정 텍스트만 바꿀 땐 span, 큰 구역을 나눌 땐 div를 씁니다.

3 '바이브'보다 중요한 '의미(Semantic)'

HTML5의 핵심은 시맨틱(Semantic)입니다. 단순히 <div>로 도배하는 것이 아니라, 각 구역의 역할을 태그 이름으로 명시하는 것이죠.

<header>: 로고와 메뉴가 있는 머리말

<nav>: 사이트 내비게이션

<main>: 페이지의 핵심 콘텐츠

<article>: 독립적인 포스팅이나 뉴스

Semantic Structure Example

HEADER

Nav

Main Article

Footer

시맨틱하게 짠 코드는 구글 검색봇이 사랑합니다(SEO).

웹 표준이 왜 중요할까요?

과거 '브라우저 전쟁' 시절에는 인터넷 익스플로러에서만 돌아가는 코드, 넷스케이프에서만 돌아가는 코드가 따로 있었습니다. 개발자들은 괴로웠죠. 하지만 2014년 HTML5가 표준으로 자리 잡으면서 어떤 브라우저에서도 동일하게 작동하는 웹의 기반이 마련되었습니다.

우리가 지금 맥북, 윈도우, 아이폰 어디서든 같은 웹사이트를 볼 수 있는 건 바로 이 웹 표준 덕분입니다.

HTML

Day 01 미션 성공! 🚩

오늘의 핵심은 '태그의 이름에는 이유가 있다'는 것을 이해하는 것이었습니다.
집에 가서 여러분이 자주 가는 웹사이트를 열고 [F12]를 눌러보세요.
어떤 뼈대들로 이루어져 있는지 구경하는 것만으로도 큰 공부가 됩니다.

Coming Up Next

2일차: 뼈대에 생기를 불어넣는 CSS 인테리어

바이브코딩 초보를 위한 웹 개발 기초 마스터 1일차: 웹의 첫 단추, HTML

본문 요약

댓글 (0)