먼저 <div> 태그와 <span> 태그의 차이점을 알아보자.
사용하는데 있어서 차이를 알아내긴 어렵지만 이는 생각보다 간단한데 단순히 div 는 block element 이고, span 은 inline element 라는 점이다.
좀더 설명하자면, div는 Document 의 부분들을 감쌀 수 있도록 설계되어 있지만, span 은 small portion(text, image 등)에 해당하는 작은 부분만 감싸게끔 설계되어 있다.
여기서 Block Level Element 와 Inline Level Element 라는 다소 생소한 분류가 등장한다.
* Block Level Element 와 Inline Level Element 의 차이점
: Block Level Element 들은 <body> 요소 안에서만 표현되도록 정의되어 있다. 또한 Block Level element 들은
감싸고 있는 표현 전후를 분리시켜주는(개행) 특징을 가진다. 즉, 이 영역은 앞 뒤 영역과 구분된 독자적인 영역이 된다.
또한 Block Level Element 들은 Inline Level Element 들을 포함할 수 있다.
: Inline Element 는 Tag 가 시작된 라인에서 바로 시작하며 이전과 이후를 구분(개행)하지 않는다. HTML5 이전의 일반적인 Inline Element 는 Block Element 를 포함하지 못한다.
HTML5가 되면서, 몇몇 Block Element 들이 Inline Element 안에 포함이 가능하게 되면서, 차이점이 조금 불분명해졌다.
그럼에도 Span 은 Phrasing content 만을 안에 포함시킬 수 있고, div 는 flow content 를 포함시킬 수 있다는 차이점이 있다.
여기서 flow content 와 phrasing content 는 부가적인 분류 카테고리이다.
flow content 는 마크업으로써 표현되는 컨텐츠 자체를 의미하며, phrasing content 는 해당 요소가 강조 하거나 꾸며주는 역할을 하는 도구로써의 Element 일 경우를 말한다.
HTML이 모던해짐에 따라 element 들은 복수의 역할을 수행할 수 있도록 진화하고 있으나, 그건 HTML 초기 디자인이 의도한 바가 아니다.
가령 <p> 태그는 paragraph 를 위해 만들어진 태그이며, <li> 는 list item 을 위해 만들어진 태그이다.
HTML 은 모던해짐과 동시에 혼용될 수 있는 역할에 따른 사용을 방지하기 위해 의미없는 차이임에도 태그를 나누는 경우들이 있다.
'Programming Language > Javascript + HTML' 카테고리의 다른 글
| angularjs 와 Button 태그간 ng-click 버그에 대하여 (0) | 2018.10.29 |
|---|---|
| HTML5 의 Web Storage 에 관하여 (0) | 2018.10.11 |
| DOM 오브젝트(Document Object Model) 에 대한 정리 (0) | 2018.10.08 |
| Ajax 에 대하여, Ajax 에 대한 정리 (0) | 2018.09.13 |
| 에버그린 브라우저(Evergreen Browser)란? (0) | 2018.08.24 |