21.01.12 CSS: block 과 inline

block vs. inline

태그들에 테두리를 그리면 태그들의 영역이 얼마나 되는지 파악하기 쉽다.

 

h1과 a 태그를 비교해보았다.

 

다음과 같이

태그 h1의 테두리는 웹페이지의 가로 너비를 꽉 채우고 있고

태그 a의 테두리는 글 부분만을 채우고 있다는걸 확인할 수 있다.

 

결과적으로

태그 h1은 block element이고

태그 a는 inline element 라는걸 알 수 있다.

 

 

<style></style>내에서 

display: inline;
display: block; 
을 사용하면 block 이어도 inline처럼 
inline이어도 block 처럼 사용할 수 있다.
display: none; 
을 하면 사라지게 만들 수 있다.

 

 

div vs. span

div : 디자인의 용도로만 사용하는 tag

span : div와 동일 but inline