block과 inline의 차이점
block element
- width , height , margin , padding (O)
- 자동 줄 바꿈
- Block Element 와 Inline Element 를 감쌀 수 있다.
- 가로(width)폭은 부모 요소의 폭까지 늘어난다.
- 형제 요소만큼 늘어난다.
- 화면 높이까지만 높이가 주어진다.
- <p>,<h1>~<h6>,<ul>,<ol>,<pre>,<dl>,<div>,<blockquote>,<form>,<hr>,<table>,<fieldset>,<address>...
inline element
- width , height , margin , padding (X) - 그래서 display 를 block 또는 inline-block 화 시켜서 임의로 속성값들을 조절할 수 있다.
- border (O)
- Block Element 를 감쌀 수 없다.
- 자기자신(컨텐츠)까지만 폭을 가진다.
- <br>,<abbr>,<a>,<img>,<q><acronym>,<object>,<label>,<select>,<sup>,<sub>,<span>,<textarea>,<input>...
Block 은 감싸고 , 포함 하는 요소라 말할 수 있고, Inline 은 감싸지고 , 포함 당하는 요소라 말할 수 있다.
여기서! 자주 쓰는 <div> 와 <span> 정리!
- <div>,<span>은 마크업시에 자주 사용하는 컨테이너(container)요소이다.
* 컨테이너(container)란? 여러가지를 묶어서 그룹화 시키는 것을 말한다.
<div>,<span>컨테이너 요소이며 의미가 없다.
<div>은 block element 이며, 제목, 단락, 테이블, 폼 등을 묶어줄 수 있다.
<span>은 inline element 이며, 인라인 요소들과 텍스트들을 감싸줄 수 있다.
inline은 절대로 block을 포함할 수 없다
inline과 block을 구분하기 애매하다면?
- 해당 태그에 백그라운드 스타일을 먹인다. 그러면, 블럭은 백그라운드가 한줄을 차지하고, 인라인은 태그영역만큼만 백그라운드가 먹는다.
- 해당 태그 다음에 텍스트를 하나 입력해본다. 그러면 블럭은 입력한 텍스트가 한줄 내려와 보이고, 인라인은 해당태그 바로 옆에 입력한 텍스트가 보인다.
