inline요소와 block요소

오랜만에 포스팅하는 찐망고입니다.

일주일에 한두 번이라도 포스팅하는 게 나름 계획이긴 했는데 쉽지 않네요..

 

그저 출퇴근만 할 뿐인데 바빠요....

 

실은 안 바빠요 그저 게으를 뿐 

요즘 MBTI과 몰입 중인데 저는 정말 찐 P인 듯.. ^^;

 

 

웹 관련 포스팅이니까 본론으로 돌아와서~

 

웹 표준 코딩은 HTML요소의 각 뜻에 따라 뼈대를 짜는 게 가장 큰 목적입니다.

제목 요소에는 h요소를 문단에는 p요소를..

시멘틱 마크업에 맞춰 시멘틱 요소를 사용하는 것이죠~

 

각각의 요소에 대한 설명은 워낙 잘 나와 있는 곳들이 많아 패스하고 

저는 바로 박스 모델이라는 부분에 대해 설명하려고 했지만,

일단 그러려면 요소의 기본 특징을 알아야 합니다.

 

HTML에서 사용하는 요소들은  inline요소와 block요소로 나뉩니다.

 

<a href="#"><span>링크요소</span></a>
<button><span>버튼요소</span></button>
<em>강조요소</em>
<strong>강조요소</strong>
<div>block요소묶기</div>
<header>header요소</header>
<section>섹션요소</section>
<p>문단요소</p>

 

그림처럼 위 요소들은 한 줄로 쭉 나열이 되고

아래 요소들은 줄 바꿈이 일어나고 있죠~? ㅎ

한 줄로 나열된 요소들은 inline요소

아래 한 줄씩 줄 바꿈이 일어난 요소들을 block요소라고 합니다.

 

inline요소들은 각 요소의 콘텐츠 그러니까 텍스트 크기만큼의 가로 값을 가지고 있고

block요소들은 콘텐츠의 크기와 상관없이 브라우저의 너비만큼 가로 값을 가집니다.

 

아래 개발자 도구로 각 요소를 선택해보았는데요

 

a요소에 들어간 기본적인 속성

 

a요소는 기본적으로 밑줄과 커서에 포인터 처리가 됩니다.

아무래도 클릭하면 페이지가 넘어가는 링크를 만드는 요소라 밑줄도 생기고

마우스 모양도 바뀌는 거겠죠..

 

div요소에 들어간 기본적인 속성

p요소에 들어간 기본적인 속성

 

각 block요소를 개발자 도구에서 살펴보면

div요소도 그렇고 p요소도 그렇고 둘 다 display: block이라고 적혀있죠~?

p는 그 밑에 마진이라는 여백도 들어가 있어요~

그래서 결과물을 확인해보면 p요소 부분만 위아래로 여백이 있죠~

 

지금 이 요소들을 보면서

inline요소와 block요소를 구별할 줄 알아야 하는데요,

 

자주 쓰는 요소들을 분리해보면

block요소는 <div>, <header>, <h요소>, <form>, <p>, <ul>, <li>, <dl>, <blockqoute>...

inline요소는 <span>, <a>, <em>, <strong>, <input>, <label>, <img> 등이 있습니다.

 

inline요소는 inline요소 안에 들어간 콘텐츠만큼 너비를 가진다.

 - 포함된 콘텐츠만큼 너비를 가져야 하니 width나 height값을 적용할 수 없습니다.

inline요소 안에는 inline요소 또는 block요소를 포함할 수 없다.

 - 이 중 예외는 있습니다. inline요소를 그룹으로 묶을 수 있는 span요소와 a요소입니다.

 

block요소는 브라우저의 너비만큼 크기를 가진다.

- 포함된 콘텐츠와 상관없이 늘어나며, width와 height값을 적용할 수 있습니다.

block요소 안에 block요소와 inline요소를 포함 할 수 있지만 예외요소들이 있습니다.

- a요소는 inline요소지만 block요소들을 포함할 수 있습니다. a요소 자체는 inline요소이고

width, height값을 지정할 수 없기 때문에 상황에 따라 css로 요소의 속성을 변경해줘야 합니다.

 - 제목요소나 p요소에선 블록요소를 포함 시킬 수 없습니다.

 - ul, ol, table등등은 같이 사용할 수 있는 요소외엔 불가합니다.

 

<em><span>이렇게 쓰면 안됩니다</span></em>
<span><em>이렇게 쓰는건 됩니다</em></span>
<header>
 <div>이렇게 쓰는건 됩니다</div>
</header>
<p><div>이렇게 쓰는건 안됩니다</div></p>
<a><span>이렇게 쓰는것도 됩니다</span></a>
<a>
 <div>이렇게 쓰는 것도 되긴 합니다.</div>
</a>

 

가장 큰 특징은 콘텐츠만큼 너비를 가지느냐 마느냐이고, 

어떤 요소를 포함해서 마크업을 할 수 있는지 꼭 체크하며 작업하길 바랄게요~

 

 

시멘틱 요소를 이용하여 마크업을 하고, 그에 따라 제목 요소를 잘 사용하는 것이 첫 번째

접근성에 맞춰 작업하는 것이 두 번째

각 요소가 인라인인지 블록 요소인지 파악하고 마크업을 하는 게 세 번째입니다.

 

바로 박스 모델 포스팅으로 이어가도록 하겠습니다.

보더와 마진 패딩에 대해서도 이야기해볼 건데, 생각보다 왜 어려워하는지 요소들을 체크해봅시다.