[CSS 기초] 블럭(블록) 및 인라인 요소

안녕하세요 PNcoding입니다 :)

 

이번 포스팅에서는 css의 block(블럭) , inline(인라인) 모델에 대하여 알아보도록 하겠습니다.

 

 

---

 

 

이러한 block(블럭) , inline(인라인) 모델을 이해한다는 것은 css를 사용하여 레이아웃을 구성하거나 콘텐츠들을 정렬하기가 쉬워진다는 의미라 할 수 있습니다.

 

 

 

1. 블럭 요소 (block element)

 

1-1. 태그의 가로 크기는 브라우저의 좌우 공간을 가득 채우며 존재

<div class="box"></div>

 

.box {
    height: 100px;
    background-color: lightblue;
}

 

앞의 코드를 작성하시면 가로크기를 지정하지 않았음에도 불구하고 브라우저 가득 가로크기가 채워지는 것을 확인할 수 있습니다.

(세로크기가 없으면 브라우저에 박스의 크기가 표현되지 않으니 세로크기는 필수로 넣어주시면 됩니다.)

 

 

1-2. 박스는 항상 세로로 배치

<div class="box_1"></div>
<div class="box_2"></div>

 

.box_1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.box_2 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

 

세로로 정렬되는 블럭요소

 

어떤 크기값을 넣던지 박스들은 브라우저에서 세로로 배치가 되는 것을 확인할 수 있습니다.

 

 

1-3. 내가 지정한 width(가로) , height(세로) 크기값을 그대로 브라우저에 표현

어떤 크기값을 지정하던지 브라우저에 항상 내가 지정한 크기값 대로 표현이 됩니다.

 

 

1-4. 글자 관련 태그를 제외한 대부분의 태그들은 블럭요소의 특징을 지님

글자 관련 태그를 제외한 대부분의 태그는 블럭요소의 특징을 지니지만, 태그의 특징을 바꿀 수 있는 방법이 있기에 그 모든 태그들을 외울 필요는 없습니다.

ex) div , h1 ~ h6, p ...

 

 

 

 

---

 

 

 

2. 인라인 요소 (inline element)

 

2-1. 내가 지정한 width(가로) , height(세로) 크기값이 표현되지 않음

<div class="box_1">블럭요소1</div>
<div class="box_2">블럭요소2</div>
<br>
<a href="#" class="box_1">인라인요소1</a>
<a href="#" class="box_2">인라인요소2</a>

 

.box_1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.box_2 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

 

블럭과 인라인 요소에 크기값 적용 결과

 

 

블럭요소와 인라인요소의 태그에게 동일한 크기를 적용시켰을 때, 인라인요소의 태그는 크기값이 적용되지 않는 것을 확인할 수 있습니다.

 

 

2-2. 세로로 배치되지 않음 (가로로 배치)

블럭요소와 다르게 인라인요소의 태그는 가로로 배치가 됩니다.

또한 인라인 요소의 태그와 태그 사이에 알지 못하는 임의의 간격이 생성되는 것을 확인할 수 있습니다.

가로로 배치되는 결과 화면

 

 

 

2-3. 글자

글자 관련 태그들은 인라인 요소의 특징을 가지며, a태그 및 img 태그도 인라인 요소의 특징을 가집니다.

ex) a, img, b, big, small, span, strong, i ...

 

 

 

 

---

 

 

반응형

 

 

앞에서 보신 것처럼 html 태그들은 블럭 및 인라인 요소의 특징을 가지고 있습니다.

 

그렇다면 우리는 html에 사용되는 태그들의 특징을 모두 외우고 있어야만 하는 건가요?

라는 의문이 드실 겁니다.

 

사실 외우면 좋긴 하겠지만 대부분의 코딩을 하시는 분들도 모든 태그들을 외우지는 못하실 거예요.

그러면 어떻게 하면 좋을까요? 외우지 않아도 되는 걸까요?

 

네. 굳이 외우지 않아도 괜찮습니다.

왜냐하면 그 요소의 특징을 바꾸는 방법이  css에 존재하기 때문이죠.

 

