<22.03.14> CSS 공부 일지 #03. display 속성에 대해 ㅡ Block과 Inline 그리고 inline-block

CSS 공부하기 #03

 

오늘은 CSS의 Block과 Inline 속성에 대해 알아보고자 한다. Block과 Inline 속성은 CSS를 통해 웹 페이지의 레이아웃을 구성하는데 있어 필수적으로 알아야 하는 요소이다. 지난번 포스팅에서는 박스 모델에 대해서 배웠는데, 이러한 박스 모델이 웹 브라우저에서 어떤 위치에 어떻게 놓이느냐는, Block과 Inline으로 결정이 난다고 해도 과언이 아니다.

 

1. Display 속성

 

block과 inline에 대해 본격적으로 알아보기 전에 display 속성에 대해 알아보자. HTML의 태그에는 기본적으로 display 속성들이 모두 지정되어 있다. 이 속성은, HTML 태그들이 웹 브라우저에서 어떻게 보이는지를 결정하는데, 이 해당 속성의 값으로 block과 inline이 있는 것이다.

 

display 속성은 사용자가 CSS 코드를 통해 임의적으로 변경할 수 있다. 가령 아래와 같이 말이다.

 

h1 {
    display: inline;
}

 

<h1> 태그는 기본적으로 block 속성이지만, 사용자의 필요에 의해 display 속성을 명시하여 inline으로 설정할 수 있다. 생략할 경우 기본적으로 설정된 디폴트값에 따른다. 

 

2. block

 

block 속성을 가지는 태그들은, 항상 새로운 라인(Line)에서 시작되며, 자신이 점유한 라인의 모든 영역을 차지한다. block 속성을 가지는 태그들로는, <div>, <h1>, <p>, <ul>, <ol>, <form> 등이 있다. 여기서 <div> 태그를 이용하여 block 속성의 특징을 살펴보자.

 

<div>
    BLOCK
<div>

div {
    border: 1px solid black;
}

 

위 코드들을 이용하여 웹 브라우저 화면에서 <div>태그가 어떻게 보이는지 확인해보자.

 

 

웹 브라우저의 라인을 모두 차지하고 있음을 알 수 있다. 이러한 특징 때문에, Block 속성을 가지는 요소들은 width를 통해 크기를 줄인다 하더라도 자신의 옆에 다른 요소가 위치할 수 없다. 위 <div> 태그의 넓이를 줄여 여백을 만든 뒤 또 다른 <div>를 만들어 보겠다.

 

<div>
    BLOCK
</div>
<div>
    SECOND BLOCK
</div>

div {
    box-sizing: border-box;
    border: 1px solid black;
    width: 300px;
}

 

두 개의 <div> 태그의 width를 300px로 설정하였다. 아래는 위 코드를 웹 브라우저 화면에서 확인한 것이다.

 

 

공간이 남았음에도 서로 나란히 정렬되지 못하고 SECOND BLOCK이 BLOCK의 밑에 위치했다. 

 

이러한 Block 속성은 HTML 태그가 부모 - 자식 관계로 중첩되어있을 때에도 마찬가지다. 아래 코드는 class를 활용하여 서로 다른 <div> 태그를 부모 - 자식 관계로 중첩시켜 놓은 것이다.

 

<div class = "parent">
    <div class = "child">
        BLOCK
    </div>
</div>

 

아래는 parent와 child 클래스에 대한 css 코드이다.

 

.parent {
    width: 1000px;
    border: 1px solid black;
    background-color: yellow;
}

.child {
    border: 1px solid green;
}

 

parent class에는 width를 1000px로 지정하고 child에는 별도의 width를 지정하지 않았다. 이렇게 될 경우 child class가 적용된 <div> 태그의 width도 부모의 width를 그대로 상속받는다. 따라서 1000px의 width를 가지게 된다. 하지만 아래의 코드를 보자.

 

.parent {
    width: 1000px;
    border: 1px solid black;
    background-color: yellow;
}

.child {
    width: 400px;
    border: 1px solid green;
}

 

child class의 width가 400px가 되었다. 이럴 경우 parent class의 width와는 별개로 width가 생기게 된다. 아래는 위 코드를 브라우저에서 실행한 것이다.

 

 

BLOCK을 감싸고 있는 child class의 <div> 태그가 400px로 적용된 모습을 볼 수 있다. 나머지 오른쪽 여백은 margin으로 채워졌다. 이를 개발자 도구로 확인하면, margin에는 값이 없는 것으로 나오지만 block 속성의 특성 상 남은 여백은 margin으로 처리되었다고 볼 수 밖에 없다.

 

