그룹 관련 태그

 

 

 

---

 

그룹 관련된 태그는 무엇이 있을까?

 

 

---

 

 

 

 

그룹 짓기

 

--

HTML 코드를 작성하다 보면 관련 있는 요소들을 그룹으로 묶어야 하는 경우가 많이 존재한다.

 

 

위 그림(네이버)처럼 "검색 영역", "로그인 영역", "사이드 배너 영역", "신문 기사 영역" 등

관련 있는 요소끼리 그룹이 지어져 있다.

 

웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기 쉬워지며,

HTML 페이지의 구조를 더욱 깔끔하게 구성할 수 있다.

 

그룹 짓기 작업은 일반적으로 "div 태그"와 "span 태그"로 수행하며,

이러한 태그를 "공간 분할 태그"라고 부른다.

--

 

 

 

 

div 태그

 

--

div 태그는

블록 요소와 인라인 요소를 그룹으로 묶을 때 사용된다.

 

기본 형식

<div></div>

 

예시 코드

<p>ㅁㅁㅁㅁㅁㅁ</p>
<p>ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ</p>
<p>AAAAAAAA</p>
<p>AAAAAAAAAAAAAAA</p>

<div class = "test1">
  <p>ㅁㅁㅁㅁㅁㅁ</p>
  <p>ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ</p>
</div>

<div class = "test2">
  <p>AAAAAAAA</p>
  <p>AAAAAAAAAAAAAAA</p>
</div>

 

당장 결과로는 차이가 없어 보이지만

나중에 CSS를 통해 해당 그룹에 대해 사용이 가능해진다.

 

class 속성은
CSS를 적용하기 위한 태그 식별자로 사용하는 속성이다.
(HTML의 모든 태그는 class 속성을 사용할 수 있다.)

--

 

 

 

 

span 태그

 

--

span 태그는

인라인 요소를 그룹으로 묶을 때 사용된다.

 

예시 코드

<span></span>

 

예시 코드

<p>ㅁㅁㅁㅁㅁㅁ</p>
<p>ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ</p>

<p>ㅁㅁㅁㅁㅁㅁ</p>
<p>ㅁㅁㅁㅁㅁㅁㅁ <span>ㅁㅁㅁㅁㅁㅁ</span> ㅁㅁㅁㅁㅁㅁㅁㅁ</p>

 

이 또한 CSS를 적용하기 전이라 차이가 없어 보인다.

--