그러면 요소의 특징을 바꾸는 방법을 알아보도록 하겠습니다.

 

 

 

3. display 속성

display 속성은 태그를 어떤 식으로 보여줄지를 결정해 주는 속성입니다.

크게 4가지로 나누어서 볼 수 있습니다.

• none
• block
• inline
• inline-block

이 4가지 속성값 중 많이 보신 속성값이 있을 겁니다. 

바로 block과 inline이죠. 이 속성값을 활용하시면 굳이 모든 태그들의 요소를 외우고 있지 않아도 되는 겁니다.

 

하나씩 보도록 하겠습니다.

 

 

3-1.  none

브라우저에서 아예 존재하지 않게 만들어 줌

<div class="box_1">블럭요소1</div>
<div class="box_2">블럭요소2</div>

 

.box_1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.box_2 {
    width: 100px;
    height: 100px;
    background-color: pink;

    display: none;
}

 

display: none 적용

 

분명히 두 개의 블럭요소에게 크기값을 넣어주었음에도 불구하고 두 번째 핑크색의 태그가 브라우저에 표현이 되지 않는 것을 볼 수 있습니다.

바로 display속성값 중 none을 사용했기 때문입니다.

이 속성값을 사용하게 된다면 브라우저에 아예 요소가 존재하지 않게 만들어 줄 수 있습니다.

 

 

3-2.  block

기본적인 태그들이 지니는 값

인라인 요소의 특징을 가지는 태그들을 블럭 요소로 바꾸어 줄 수 있음

<a href="#" class="box_1">인라인요소1</a>
<a href="#" class="box_2">인라인요소2</a>

 

.box_1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.box_2 {
    width: 100px;
    height: 100px;
    background-color: pink;

    display: block;
}

 

인라인 요소에게 display: block 적용 결과

 

결과 화면을 보시면 인라인 요소였던 a 태그가 블럭 요소의 특성을 지니게 되어 크기값이 들어갔으며, 세로로 정렬이 되는 것을 확인할 수 있습니다.

 

 

3-3.  inline

블럭 요소의 특징을 가지는 태그들을 인라인 요소로 바꾸어 줄 수 있음

굳이 바꾸어서 쓰는 경우는 잘 없음

<div class="box_1">블럭요소1</div>
<div class="box_2">블럭요소2</div>
<div class="box_2">블럭요소3</div>

 

.box_1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.box_2 {
    width: 100px;
    height: 100px;
    background-color: pink;

    display: inline;
}

 

블럭요소가 인라인 요소로 변경

 

결과 화면을 보시면 블럭 요소였던 div 태그가 인라인 요소의 특성을 지니게 되어 크기값이 없어진 것을 확인할 수 있으며, 가로로 정렬이 되어 있습니다.

 

 

3-4.  inline-block

inline과 block의 특성을 합쳐놓은 속성값

기본적으로 inline 특성을 가졌으며, 크기값을 넣어줄 수 있음

인라인 요소가 지니고 있는 알지 못하는 여백 영역 때문에 잘 사용하지 않는 속성값

<a href="#" class="box_1">인라인요소1</a>
<a href="#" class="box_2">인라인요소2</a>

 

.box_1 {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    display: inline-block;
}

.box_2 {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: inline-block;
}

 

인라인블럭 적용 결과

 

인라인 요소에게 적용시키게 되면, 인라인 요소의 특성을 지닌 상태로 크기값이 들어갑니다.

내가 알지 못하는 태그와 태그 사이의 간격이 생성되기 때문에 실제로 잘 사용하지는 않는 속성값이라 할 수 있습니다.

 

 

 

---

 

 

 

여기까지 해서 태그들의 특성에 대하여 알아보았습니다.

내가 기본적으로 사용하는 태그들의 특성을 알고 있다면 레이아웃을 작성하는 데에 많은 도움이 될 것입니다.

 

다음 포스팅에서는 여백과 관련된 속성에 대하여 알려드리도록 하겠습니다 :)