HTML 코드를 작성하다 보면 요소들을 그룹으로 묶어야 하는 경우가 많다.
웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워진다.
이런 그룹 짓기를 HTML 에서는<div>태그와<span>태그로 작업한다.
- 관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할 이라고 한다. 그래서 이 작업을 하는 <div>태그와 <span>태그를 공간 분할 태그 라고도 한다.
🟣 div 태그 (블록 요소)
블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
줄 바꿈이 되는 태그
페이지를 논리적인 구역으로 분리하는 데 사용되는 태그
<div> 태그의 문법은 아래 코드와 같이 사용
<div> </div>- 아래 작성된 태그처럼 body 태그안에 영역 구분 없이 텍스트만 작성하면 코드가 복잡해질수록 텍스트를 구분하기 어려워진다. 이 텍스트들을
div태그를 사용해<p>태그를 영역별로 그룹을 지을 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> div 태그로 그룹 짓기 </title>
</head>
<body>
<!-- 텍스트만 작성된 코드 -->
<p> 분식집 </p>
<p> 분식집을 소개하는 페이지입니다. </p>
<p> 육회집 </p>
<p> 육회집을 소개하는 페이지입니다. </p>
</body>
</html>🔽 <div> 태그로 그룹을 지어 코드 작성 🔽
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> div 태그로 그룹 짓기 </title>
</head>
<body>
<div class = "snack"> <!-- 분식집 태그를 그룹짓는 div태그 -->
<p> 분식집 </p>
<p> 분식집을 소개하는 페이지입니다. </p>
</div>
<div class = "meat"> <!-- 육회집 태그를 그룹짓는 div태그 -->
<p> 육회집 </p>
<p> 육회집을 소개하는 페이지입니다. </p>
</div>
</body>
</html>실행을 해보면 웹 브라우저에선 글씨만 나오고 어떻게 그룹이 지어졌는지 확인을 제대로 할 수 없지만,
확인을 위해서 웹 브라우저에서 F12 를 누르고 개발자 도구로 요소를 확인을 해보면 아래 그림처럼 div 로 나누어져 있는걸 확인할 수 있다.
🔽 div태그를 좀 더 쉽게 이해하기 위해 만든 이미지 🔽
🟣 span 태그 (인라인 요소)
인라인 요소를 묶을 때 사용
줄 바꿈이 되지 않는 태그
텍스트를 위한 컨테이너로 사용 가능
CSS와 함께 텍스트 일부의 스타일 속성을 설정할 때 사용
- 아래 작성된 코드처럼
<p>태그 안에 글씨 색을 넣어 강조하고 싶을 때<span>태그를 이용해 작성할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> span 태그로 그룹 짓기 </title>
</head>
<body>
<div class = "snack">
<p> 분식집 </p>
<p> <span style = "color: brown;"> 분식집 </span>을 소개하는 페이지입니다. </p>
</div>
<div class = "meat">
<p> 육회집 </p>
<p> <span style = "color: blue;"> 육회집 </span>을 소개하는 페이지입니다. </p>
</div>
</body>
</html>
🔽 <span> 태그를 사용해서 출력 🔽
🔽 span 태그를 좀 더 쉽게 이해하기 위해 만든 이미지 🔽
공부 중. !!! !