코딩독학) HTML 태그의 종류와 역할2 영역 태그

영역 태그

<span> : 인라인 요소 즉, 가로줄 전체의 영역을 잡지 않고 문단 내의 특정 요소만 영역으로 지정하고 싶을 때 사용하는 태그.

<div> : 문단과 따로 떨어져 어떤 특정한 영역을 잡을 때 사용하는 태그. 가로줄 전체를 차지한다.

* span과 div의 차이는 말로 설명하면 어렵고, 실제 브라우저 상에서 어떻게 작동하는지 봐야 더 이해가 잘 된다.

 

예제 연습

div와 span의 차이는 CSS를 적용하면 더 확실히 나타난다. 첫번째 줄의 딸기는 맛있다. 에서 딸기 뒤에 <br> 태그를 넣지 않았음에도 불구하고 브라우저 상에서는 엔터가 들어간 것처럼 보인다. div로 영역을 잡아주면 가로줄 전체를 차지하기 때문이다. 반면에, span으로 영역을 잡아준 두번째 줄은 한 줄로 되어있다. 이를 바로 인라인(inline) 요소라고 한다.

세번째 줄의 딸기는 맛있다. 를 보면 딸기에 노란색 네모가 되어있는 것을 볼 수 있다. 이는 CSS로 가로, 세로 70px씩 영역을 잡아주었기 때문이다. 그러나 span으로 잡아준 네번째 줄은 가로, 세로 70px씩 영역을 잡아주었음에도 불구하고 색만 지정되고 영역은 늘어나지 않는 것을 볼 수 있다. span 태그는 영역의 크기를 지정할 수 없다. 인라인 요소이기 때문이다. 이것이 바로 div와 span의 차이점이다.

 

영역 태그2

<fieldset> : fieldset 태그도 영역을 지정하기 위한 태그다. 특별한 형식을 가지고 있어서 예제를 보면 이해가 빠르다.

<legend> : legend 태그는 fieldset 태그와 항상 같이 쓰이는 태그로 fieldset 태그가 지정한 영역의 제목을 지정한다.

 

예제 연습

 

영역 태그3

<figure> : 보통 이미지의 영역을 지정할 때 사용하는 태그다.

<figcaption> : 이미지의 캡션을 쓸 때 사용하는 태그다. 예제와 같은 형식으로 많이 쓰여진다.

 

예제 연습

 

 

 

출처

https://www.w3schools.com/tags/default.asp

HTML Reference