- span과 div를 명확하게 설명할 수 있다.
- inline과 inline-block 요소를 명확하게 설명할 수 있다.
1. <span>과 <div> 차이
- div 태그는 의믜적으로 관계가 없을 때 주로 사용한다. 오직 내용을 묶는 역할이라고 보면 된다. 하지만, span 태그와 비슷한 역할을 하는데 차이가 있다.
무슨 차이?
- div는 줄바꿈 되지만, span 태그는 옆으로 붙는다.
- 즉, div는 기본적으로 block요소, span은 inline 요소이다.
- 그렇기 때문에 텍스트를 표현할때 div는 사각형 박스 구역으로 공간을 차지하지만, span은 문장 단위로 지정한다.
- 노란색 : div
- 민트색 : span
2. inline과 inline-block 비슷한거 아닌가요?
- inline 요소는 대표적으로
<span> - block 요소는 대표적으로
<div>
1) inline
-
width, height 적용불가
-
margin, padding-top, padding-bottom 적용불가
-
line-height는 원하는 대로 적용불가
-
요소 : span, a, br, em, strong, input, label, img
<span>태그는 text내에 특정 부분에만 스타일을 간단히 주고 싶을 때 주로 사용한다.
2) block
- block은 무조건 한줄을 점유하고, 다음 태그는 다음줄로 넘어간다.
- verical-align 적용불가
- text-align 적용불가
- 요소 : div, table, h1 ~ h6, p, form, ul, li, ol, dl, dt, dd, pre, blockquote
3) inline-block
- inline + block이 섞인 형태, 같은 라인에 여러 태그를 붙일 때 주로 사용한다.
- inline의 단점을 커버하는 것이 inline-block이라고도 볼 수 있다.
- width, height 적용가능
- margin, padding-top, padding-bottom 적용가능
- line-height는 원하는 대로 적용가능
코드를 짜면서 기억하면 좋은 점
- 블럭요소내부에는 블럭요소와 인라인 요소를 포함 할 수 있다.
- 인라인 요소 내부에는 블럭요소를 포함 할 수 없다.
=> 이는 보여지는데는 아무런 문제가 없지만, 유효성에 어긋난다.
코드리뷰를 하면서 span태그안에 블럭요소를 넣고, 위치를 지정하는 코드를 보면서 잘못되었다는 것은 알았는데 명확하게 설명할 수가 없어서 답답했다. 설명할 수 없다는 건 정확하게 모른다는 것! 너무 오래전에 배워서 정말 당연하다고 생각했던 것 같다. 정리를 기록하면서 이러한 부분들이 많이 매꿔지길 바란다👍🏻
[참고자료]
https://sdsupport.cafe24.com/reference/html/block-inline.html
https://mainia.tistory.com/3289
https://blog.naver.com/leesd88/220682157303
