인라인과 블록 요소(Web)

 

웹의 인라인 요소와 블록 요소에 대해 알아보자!

 

 

글자와 상자

 

요소가 화면에 출력되는 특성, 크게 2가지로 구분이 가능하다

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

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

 

위의 인라인 요소와 블록요소는 우리가 CSS를 사용할 때 굉장히 밀접하다!

아직 우리는 CSS를 배우지 않았기 때문에 이해하기에 어려움이 있을 수 있지만

지금부터 조금씩 이해를 하면 

추후에 CSS를 공부할 때 매우매우 도움이 될 것이다

 

 

 

 

인라인 요소

 

우리가 사용하는 대표적인 인라인 요소는 span태그가 있다

span태그란 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도로 사용된다

<span>Hello</span>
    <span>World</span>

 

위의 코드를 봤을 때 span태그는 Hello라는 단어의 영역이 어느정도인지

World라는 단어의 영역이 어느정도 인지 설정하는 용도로 사용되는 것이다.

 

이제 인라인 요소에 대해 간단히 알아보겠다

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

요소가 수평으로 쌓인다

위의 출력된 텍스트를 보면 Hello부터 수평으로 쌓인 것을 볼 수가 있다

 

또한 인라인 요소는 기본적으로

자신을 포함하고 있는 컨텐츠 크기만큼 자동으로 줄어든다

즉 위의 코드를 보면 Hello라는 크기만큼 span태그의 크기가 줄어들었고

World라는 단어의 크기만큼 span태그의 크기가 줄어들었다

 

그러므로 인라인 요소는 가로 세로 사이즈가 최대한 컨텐츠에 딱 맞게 줄어들려고 한다

 

또한 이 부분도 매우 중요한데

<span style="width: 100px;">Hello</span>
<span style="height: 100px;">World</span>

 

위의 코드를 보면 인라인 요소의 너비와 높이를 지정해주려고 하는데

출력을 해보면 아무런 반응이 없다 

왜 그럴까?

 

이것도 인라인 요소의 특징인데

인라인 요소는 글자를 취급하는 요소이기 때문에 글자는 가로 사이즈와 세로 사이즈를 가질 수 없어

위의 코드처럼 가로너비와 세로 너비를 지정하더라도 

아무런 반응이 없다

 

 

<span style="margin: 20px;">Hello</span>
<span style="padding: 20px;">World</span>

 

이번에는 요소의 외부 여백을 지정하는 margin과

내부 여백을 지정하는 padding을 사용하였다

우리가 아직 이 부분을 배운 적이 없기 때문에 간단히 설명을 하자면

 

margin

 

위의 이미지가 margin을 설명하는 이미지이다

위의 이미지처럼 요소의 외부 여백을 지정하는 것이 margin이다

 

 

padding

 

위의 이미지는 padding이다

즉 element라는 요소의 내부 여백을 지정해줄 때

padding을 사용한다

 

 

자, 다시 인라인 요소를 봐보도록 하자

 

인라인 요소는 외부던 내부던 상관없이 여백을 지정할 때에는

위와 아래의 여백은 정상적으로 적용이 되지 않고

좌우 여백은 정상적으로 적용이 된다!

 

 

위의 이미지를 보면 좌우 여백이 적용된 것을 볼 수 있다.

 

 

 

블록 요소

 

우리가 대표적으로 사용하는 블록 요소에는 div 태그가 있다

div 태그는 span태그와 마찬가지로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 태그로써

우리가 정말 많이 사용하는 태그 중 하나이다

 

<div>Hello</div>
<div>World</div>

 

블록 요소는 위에서 봤던 인라인 요소와 다르게 

요소가 수직으로 쌓이는 것을 볼 수 있다

 

또한 대표적인 특징으로는

가로 너비가 부모 요소의 크기만큼 자동으로 늘어난다

위의 인라인 요소는 콘텐츠의 가로 너비만큼 최대한 줄어들었다면

블록요소는 반대이다

하지만 높이는

인라인 요소와 같이 콘텐츠 크기만큼 자동으로 줄어든다

 

블록요소의 background-color를 지정해서 봐보자면

 

 

위의 이미지처럼

가로 너비는 최대한 늘어나고

세로 높이는 콘텐츠 크기만큼 줄어든 것을 볼 수 있다

 

이번에는 가로 너비와 높이를 지정해보자

 

<div style="background-color: orange; width: 100px;">Hello</div>
<div style="background-color: rosybrown; height: 40px;">World</div>

 

이렇게 가로너비와 세로 너비를 지정할 경우

인라인 요소와는 다르게 잘 적용이 되는 모습을 볼 수 있다

 

 

 

이번에는 margin과 padding을 봐보도록 하자

<div style="background-color: orange; margin: 10px;">Hello</div>
<div style="background-color: rosybrown; padding: 10px;">World</div>

 

이렇게 코드를 작성하였고

 

 

인라인 요소와는 다르게 상하좌우 모두 잘 적용이 되는 것을 볼 수 있다.