요소는 기본값으로 display속성이 inline 아니면 block 이다. 이는 css3의 display 속성인데 default로 inline아니면 block으로 설정되어있다. 기능적인 관점이나 종류 별로 볼 수도 있지만 레이아웃 배치에서 중요한 것은 사용하려는 요소가 인라인/블락 중 어디에 속하는지 파악하는 것이다. 다만, css의 dispaly 속성을 변경하여 inline, block을 전환할 수 있다.
인라인은 가로로 배치가 되며 해당 태그가 사용하는 부분만큼만 공간을 차지한다. 그래서인지 margin, padding과 같은 값들이 수직으로는 사용이 안된다. 또한, width, height를 지정할 수 없다. width, height 모두 사용하는 만큼만 차지한다.
블락은 세로로 배치가 되며 사용하는 부분에 상관 없이 가로 영역을 부모 영역만큼 전부 사용한다. 글이 이해가 안되어도 아래 설명을 마저 읽으면 이해할 수 있다. width는 가능한 모든 가로 너비를 사용하고 height는 사용하는 높이 만큼을 사용한다.
다음은 inline과 block을 비교할 수 있는 코드이다.
코드만 보고 어떤 실행 결과가 나올지 먼저 예측해보는 것이 중요하다. 우선 각 태그가 블락, 인라인 중에 어떤 것인지 구분하고 인라인이면 가로로 배치, 블락이면 세로로 배치되는 형태이다.
검색을 통해 해당 태그의 default display속성을 확인해볼 수 있다. h1, a, div 태그가 default값으로 인라인/블락 중에 어떤 것인지를 검색해보지 않아도 코드를 실행해보면 알 수 있다.
결과를 보면 h1,div는 블락이고 a는 인라인이다. 각 태그의 경계선이 어떻게 형성되어있는지 보면 바로 알 수 있다. 인라인은 마진과 패딩이 수직방향으로는 적용이 안된다. 따라서 border가 약간 일그러지게 나왔다. padding, margin을 모른다면 검색이나 필자 블로그에서 확인하고 이 글을 본다면 좋을 것이다.
inline/block element를 구분해놓은 레퍼런스 사이트
https://www.w3schools.com/html/html_blocks.asp
HTML Block and Inline Elements
HTML Block and Inline Elements Every HTML element has a default display value depending on what type of element it is. The two display values are: block and inline. Block-level Elements A block-level element always starts on a new line and takes up the ful
www.w3schools.com
'웹(web) > 프론트엔드-css' 카테고리의 다른 글
| CSS Height and Width (0) | 2020.05.05 |
|---|---|
| css3 박스 모델의 통찰(css3 box model insight) (0) | 2020.05.04 |
| css 셀렉터 기본설명(css3 selector basic) (0) | 2020.05.03 |
| 박스 모델 (0) | 2020.05.03 |
| css code structure(css 코드 구조) (0) | 2020.05.02 |
