[Web] #3 CSS - block element, inline element, display 속성

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 

---

html 태그들은 2가지 종류로 나눌 수 있다.

1. block element: 내용 크기에 상관없이 한 줄을 차지한다. p, div, ul, li, h1-h6

2. inline element: 내용 크기만큼 영역을 차지한다. span, a, img, button

 

태그가 block인지 inline인지 중요한 이유는 css로 크기를 조절할 때 차이가 있기 때문이다.

css 기본 속성들 중 width, height 속성은 block element에만 적용되고 inline element에는 적용하지 못한다.

아무 변화가 안 생긴다. 하지만 전 포스팅에서도 언급했듯이 스타일을 이유로 태그를 골라 쓰면 안되고, 의미와 구조에 맞게 태그를 쓴 후 css로 스타일을 변경해야 한다. 태그들이 아무리 고유한 특성을 갖고 있더라도 css에서 고유한 특성까지 변경할 수 있다.

 

inline element를 block element처럼 사용하고 싶거나, block element를 inline element로 사용하고 싶을 때 사용하는 css 속성이 display다.  display 속성 값은 inline, block, inline-block, none이 있다.

 

• inline:  p태그가 내용 크기만큼 영역을 차지한다.

p {
	display : inline;
}

 

• block: span태그가 하나의 블록, 한 줄을 차지한다.

span {
	display : block;
}

 

• inline-block: 한 줄에 여러 element들이 올 수 있고, 내용 크기만큼 차지해서 width, height 속성이 적용되도록 할 수도 있다. 

p {
	display : inline-block;
}

 

• none: 해당 태그가 안 보이게 한다. 차지하는 영역도 사라진다.