inline, block 요소

Posted by ITPangPang
2016.12.11 16:35 웹(Web)/CSS


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;

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




블럭이 잡히는 기준으로

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


inlineblock 개념에 대해 아에

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


그렇다면 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 속성을 써주면 되겠죠?

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로