[html] 글자와 상자 (인라인요소, 블록요소)

글자와 상자의 개념을 살펴보자.

 

- 요소가 화면에 출력되는 특성, 크게 2가지로 구분.

 

 

인라인(inline)요소 : 글자를 만들기 위한 요소들.

블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들.

 

 

 

1. 인라인 요소

 

 

대표적인 인라인요소로는 <span>태그가 있다.

<span>은 본질적으로 아무것도 나타내지 않는,

콘텐츠 영역을 설정하는 용도.

인라인요소는 기본적으로 왼쪽에서 오른쪽으로 수평으로

쌓이는 특성을 가지고 있다.

 

 

 

 

자세히보면 가운데 띄어쓰기가 있는것을 볼 수 있다.

인라인 요소는 글자 요소이기때문에

코드를 줄바꿈처리하면 하나의 띄어쓰기로 작동된다.

 

<span>인라인</span>
<span>요소</span>

 

인라인요소는 가로, 세로사이즈가 

자신이 포함하고 있는 콘텐츠 크기만큼 

자동으로 줄어든다. 

 

 

이번엔 인라인요소에 css스타일을 적용해보자.

 

<span style="width: 100px;">인라인</span>
<span style="width: 100px;">요소</span>

 

 

반응 없음!

 

반응이 없다. 

왜일까? 

앞서 인라인요소는 글자를 취급하는 요소라고 했다.

글자는 가로,세로 사이즈를 지정할 수 없었다. (아주 중요)

 

 

이번엔 padding, margin값을 넣어보자.

 

<span style="margin: 20px 20px;">인라인</span>
<span style="padding: 20px 20px;">요소</span>

 

 

 

인라인 요소는 위아래 여백이 적용되지않는 반면,

좌우의 여백은 적용이 된다.

 

 

이렇게 인라인 요소에서 여백이라는 개념을 사용할때

좌우는 되지만 위아래는 사용할 수 없다는것을 알 수 있다. 

 

 

 

또, 인라인요소 안에는 블록요소를 넣을 수 없다.

 

<span><div></div></span> //불가능
<span><span></span>></span> //가능

 

 

2. 블록 요소

 

 

대표적인 블록 요소로는 div태그가 있다.

div태그도 span태그처럼 본절적으로는 아무것도

나타내지 않는 콘텐츠 영역을 설정하는 용도이다.

 

 

블록요소의 큰 특징으로는 상자가 수직으로 쌓인다는 것과

부모요소의 크기만큼 자동으로 늘어난다는 것!

(div는 가로값이 기본 100%를 가지고 있어서 굳이 넣지않아도 된다.)

 

즉, 가로너비는 늘어나려고 하고, 세로는 인라인블록과 똑같이 줄어들려고 한다.

 

 

 

 

 

블록 요소안에는 인라인 요소를 넣을 수 있다.

<div><div></div></div> //가능
  <div><span></span></div> //가능

 

 

 

3. inline-block 요소

인라인 블록 으로는 대표적으로 input태그가 있다.

인라인 블록은 글자이면서 상자를 의미하고, 

글자요소이긴한데 상자요소가 가지고 있는 몇 개의 속성을 

가지고 있다.

 

앞에서 배웠던 상자 요소의 특징은 가로 세로값을 지정할 수 있고,

마진과 패딩같은 여백도 사용할 수 있었다.

이렇게 인라인 블록 요소는 수평으로 쌓이는 특징을 가지며,

상자 요소처럼 가로 세로값, 마진과 패딩도 사용할 수 있다.