block 속성을 가진 요소는 margin, padding을 상하좌우별로 자유롭게 값을 설정할 수 있다. 단독 요소가 한 라인을 전부 차지하기에 모든 여백값에 대한 설정이 가능한 것이다.

 

3. inline

 

inline 속성은 block 속성과 반대라고 생각하면 매우 쉽다. inline 속성은 block과는 다르게 새로운 라인마다 요소를 추가하는 것이 아닌, 한 라인에서도 자신의 요소 옆에 다른 요소가 오는 것이 가능하다. inline 속성을 가진 태그로는, <span>,<a>,<img> 등등이 있다. 

 

inline은 라인에서 자신이 보유한 공간만큼만 점유하기 때문에, 다른 inline 요소가 계속해서 나란히 정렬될 수 있다. 아래 코드는 inline 속성을 보유한 대표적인 태그인 <a>를 활용한 코드이다.

 

<a href = "#">링크1</a>
<a href = "#">링크2</a>
<a href = "#">링크3</a>
<a href = "#">링크4</a>

a {
    border: 1px solid black;
}

 

<a> 태그가 얼마만큼의 공간을 차지하는지 확인하기 위해 의도적으로 border 속성을 사용했다. 웹 브라우저에서는 아래와 같이 출력된다.

 

 

각 링크들이 일정한 간격(margin)을 두고 나란히 정렬되어있다. 한 라인을 넘어가지 않는 이상 <a> 태그들을 계속 추가한다하더라도 링크4 옆에 위치하게 될 것이다. 한 줄을 넘어갈 경우 아래 줄로 자연스럽게 넘어가게 된다.

 

inline 속성을 가진 요소들은 block과 달리 width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 속성을 지정할 수 없다. top, bottom으로 여백값을 설정하게 될 경우 라인마다 간섭이 이루어지기 때문에 inline 속성의 본질이 무너지게 된다. 아래 코드를 보자.

 

<a href = "#">링크1</a>
<a href = "#">링크2</a>
<a href = "#">링크3</a>
<a href = "#">링크4</a></br>

<a href = "#">링크5</a>
<a href = "#">링크6</a>
<a href = "#">링크7</a>
<a href = "#">링크8</a>

a {
    border: 1px solid black;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

 

지정해선 안되는 속성들을 청개구리마냥 일일이 다 지정했다. 사실 결론부터 말하면 브라우저에서 렌더링할 때 모두 적용은 된다. 하지만 왜 inline 요소를 사용할 때는 top, bottom에 여백값을 주면 안되는지를 뼈저리게 느낄 수 있다.

 

 

padding과 margin의 top, bottom 여백값을 준 결과 서로의 라인을 침범하였다. 위와 같은 이유로 inline 요소는 top, bottom을 통한 여백값 지정은 하지 않는 편이 좋다. 반대로, left, right는 정상적으로 작동한다. 아래 코드는 top과 bottom을 left와 right로 바꾼 코드다.

 

a {
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

 

서로의 라인에 침범하지 않고 서로의 간격만 조정되었다. 

 

inline 요소가 연속적으로 사용될 경우, 최소한의 간격을 유지하기 위해 좌, 우 5px 가량의 외부 여백(margin)이 자동적으로 발생한다. inline 요소는 이러한 최소한의 여백설정으로 서로를 분별할 수 있다.

 

4. inline-block

 

inline-block은 inline의 특성과 block의 특성 모두를 가지고 있다. 즉 inline 요소처럼 한 라인에 여러 요소들이 공간을 점유할 수 있으면서, block 요소처럼 width와 height, margin, padding을 자유롭게 설정 가능하다. 위에서 링크1 ~ 8로 예시를 들었던 html 코드를 그대로 사용하고, css 코드에만 조금 변경을 더하도록 하겠다.

 

a {
    display: inline-block;
    border: 1px solid black;
    padding: 10px 20px;
    margin: 5px 10px;
    width: 200px;
    height: 200px;
}

 

display를 inline-block으로 수정하고, padding의 상하를 10px, 좌우를 20px, margin의 경우 상하를 5px, 좌우를 10px로 설정해두었다. 그리고 width와 height도 지정해두었다. 결과는 아래와 같다.

 

 

inline 같지만 block같고, block같지만 inline과도 같은 결과가 나와버렸다. 이처럼 inline-block은 inline의 특성과 block의 특성을 모두 합한 display 속성이다.

 

 

오늘은 block과 inline, inline-block에 대해 알아보았다. 사실 display의 속성으로 flex도 있지만 flex는 향후 별도의 포스팅에서 단독으로 다뤄보도록 하겠다. 다음에도 재미있는 공부 거리를 들고 찾아오겠다.

 

P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.