Web/HTML
블럭요소와 인라인요소
투런포
2021. 11. 22. 18:03
반응형
블럭요소와 인라인요소
블럭요소
- div, h1, p.......
- 사용 가능한 최대 가로 너비를 사용한다. (width:100%, height:0; 으로 시작)
- 크기를 지정할 수 있다.
- 수직으로 쌓인다.
- margin, padding 속성의 위, 아래, 좌, 우 모두 사용 가능하다.
- 레이아웃을 잡는 용도로 대부분 사용한다.
인라인요소
- span, img.......
- 필요한 만큼의 너비를 사용한다. (width: 0; height: 0; 으로 시작)
- 크기를 지정할 수 없다.
- 수평으로 쌓인다.
- margin, padding 속성의 위, 아래는 사용을 할 수 없다.
- 텍스트를 작업하는 용도로 대부분 사용한다.
display 속성
- display 속성으로 임의로 블럭요소로 인라인요소로 변경 가능하다.
<!-- 블럭요소를 인라인요소로 임의로 변형 -->
div {
display: inline;
}
<!-- 인라인요소를 블럭요소로 임의로 변형 -->
span {
display: block;
}
※ 참고 링크