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 속성으로 인한 요소변경은 특별한 경우가 아니면 하지않는것이 좋으며, 요소의 특성에 따라 사용하시는것을 권장합니다

    Posted by Server-talk 서버이야기