Today I learn... "CSS Layout"

전반적인 CSS레이아웃에 대하여 다뤄 보려고 한다.

다룰 항목은 총 세가지로,

• Position
• Inline, Inline-block, Block
• Float

이다.

Position

먼저, 단어가 가지고 있는 사전적 의미부터 알아보자.
Position이 가지고 있는 사전적인 의미는 다음과 같다.

Position : 1.명사 (자리를 잡고 있는 위치)
             2.명사 (있어야 할, 알맞은) 자리
             3.동사 (특정한 위치에) 두다, 배치하다.

단어의 의미로 유추하면, 정확히 어떤 것인지는 모르지만 자리 혹은 위치에 연관되는 요소라고 생각 할 수 있다.

Position 속성은 해당 컨텐츠가 어디에 위치할 지에 대한 정보를 담고 있는 속성으로서,
오늘 알아 볼 Position의 속성은 relative, absolue, fixed이다.

각각 단어의 뜻은, relative(상대적인), absolute(절대적인), fixed(고정된) 이다.
즉, 각 속성들은 컨텐츠의 위치를 상대적으로, 혹은 절대적으로, 혹은 고정 된 상태로 만들 수 있는것이다.

-Fixed

우선 fixed를 먼저 살펴보도록 하자.
고정된 이라는 의미를 가지고 있는 fixed는 그 이름 처럼 해당 컨텐츠의 위치를 고정시킨다.

'아니, 컨텐츠가 살아 움직이는것도 아닌데 어떻게 위치를 고정 시킨단 말인가?'

이때 이야기 하는 컨텐츠의 위치는, 우리가 보는 화면상에서 해당 컨텐츠가 차지하는 위치를 이야기 한다.
fixed가 없다면 스크롤을 움직일 때 컨텐츠가 위, 혹은 아래 혹은 양옆으로 사라져 버릴수도 있지만, fixed를 부여하면 항상 우리가 보는 화면에 고정 된 상태로 나타나게 된다.

fixed된 컨텐츠를 확인 할 수 있는 하나의 예로서, 애플 홈페이지의 상단바 메뉴가 있다.

해당 웹페이지의 상단바 메뉴는 우리가 스크롤을 내리면 사라지지 않고, 우리 화면에서 고정된채로 움직인다.
이것이 바로 Fixed속성인것이다.

-Absolute

Absolute는 컨텐츠에 절대적인 위치를 갖도록 명령한다.
Absolute가 부여된 컨텐츠는 해당 위치에 있는 다른 컨텐츠를 무시하고, 자리를 잡는다.
이때 다른 컨텐츠를 밀어내는것이 아니라, 그 컨텐츠보다 한 레이어 위에서 겹쳐 보이는 방식으로 위치한다.

때문에 토글 메뉴등의 위치를 특정한 장소에 위치 시킬때 자주 사용 된다.

-Relative

앞서서 컨텐츠가 보이는 공간을 고정시키거나, 특정한 장소에 위치시키는 fixed와 absolute에 대해 알게 되었다.
그렇다면 Relative(상대적인)은 어떤 속성을 부여하는것일까?

실제로 <div>를 만들고, position: relative;를 속성으로 부여했을때, 해당 <div>는 아무런 변화도 하지 않을 것이다.
relative만으로는 아무런 변화를 일으키지 않기 때문이다.
아무 효과가 없는 디자인 요소는 당연히, CSS에 넣지 않았을것이다.

Relative가 부여된 컨텐츠는, 자식 컨텐츠에게 fixed, absolute가 부여 되었을때 기준점이 된다.
단어 그대로, 해당 컨텐츠가 상대적인(Relative) 기준점이 된다는 의미이다.

만약 자식이 fixed 혹은 absolute인데 부모 컨텐츠에 relative가 없다면? 고정을 시키려 해도 어디에 고정을 시켜야 할지 기준을 잡을 수 없다.

그럴때 컴퓨터는, 자신의 상위 컨텐츠에 relative가 없을 경우 더 상위 부모에게 찾아간다.

"제 기준이 되어 주실 수 있나요?"

하고 말이다.

만약 그 어떤 부모요소에도 relative가 없다면, 최상위 요소인 body를 찾아 갈것이다.
body는 default로 relative를 가지고 있기에, 요소중에 아무도 relative가 없을 경우, body가 기준이 된다.

이 기준에서 top, bottom, left, right로 위치를 잡아 나가는것이다.

Inline, Inline-block, Block

다음으로는 컨텐츠가 어떻게 문서에서 자리를 차지하는가에 대하여 다뤄보려 한다.
이 속성들은 display를 통해 선언할 수 있는 요소이며, 할당 된 공간을 어떻게 다룰까에 대한 선택지라고 할 수 있다.

Inline

Inline이라는 단어는 In + line이 합쳐진 단어이다.
CSS에서는 라인 안에 할당된 공간만을 사용하겠다. 라는 의미인것이다.

이것만 들어서는 감이 오지 않는다.
다른 방법으로 접근해보자.

우리가 텍스트를 입력 한다고 했을때, 텍스트가 입력 되는 그 줄, 즉 line 안에서만 공간을 사용하는것이 바로 inline이다.

