span 태그 객체화로 만들기

Span 태그는 객체화가 된 상태가 아니고 가상의 태그입니다.

텍스트 등 HTML의 일부분을 감싸주기 위한 용도로 사용하고 일정부분에 스타일 속성을 주기 위해 존재합니다.

하지만 많은 사람들이 span 태그에 대해 잘못 생각하는 것이 있습니다.

이점을 알고 넘어가면 웹 코딩을 하는데 큰 도움이 될 것이라 생각합니다.

태그에는 크게 2가지 엘리머트로 구분을 지을 수가 있습니다.

바로 Block-level Elements와 Inline Elements 입니다.

Block-level Elements는 대표적으로 4가지가 있습니다.

<div>

<h1> - <h6>

<p>

<form>

<span>

<a>

<img>

이들의 차이점을 알겠나요?

공통점으로는 다른 요소를 감싸는 것이라 할 수 있습니다.

하지만 Inline Elements는 가로값 등 고정값을 주지 않으면 객체화하지 않습니다.

그렇기에 반응형보다는 고정상태인 웹에 어울리는 아이들이라 할 수 있습니다

하지만!!!

이 아이들도 객체화를 시켜서 반응형과 모바일, 웹 등에서 사용하고 싶다면

이 부분을 적용해 보면 좋을 것 같습니다.

.span-block{display:block}

.span-inline-block{display:inline-block}