display : inline , block, inline-block

connie 2020. 12. 21. 19:38

2020. 12. 21. 19:38

display

HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나는 display 입니다.

display : inline

inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 inline 입니다.

<span>
<a>
<b>
<i>
<img>
<button>

<i> 태그는 기본적으로 inline이기 때문에 앞, 뒤의 텍스트와 같은 줄에 머무르고 있고, 가로 길이는 필요한 만큼만 차지하고 있습니다.

ex)

<style>
        body{
                    background-color: gray;
                }
        span{
            background-color: red;
        }
</style>
</head>
<body>
    <p>html,css,javascript , <span>react</span> 공부하기</p>
</body>
</html>

inline 속성인 span에 배경색을 주면

필요한 만큼 자기 크기 만큼만 공간을 차지한다.

※ inline 요소는 필요한 크기만큼 공간을 차지하기 때문에 가로, 세로의 길이 개념이 딱히 없다.

 span{
            background-color: red;
            height: 100px;
        }

세로 길이를 100px 지정 해주었다.

결과는 변함이 없다. 만약 block 요소 <p>에 길이를 설정해준다면?? 밑에서 확인

display : block

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 block 입니다.

<div>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<p>
<nav>
<ul>
<li>

<div> 태그는 기본적으로 block이기 때문에 새로운 줄에 가버립니다. 그리고 가로 길이는 최대한 많이, 100%를 차지한다.

ex)

<style>
        span{
            background-color: red;
        }
        body{
            background-color: gray;
        }

        p{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>html,css,javascript , <span>react</span> 공부하기</p>
</body>
</html>

<p> 태그에 배경색을 지정했다.

자기 글자 크기 만큼 배경색을 입히는 게 아니라

최대한 많이 가져간다.

※ block 요소는 가로,세로 길이를 직접 설정 해 줄 수 있다.

 p{
            background-color: skyblue;
            height: 100px;
        }

세로 길이가 늘어났다.