1. p 태그
1️⃣ p 태그란?
문단(paragraph) 을 표현하는 태그
글을 “의미 있는 문장 단위”로 묶을 때 사용하는 가장 기본적인 텍스트 블록 태그
<p>이 문장은 하나의 문단입니다.</p>
<p>이 문장은 다음 문단입니다.</p>- 문단 단위로 내용을 구분
- 자동으로 줄바꿈
- 문단 사이에 여백(margin) 이 기본 적용됨
👉 단순 줄바꿈(
<br>)과는 완전히 다른 개념2️⃣ p 태그의 기본 display 속성
p는 블록 태그
- 기본
display: block
그래서:
- 한 줄 전체 차지
- 다음 요소는 항상 다음 줄
3️⃣ p 태그에 자동으로 적용되는 기본 스타일
브라우저 기본 CSS(User Agent Stylesheet):
p {
display: block;
margin-top:1em;
margin-bottom:1em;
}👉 문단 사이가 자동으로 떨어지는 이유
4️⃣ p 태그 안에 들어갈 수 있는 것 / 없는 것
⭕ 들어갈 수 있는 것 (인라인 요소)
<p>
<strong>강조</strong>,
<a href="#">링크</a>,
<span>텍스트</span>
</p>❌ 들어가면 안 되는 것 (블록 요소)
<p>
<div>잘못된 구조</div>
</p>⚠️
p 태그 안에 블록 요소를 넣으면 → 브라우저가 강제로 p를 닫아버림 (의도치 않은 레이아웃 버그 발생)5️⃣ p 태그를 쓰면 좋은 경우
- 설명 글
- 본문 텍스트
- 긴 문장/단락
- 게시글 내용
<article>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
</article>6️⃣ p 태그를 쓰면 안 되는 경우 ❌
1) 단순 줄 간격용 ❌
<p>줄1</p>
<p>줄2</p>👉 줄바꿈만 원하면 CSS로 해결
2) 레이아웃 박스 용도 ❌
<p class="box">카드</p>👉 레이아웃은
div, 내용은 p7️⃣ div 태그 vs p 태그
구분 | div 태그 | p 태그 |
의미 | 없음 | 문단 |
용도 | 레이아웃 / 묶기 | 텍스트 내용 |
SEO / 접근성 | 중립 | 긍정적 |
안에 들어가는 것 | 거의 뭐든지 | 인라인 요소만 |
기본 상하 margin | X | O |
8️⃣ 실습
1) p 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>p 태그와 img 태그를 배우자</h1>
<!-- hr -> 선 긋는 태그(블록 태그) -->
<hr />
<p>1111111111111111 111111111111111111111 111111111111111111111111</p>
<p>
222222222222222222 222222222222222222222222 2222222222222222222222222222
</p>
</body>
</html>
2) div 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>p 태그와 img 태그를 배우자</h1>
<!-- hr -> 선 긋는 태그(블록 태그) -->
<hr />
<div>dkfdflsfdkljsfl dsfjkdlsjfkjdlsjfkds dfdfdfdfdfdf dfdfdfdfdfdfdfd</div>
</body>
</html>
2. img 태그
1️⃣ img 태그란?
1) 개념
HTML에서 이미지를 화면에 표시하는 태그
텍스트처럼 “내용”이 아니라, 외부 리소스(이미지 파일)를 불러와 보여주는 요소
2) 기본 문법
<imgsrc="image.jpg"alt="이미지 설명">
3) 필수 속성
src: 이미지 파일 경로 (URL)
alt: 이미지 대체 텍스트 (매우 중요 ⭐)
⚠️
img는 닫는 태그가 없는 빈 태그(void element)2️⃣ img 태그의 핵심 특징
1) 인라인 요소이지만 크기를 가진다
- 기본적으로
display: inline-block
- 그래서
- 옆으로 배치 가능
width,height적용 가능
<img src="a.png">
<img src="b.png">➡ 이미지가 옆으로 나란히 나옴
2) width / height 동작 방식
<img src="photo.jpg" width="200">- 하나만 주면 비율 유지
- 둘 다 주면 강제로 늘어나거나 찌그러질 수 있음
➡️ 실무에선 CSS로 제어 권장
img {
width : 200px;
height : auto;
}3️⃣ alt 속성 (진짜 중요 ⭐⭐⭐)
1) alt의 역할
- 이미지 로딩 실패 시 표시
- 스크린리더(시각장애인)용 설명
- SEO에 영향
<img src="dog.jpg" alt="공원에서 뛰노는 강아지">❌ 나쁜 예
<img src="dog.jpg" alt="">❌ 의미 없는 alt
alt="image1"
4️⃣ 이미지 경로(src) 종류
📁 상대 경로
/는 최상위 폴더
./는 현재 폴더
<img src="img/photo.jpg">
<img src="../images/a.png">🌐 절대 경로
- 웹사이트에서 찾은 이미지 마우스 우클릭 → 이미지 주소 복사해서 붙여넣기
<img src="https://example.com/logo.png">5️⃣ img 태그는 콘텐츠다 (중요 개념)
- 이미지는 “장식”일 수도 있고 “정보”일 수도 있음
정보 이미지 (alt 필수)
<img src="chart.png" alt="2024년 매출 증가 그래프">장식 이미지 (alt 비움 가능)
<img src="line.png" alt="">6️⃣ 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>p 태그와 img 태그를 배우자</h1>
<!-- hr -> 선 긋는 태그(블록 태그) -->
<hr />
<p>1111111111111111 111111111111111111111 111111111111111111111111</p>
<p>
222222222222222222 222222222222222222222222 2222222222222222222222222222
</p>
<img src="/ex02/image/a.png" width="100" height="100" />
<img src="./image/a.png" />
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0kGLUHTk7CC5UHjTpBra1S2Zr5HYZXilvFQ&s"
/>
</body>
</html>
Share article