div태그
- 여러개의 태그나 내용들을 묶어주는 역할을 한다.
- 줄 바꿈이 자동 적용
- 사각형 박스로 구역을 정한다.
span태그
- 여러개의 태그나 내용들을 묶어주는 역할을 한다.
- 줄 바꿈이 자동 적용되지 않고 옆으로 쫙쫙 붙는다.
- 자신이 존재하기 위해 필요한 공간? 실 사용 공간? 만큼만 구역을 정한다.
글로만 보면 이해가 안가니 비교해보자
사용예시
<body> <span>chikorita</span> <span>chikorita</span> <span>chikorita</span> <div>chikorita</div> <div>chikorita</div> </body>실행결과
span태그로 만들어진 chikorita들은 옆으로 잘 붙는데, div태그로 선언되니 span으로 선언된 chikorita옆에 공간이 남는데도 불구하고 자리 다 먹으려고 밑으로 내려가서 떡하니 한 줄 차지한다 div는 욕심쟁이다.
inline과 block, inline-block을 알아보자
위의 속성들은 다 display의 속성이다.
기본적으로 태그들이 가지고 있는 display속성이 있지만 css에서 변경이 가능하다.위에서 span과 div를 예로 생각해보자.
욕심쟁이 div는 block형태의 display다.
양보쟁이 span은 inline형태의 display다.
즉 block은 자리를 독점하고, inline은 자신이 있을 수 있는 만큼만 공간을 차지한다.
아래의 코드를 보자 html코드는 위와 같다.div{ background-color: darkgoldenrod; width: 300px; height: 50px; } span{ background-color: green; width: 300px; height: 50px; }width와 height를 동일하게 설정해 주었지만 결과는 이렇다.
span태그(inline)로 이루어진 chikorita들은 크기가 변하지 않는다.
그렇다 inline은 width와 height를 무시한다.
반면에 block은 inline과 width를 반영한다.
그러면 inline-block은 어떻게 되었을까? 다음의 html, css코드의 결과로 알아보자<body> <span class="chiko">chikorita</span> <span class="chiko">chikorita</span> <span>chikorita</span> <div>chikorita</div><br> <div>chikorita</div> </body>div{ background-color: darkgoldenrod; width: 300px; height: 50px; } span{ background-color: green; width: 300px; height: 50px; } .chiko{ display: inline-block; background-color: palevioletred; width: 300px; height: 100px; }실행결과
html에서 span태그 두개를 chiko클래스로 만들어주고 css코드에서 chiko클래스를 inline-block으로 변경해주었더니 inline-block과 inline은 똑같이 자신들이 자기들이 차지할 만큼만 자리 차지한다.
거기에 더해서 inline-block은 width와 height속성도 받아들인다.
정리하자면
inline
- 자신이 필요한 만큼만 자리 차지 및 자동 줄넘김 안된다.
- width, height을 무시한다.
block
- 자신이 차지하는 상하크기 만큼 줄 독점
- 독점으로 인해 자동 줄 넘김
- width, height 적용된다.
- width지정 안해주면 좌우범위는 끝까지, height범위는 콘텐츠 크기만큼 가진다.
inline-block
- 자신이 필요한 만큼만 자리 차지 및 자동 줄넘김 안된다.
- width, height가 적용된다.
사실 차이점이 더있는 것 같은데 다음 포스팅에 다뤄보도록 하겠다.
