반응형
by Esther
안녕하세요! 웹페이지나 블로그 꾸미기를 처음 시작하는 분들을 위한
HTML 기초 입문 가이드를 준비한 Esther입니다 😊
처음에는 코딩이나 태그라는 단어만 들어도 어렵게 느껴질 수 있어요.
하지만 걱정 마세요! 오늘 소개할 HTML 기본 태그 몇 가지만 익혀도,
여러분의 블로그나 웹사이트는 훨씬 더 보기 좋고 체계적으로 정리될 수 있어요.
✅ HTML이란 무엇인가요?
**HTML (HyperText Markup Language)**은
웹사이트나 블로그 페이지의 구조를 만들기 위한 마크업 언어입니다.
쉽게 말해, 웹페이지의 뼈대를 설계하는 도구라고 생각하면 돼요.
HTML은 기본적으로 “태그”라는 요소로 구성됩니다.
모든 태그는 <시작>과 </종료> 형태로 감싸져 있어요.
예시:
html
복사편집
<p>이것은 단락입니다.</p>
🧩 블로그 꾸미기를 위한 HTML 기초 태그 TOP 6
1️⃣ <h1> ~ <h6> : 제목 태그
페이지의 제목이나 소제목에 사용됩니다.
숫자가 작을수록 글자가 크고 중요도가 높아요.
html
복사편집
<h1>내 블로그 제목</h1> <h2>카테고리 소개</h2>
2️⃣ <p> : 문단(단락) 태그
텍스트 내용을 단락으로 나눌 때 사용합니다.
html
복사편집
<p>이 블로그는 HTML을 처음 배우는 분들을 위한 공간입니다.</p>
3️⃣ <a href="URL"> : 링크 태그
다른 페이지나 외부 사이트로 연결할 수 있어요.
4️⃣ <img src="이미지주소"> : 이미지 삽입 태그
블로그에 이미지를 넣고 싶을 때 사용합니다.
5️⃣ <ul> / <ol> / <li> : 목록 태그
글머리표 또는 번호가 있는 리스트를 만들 수 있어요.
html
복사편집
<ul> <li>HTML 배우기</li> <li>CSS 배우기</li> </ul>
6️⃣ <br> : 줄바꿈 태그
텍스트 중간에서 줄을 바꿀 때 사용합니다.
html
복사편집
HTML 배우기<br>CSS 배우기<br>자바스크립트 배우기
🖥 HTML로 블로그에 적용해보기
블로그 글쓰기 시 "HTML 편집" 모드를 켜고,
위의 태그 예시를 그대로 붙여넣기 해보세요.
작은 태그 하나만으로도:
- 제목을 강조하고
- 이미지 배치를 바꾸고
- 외부 링크로 연결하는 등
블로그 페이지를 더 읽기 좋고, 전문적으로 만들 수 있어요.
💡 초보자를 위한 팁
- <h1>은 한 페이지에 한 번만 사용하는 것이 좋습니다. (SEO에도 도움!)
- <a> 태그에 target="_blank"를 추가하면 새 창에서 열리게 할 수 있어요.
- 모든 태그는 시작과 끝이 있는 구조를 유지해야 페이지가 깨지지 않아요.
✍️ 마무리하며
HTML은 처음엔 낯설지만,
한 번 이해하면 블로그나 웹사이트를 내 손으로 직접 꾸미는 기쁨을 누릴 수 있어요.
지금이 바로 HTML 첫걸음을 떼기 좋은 순간!
이 글 아래 예시부터 하나하나 따라해 보며,
여러분의 블로그에 생명을 불어넣어보세요 ✨
반응형