HTML에서 그룹을 만들 수 있는 방법은 두 가지가 있다.
div와 span태그이다.
div는 블록 요소와 인라인 요소를 한 묶음으로 묶고 싶을 때 사용 가능하다.
span은 인라인 요소를 그룹으로 묶을 때 사용 가능하다.
여기서 블록 요소는 <p>태그처럼 하나의 태그가 한 줄의 공간을 차지하는 요소를 말하고,
인라인 요소는 그렇지 않고 실제 존재하는 공간만큼만 공간을 차지하는 요소를 말한다.
각 요소의 형태는 밑의 그림과 같다.
1. div 태그
블록 요소와 인라인 요소를 한 그룹으로 묶고 싶을 때 사용한다.
실제 결과물에는 큰 차이가 없을 수도 있지만, 구분없이 텍스트들만 나열하면 어떤 텍스트가 어디에 쓰려한 것인지 알기 어렵기 때문에 구분을 해주는 것이 보기에 좋다.
예를 들면 다음처럼 활용할 수 있다.
<body>
<p>Hello HTML</p>
<p>Hello CSS</p>
<p>Bye HTML</p>
<p>Bye CSS</p>
</body>div 없이 나열한 코드이다.
<body>
<div class="Hello">
<p>Hello HTML</p>
<p>Hello CSS</p>
</div>
<div class="Bye">
<p>Bye HTML</p>
<p>Bye CSS</p>
</div>
</body>div르 활용하여 나열한 코드이다.
지금은 짧은 코드를 사용했기 때문에 div가 추가된 것이 더 복잡해 보일 수 있지만,
코드가 길어지면 어느 위치부터 어느 위치까지 어떤 목적의 코드를 쓴 것인지 알 수 없어질 수 있다.
2. span
span은 인라인 요소를 그룹으로 묶을 때 사용할 수 있다.
한 줄안에서 일부분만 편집이 가능하다는 말로 이해할 수 있다.
span 태그의 사용은 다음과 같다.
<p>Hello <span>HTML</span> World</p>HTML이라는 글자만 분리를 한 것이고,
이렇게 되면 HTML만을 하이라이트 표시를 하는 등 편집이 가능하다.
'Development > HTML' 카테고리의 다른 글
| HTML의 태그(4) - 링크 및 이미지 삽입 (0) | 2024.03.21 |
|---|---|
| HTML의 태그(3) - 목록 (0) | 2024.03.17 |
| HTML의 태그(1) - 텍스트 (5) | 2024.03.12 |
| HTML 이란? (0) | 2024.03.12 |