대표적으로 <span>이 있다. <span>은 단문 형식의 텍스트를 입력하는 태그로 사용된다.
그럼 <span> 대신에 <p>를 사용 할 수는 없을까?
<p>도 텍스트를 입력하는 태그이다. 둘은 무슨 차이가 있을까?

바로 여기에 인라인 요소의 특징이 숨겨져 있다.
MDN에 따르면, 인라인 요소는 다음과 같은 특징을 지닌다.

인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.

즉, 인라인 요소는 할당된 공간만을 사용한다는 것이다.
<p>태그를 텍스트들 사이에 입력하게 되면 줄바꿈이 일어난다.
이렇게

말이다

하지만, <span>은 인라인 요소이기에, 줄바꿈을 만들지 않는다.
바로 이렇게 말이다.

이것이 곧 인라인 요소의 특징이며, <p>태그와 <span>태그의 차이점이라 할 수 있을것이다.

Block

그렇다면 <p>태그는 어떤 속성을 가지고 있을까?
<p>태그는 block속성을 가지고 있다.

Block속성은 하나의 요소가 존재하면, 그 옆으로는 다른 요소가 위치 할 수 없는 특징을 가지고 있다.

MDN의 설명을 들어보자.

블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

그렇다.
블록요소는 가능한 모든 너비를 차지하기에, 옆에 다른 요소가 올 수 없는 것이다.
때문에, <p>태그는 사용 되었을때 줄바꿈이 일어나게 되는것이다.

블록요소만의 특징도 있다.
바로 높이를 가진다는 것이다.

인라인 요소는 라인 안에 할당된 공간만을 사용하기 때문에, 높이가 없다.
텍스트의 크기가 곧 높이고, 그 이상의 공간을 사용 할 수 없기 때문이다.

하지만 블록요소는 할당된 공간만을 사용한다는 제약이 없기에, 사용자가 필요한 만큼 높이를 조절 할 수 있고, 심지어 다른 블록요소 혹은 인라인요소마저 포함할 수도 있는 것이다.

Inline-block

지금까지 알아본 inline요소와 block요소 모두 유용한것이지만, 일장일단이 있었다.
inline요소는 줄을 바꾸지 않고 텍스트와 텍스트 사이에서도 사용 할 수 있지만, 높이를 가지지 않는다는 단점이 있다.
block요소는 높이를 마음대로 조절 할 수 있지만, 옆에 다른 요소가 올 수 없고, 줄바꿈을 일으킨다는 단점이 있다.

"그럼 그 둘의 장점만을 합친다면 어떨까?"

그렇게 생각하여 나온것이 Inline-block이다.

이 요소는 옆에 다른 요소가 위치해도 줄바꿈을 일으키지 않고, 높이도 조절 할 수 있다.
Inline-block의 등장으로 모두가 행복하게 되었을까?

아쉽지만 그렇지 않다.

Inline과 Block 그리고 Inline-block 세가지를 비교한 이미지이다.
한가지 이상한 점이 있다.

Inline-block의 컨텐츠 사이에 이상한 빈칸이 있는것이다.
이것이 바로 inline-block의 치명적인 단점이다.

사용자가 지정하지 않은 저 공간은, 없애려면 없앨 수 있지만 flex의 등장으로 굳이 불편함을 감수하면서까지
Inline블록을 사용 할 이유가 없어졌다.

Float

마지막으로 Float에 대해 알아보자.

Float의 사전적인 의미는,

float : 1. (물 위나 공중에서) 떠가다 2. (가라앉지 않고 물에) 뜨다 3. (시가행진 때 무대처럼 꾸민) 장식 차량

주로 뜬다는 의미를 가지고 있는 단어이다.

즉 CSS에선 문서의 흐름에서 떠올라 , 텍스트등의 요소가 해당 컨텐츠등의 좌 혹은 우에 위치하도록 하는 속성이다.

바로 이렇게, 흐름에서 떠있는 상태가 바로 float속성인것이다.

float속성은 대부분의 경우 block의 성질을 가진다.
다만 흐름에서 떠올라 있는 상태이기에, 다른 컨텐츠가 옆으로 오는것을 허용하는것이다.

본래는 이미지 등에 사용하여 이미지와 텍스트 배치를 위해 만들어진 속성이지만, 레이아웃으로도 이용 되기도 한다.
물론, 최근에는 flex등의 등장으로 잘 사용 되지는 않는 속성이다.

float를 사용하다보면 한가지 문제가 생긴다.
바로 떠오른다는것이 문제인것이다.
float로 지정된 컨텐츠가 떠버렸기 때문에, 정상적인 요소로서 처리 되지 않는다.
때문에 해당 요소의 부모 요소는 안에 자식 컨텐츠가 사라진것으로 인식 되어 높이가 사라지는등의 문제가 있다.

float된 요소의 높이를 인지하지 못하는것이다.
이를 해결하기 위해 아무 태그를 작성후, clear속성을 사용하거나, 부모 컨텐츠에 <overflow: hidden;>를 부여하거나,
혹은 부모요소에도 float을 적용하는 방법등이 있다.

부모 요소에 float를 부여하게 되면 자식 요소의 높이를 인지하여 문제가 해결 된다.
하지만 그때문에, block의 성질이 사라지기도 한다.
그때엔 <width: 100%>를 추가해야 한다.