CSS - 블록 요소와 인라인 요소 알아보기
CSS - 블록 요소와 인라인 요소 알아보기
이번 포스팅에서는 블록 요소와 인라인 요소에 대해서 알아보도록 하겠습니다
CSS - 블록 요소 (Block element) |
블록요소는 모든 인라인 요소를 포함할 수 있으며, 블록요소도 포함할 수 있습니다
또한, 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)으로 레이아웃 수정을 할 수 있으며, 블록요소가 끝나는 지점에서 자동으로 줄바꿈이 됩니다
블록 요소의 종류
블록 요소의 종류 :
dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6
CSS - 인라인 요소 (Inline element) |
인라인 요소는 다른 인라인 요소를 포함할 수 있으며, 기본적으로 컨텐츠가 끝나는 지점가지 넓이를 가지게 됩니다
또한, 너비(width), 높이(height)를 조절할 수 없으며, line-height(높낮이 조절) 혹은 text-align(텍스트 정렬)을 할 수 있으며, 블록 요소와 다르게 인라인 요소는 끝나는 지점에 줄바꿈이 없습니다.
인라인 요소의 종류
인라인 요소의 종류 :
a, img, span, srong, input, textarea, select
CSS - 블록 요소(Block element)와 인라인 요소(Inline element)의 차이 |
File : inline_block.html
<html> <head> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <h1>Hello world</h1> 안녕하세요, <a href="http://server-talk.tistory.com">서버구축이야기</a>입니다 </body> </html>
File : my.css
@charset "utf-8";
h1 {border:1px solid red;}
a {border:1px solid red;}
HTML :
블록요소와 인라인 요소를 구별하기 위해 h1 태그와 a태그를 작성하였습니다.
CSS :
블록요소와 인라인 요소를 구별하기 위해 h1 태그와 a태그에 테두리를 지정하였습니다
출력결과 :
출력 내용을 보시면 h1 태그는 사용하고 있는 줄에 전체를 사용하고 있으며, a 태그는 자신이 컨텐츠 공간만 사용한 것을 확인하실 수 있습니다
또한, 인라인 요소를 블록 요소로 블록 요소를 인라인 요소로 변경하는 방법이 있습니다
File : my.css
@charset "utf-8";
h1 {border:1px solid red; display: inline;}
a {border:1px solid red; display: block;}
CSS :
h1 태그에는 display: inline으로 변경하여 인라인 요소로 a 태그는 display: block으로 변경하여 블록요소로 변경하였습니다
출력결과 :
출력결과를 보시면 h1 태그는 인라인 요소로 a 태그는 블록요소로 변경된 것을 확인하실 수 있습니다
display 속성으로 인한 요소변경은 특별한 경우가 아니면 하지않는것이 좋으며, 요소의 특성에 따라 사용하시는것을 권장합니다
