안녕하세요! 😊
이전 포스팅에서 HTML 문서 구조를 배웠다면,
이번에는 웹페이지 안에 실제로 글과 이미지, 링크를 넣어보는 방법을 알아보겠습니다!
✍️ 텍스트 넣기: <p> 태그
HTML에서 일반적인 문장은 <p> 태그를 사용해요.
p는 "paragraph", 즉 문단이라는 뜻이죠!
<p>오늘은 HTML 공부를 시작한 기념일이에요!</p>
👉 이 코드를 브라우저에서 실행하면 이렇게 보여요:
오늘은 HTML 공부를 시작한 기념일이에요!
📝 제목 넣기: <h1>부터 <h6>
제목은 <h1> ~ <h6>까지 있어요.
숫자가 작을수록 더 중요한 제목, 글자 크기도 더 커요.
<h1>가장 큰 제목</h1>
<h2>조금 작은 제목</h2>
<h3>이제 점점 작아져요</h3>🔗 링크 만들기: <a href="주소">
다른 사이트나 페이지로 이동하게 하려면 링크 태그를 사용 해야합니다.
<a href="https://www.google.com">구글로 이동</a>
👉 결과: 구글로 이동
Tip!
- href="" 안에는 연결할 주소를 써요
- 링크 텍스트는 <a> 태그 안에 넣어요
🖼 이미지 넣기: <img src="주소" alt="설명">
웹페이지에 이미지를 넣는 방법도 정말 간단해요!
<img src="https://via.placeholder.com/150" alt="예시 이미지">- src: 이미지 파일의 주소
- alt: 이미지를 설명하는 텍스트 (이미지 로딩 안 될 때 보여줌, 웹 접근성에도 중요!)
🎯 실습 예제 모음
<!DOCTYPE html>
<html>
<head>
<title>내 첫 번째 콘텐츠 페이지</title>
</head>
<body>
<h1>나의 첫 번째 HTML 콘텐츠</h1>
<p>HTML은 정말 재밌어요!</p>
<h2>유용한 링크</h2>
<a href="https://www.naver.com">네이버 가기</a>
<h2>이미지 넣기 연습</h2>
<img src="https://via.placeholder.com/200" alt="샘플 이미지">
</body>
</html>💬 마무리 한 마디!
이제 진짜 웹페이지처럼 제목도 넣고, 글도 쓰고, 링크도 만들고, 이미지도 보여줄 수 있어요!
기초지만, 아주 중요한 태그들이니 연습 하면서 익혀보세요 ✨
다음 포스팅에선 목록, 표, 입력창 등! 좀 더 다양한 HTML 요소를 알려드리겠습니다!
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS 기초] 반응형 웹이란? 미디어쿼리(Media Query)로 모바일에도 잘 보이게 만들기! (0) | 2025.05.07 |
|---|---|
| [정리정돈 시작!] HTML 웹페이지를 나누는 구조 태그 배우기 (0) | 2025.05.06 |
| [구조화 마스터] HTML 목록 만들기, 표 만들기, 입력 폼까지 완전정복! (0) | 2025.05.05 |
| HTML 문서 구조 완전정복! <html>, <head>, <body>는 뭐야? (0) | 2025.04.29 |
| HTML이란 무엇일까? 누가 왜 쓰는 걸까? (0) | 2025.04.24 |