inline, block 요소

inline, block 요소

ㆍ CSS 인강이나 책들을 보면 inline, block요소에 대해

    나오곤 했었는데, 그때야 뭐 그냥 그러려니 하고

    넘어갔었는데 직접 만들려고 하다 보니, 이 부분이 

    중요하다는걸 깨달았습니다.

ㆍ 기본도 안하고 뭔가를 만들어보려고 했었는데.. 한계를

    느끼고.. 다시 기본부터 하나하나 보는중입니다..

inline, block 요소

HTML에서 사용하는 요소들은

크게 보면 inline요소 block요소로 나뉩니다.

먼저 inline 요소를 보면

대표적으로

<a>요소와 <span>요소가

있습니다

코드를 작성하면서

눈으로 확인해보면

이렇게 <a>와 <span>요소는

content에 맞게 영역이 잡히게 됩니다.

그 다음은

바로 block요소를

보면서 차이점을 확인해보겠습니다

대표적인 block요소는

<p>,<h>요소정도에 있겠네요

이것도 만들어보면서 눈으로 직접

확인해보겠습니다.

이렇게

block요소인 <p>, <span>는

content에 따라 영역이 잡히는

inline요소와 다르게

무조건 한줄전체를 자기영역으로

잡게 됩니다.

개발하는데 두 가지를 신경써야 하는 이유?

block, inline 요소에

대해 기본적으로 알고 있어야 하는이유는

각 요소에 따라 먹히는 속성과 먹히지 않는

속성이 있기 때문입니다.

예를 들어

가장 많이 사용하는 가운데정렬을

시켜보도록 하겠습니다.

이렇듯 block요소는

text-align : center;가

먹히는 것을 알 수 있고

inline요소는

text-align : center;가

먹히지 않는 것을 확인할 수 있습니다.

블럭이 잡히는 기준으로

생각해보면 당연한 것이지만,

inline과 block 개념에 대해 아에

모르고 있다면 당연한것이 아니겠죠

그렇다면 inline요소들은

text-align 속성을 아에 사용할 수 없을까요?

display 사용하기

display 속성을 사용하여

우리는 block, inline 요소등등

원하는 데로 변경하여 사용할 수 있습니다.

display의 속성값이 block, inline 이렇게

딱 2가지 존재하는 것은 아니지만

이번글에서 다 다루기에는 많은 내용이므로

지금은

간단하게 inline요소인 <a>를

block요소로 바꿔서

text-align : center;

가 사용가능하도록 바꿔보겠습니다.

뭐 이렇게 display 속성을 통하여

block요소로 바꿔버리는 방법도 있고

아니면 <a>요소 바깥으로 block요소를 한번더 감싸는

방법을 사용할 수 있습니다.

<div><a>안녕하세요</a></div>

이런식으로 div가 block요소이므로

바깥에 div로 감싸준 후에

div에 text-align 속성을 써주면 되겠죠?