웹디자인 기본(2) CSS레이아웃 공식

(2) CSS 레이아웃 공식 

css에도 공식이 있다. 공식을 알기전에 CSS와 HTML의 성지라 할 수 있는 w3school을 즐겨찾기하자. w3schools.com에는 html5부터 javascript까지 사용할 수 있는 모든 속성을 모두 볼 수 있다. 이번 포스팅에서는 CSS를 몰랐을 때, 심하게 헤맬 수 있는 부분을 정리해보자. 또한 일종의 공식처럼 외워둬야 할 정도의 법칙부터 살펴보자.

개발자들에게 있어, 가장 골치아픈 CSS 디자인 분야는 '레이아웃', '색상', '형태'이다. 이 중에서도 레이아웃은 서비스 기능에도 심각한 피해를 준다. 화면의 비율에 따라 레이아웃이 무너지면 빠른 속도를 자랑하던 강력한 기능은 순식간에 미완성 상태를 넘어 심지어 아마추어처럼 보인다. 레이아웃이 제대로 서지 않으면 사용자들은 사이트를 '공사중'으로 인식한다.

레이아웃의 기능 중에서도 늘 헷갈리는 속성 5형제가 있다.

"Display" "Position" "Overflow" "float" "Flex"

핀터레스트를 선두로 하던 2~3년 전만 하더라도 float속성을 활용한 카드UI가 한때 유행했었다. 이후 웹 브라우저 기능이 강력해지자 점차 flex를 사용하는 움직임이 최근들어 늘어난 듯하다. 하지만 중요한 건 flex, float가 아니다. 어떠한 서비스를 제공하느냐에 따라 맞는 UI를 만들 수 있어야 한다. 만능 UI란 있을 수 없다.

CSS를 사용하면서 반드시 알아둬야 할 공식을 알아보자.

1 display 속성

display를 어떻게 사용하느냐에 따라서 행이 맞을 수 있고 안 맞을 수도 있다. 다른 속성을 아무리 만져도 말을 듣지 않던 UI가 display속성값에 따라 원하던 행이 나타난다. 여기에는 inline-block과 block의 차이를 모르고 사용했기 때문일 수도 있고, block을 사용하지 않았을 경우도 있다.

Name	기능
none	화면에서 보이지 않게 만든다.
block	태그만의 영역, block을 만든다.
inline	한 행에 나열할 수 있게 한다.
inline-block	block영역을 만들고, 한 행에 나열한다.

display기능을 설명하기 위해서 간단한 예제에 적용을 해보자. 아래처럼, div태그 3개를 순서대로 나열한다. display:block 속성을 적용했더니 각자 1행씩을 차지하고 있다. block을 적용하면, 벽돌처럼 말 그대로 한 행씩 차곡차곡 쌓여있는 형태의 레이아웃이 된다. 물론 width, height수치를 조절해서 block의 크기를 자유자재로 조절할 수 있다.

Hello[display:block적용]

WebGL[display:block 적용::]

JoyWebGL[display:block적용]

중간 파란색 부분에 display:none을 적용해보자. 아래처럼 행이 사라진다.

Hello[display:block적용]

WebGL[display태그가 적용::]

JoyWebGL[display:block적용]

3개의 block을 한 줄에 나열하려면 아래처럼 'inline'을 적용해주면 된다. display속성에 inline을 적용하고, 크기를 아래처럼 한줄에 붙는다. 하지만 inline의 치명적인 단점이 있다. inline속성은 'width'와 'height'를 지정할 수 없다는 것. 글씨가 길어지면 자동으로 width가 길어지면서 다음줄로 내려간다.  

Hello[display:inline적용]

WebGL[display:inline적용]

JoyWebGL[display:inline적용]

width와 height를 지정하려면 'inline-block'을 사용해야 한다. inline-block을 사용하고, width를 %로 입력해보자. height값 역시 block에 따라 다르게 설정할 수 있다.

Hello[display:inline-block적용, height:30px

WebGL[display:inline-block적용,height:50px]

JoyWebGL[display:inline적용,height:100px;]

inline-block을 모두 적용할 경우, width와 height값을 임의로 지정할 수 있다. 그러나 내용에 따라 높이가 일정하지 않을 경우 군데군데 빈 공간이 나타난다. 이를 해결하려면 height값과 width값을 auto로 지정하면 된다. 반드시 특정 너비를 지정해야 하는 부분은 수치를 지정하고, 나머지는 이에 맞춰 움직이려면 auto로 지정한다. 

Hello[display:inline-block적용] height:30px 

 

WebGL[display:inline-block적용,width:50%,height:auto]

JoyWebGL[display:inline-block적용, height:auto, width:auto]

float이나 flext를 이용하지 않고, 행을 정렬하려면, 가로는 %로 지정하되,(반응형 고려) 높이를 auto로 지정하는 방식으로 UI를 만들어보자. 

2 position 속성

포지션을 설정할 때 항상 헷갈리는 부분은 'relative'와 'absolute'의 개념이다. 일단 단순하게 생각해보자. relative는 상대적이고, absolute는 절대적이라는 '사전적 정의'를 때려치우고, '움직이는지 안 움직이는지'에 집중한다. '상대적'인 위치라면 지정한 상대에 따라 자신도 움직이는 게 당연하다. 반대로 절대적이라면, 지정여부에 관계없이 자신의 포지션만 유지한다. 

문제는 하위 태그에 'absolute'를 적용하는 경우, 상위 태그의 좌표값을 x무시한다는 것이다. 절대좌표로 지정된 태그는 알아서(?) 상위 부모태그를 기준점으로 인식하지 않는다. 

즐거운 WebGL h1 영역

공간을 차지하는 영역1

공간을 차지하는 영역2

공간을 차지하는 영역3

position태그의 속성

위의 상황에서 공간을 차지하는 영역1 ~ 3까지 position:absolute속성을 넣어보자. 다음과 같은 불상사가 발생할 것이다. '공간을 차지하는 영역'은 상위 태그인 <h1>과 하위 태그 <h1>을 철저하게 무시하며, 절대좌표에 따라 움직인다. 얘네들이 상위,하위 태그들의 좌표값을 기준으로 움직이려면 어떻게 해야 할까? 

즐거운 WebGL h1 영역

공간을 차지하는 영역1,left:100px

공간을 차지하는 영역2,left:350px

공간을 차지하는 영역3,left:550px

position태그의 속성

어지럽게 변한 위의 상황을 정리하려면, 아래 법칙을 외워둬야 한다.

1. 자손의 position속성에 absolute를 적용하면, 부모는 height속성을 사용해야만 

   부모의 공간이 나타난다.

2. 자손의 position속성에 absolute를 적용하면, 부모의 position속성에는 relative를 적용해야만 

   부모의 좌표를 기준점으로 자손 태그가 움직인다.

공식을 바탕으로 다시 코드를 작성해보자. 1, 2번 공식에 기반하여 '공간을 차지하는 영역(<div>)'태그의 상위 태그인 'div'태그를 하나 생성한다.(녹색 테두리) div태그들(공간을 차지하는 영역1~3)의 부모 태그(div)에 position:relative를 적용한다.  

즐거운 WebGL h1 영역

공간을 차지하는 영역1,left:10px,height:100%

공간을 차지하는 영역2,left:250px

공간을 차지하는 영역3,left:450px

position태그의 속성

position:absolute를 적용한 div 하위태그에 position:relative를 적용한 상위 태그를 만들어주면 위처럼 부모좌표를 기준으로 삼아 하위태그들을 조작할 수 있다. position의 2가지 공식을 무시하고, 생각대로 상대좌표, 절대 좌표를 무리하게 설정하다보면 일그러진 레이아웃이 탄생한다.

3 overflow 속성

overflow는 부모-자손 position보다는 float속성과 밀접하게 연관돼 있다. 굳이 overflow와 position을 연관짓자면, 위의 예제에서 녹색 테두리(div 부모요소) 밖을 벗어난 영역을 모두 삭제하는 정도이다. div태그의 속성에 'overflow:hidden'을 설정하면, 부모 요소의 밖으로 튀어나간 자식 요소들은 모두 잘려 버린다. 

overflow부분은 '카드UI'에서 썸네일을 넣을 때 굉장히 민감한 부분이다. DB에서 불러온 썸네일 크기를 %로 줄여서 배치하다보면, 세로그립으로 촬영한 사진들은 가로부분의 공백이 발생한다. 이때는 overflow:hidden설정으로 튀어나간 이미지 부분을 모두 잘라버려야 하는데, 이때 웹 사이트가 아마추어 실험용 디자인처럼 보일 수 있다. 이럴 경우, 서버에서 불러온 이미지의 가로 픽셀값의 너비에 따라 세로그립이라면 overflow:hidden을 실행하고, 정상적인 이미지라면 %로 줄이는 방식을 적용해야 한다. 

그러나 float을 레이아웃에 사용하면서, overflow의 'hidden'은 반드시 필요한 속성이 되었다.

4 float 속성

float은 원래 이미지를 띄워서 정렬하는 목적으로 만들어진 속성이다. 하지만 float을 사용한 레이아웃이 늘어나면서 float으로 레이아웃을 설계하는 것 자체가 정석이 되었다. 아래 예제를 보자.

---

각 나라별 알파벳

가나다라마바사아자차카타파하히라가나가나카나ABCDEFGHIJKLMNOPQRSTU

---

이미지와 <p>태그의 경계가 뚜렷하게 구분되고 있다. 위의 상태에서 이미지에 float:left를 적용해보자.(float의 속성으로는 left,right만 알아도 상관없다. 거의 left,right만 사용) 

---

각 나라별 알파벳

가나다라마바사아자차카타파하히라가나가나카나ABCDEFGHIJKLMNOPQRSTU

---

img태그에 float:left를 적용하면, p태그의 글씨들이 옆에 붙는다. 그런데 문제가 있다. 가장 하위 태그라 할 수 있는 <hr>태그도 <img>태그 옆에 붙어버렸다; float을 사용하면, 하위태그들이 모두 붙어 버린다. 따라서 다음 공식을 유념해서 사용할 필요가 있다.

"자손태그에 float속성을 적용하려면, 자손태그의 부모태그에 'overflow:hidden'을 적용한다"

레이아웃을 만들때 이보다 더 중요한 공식은 없다. 간혹 화면의 크기에 따라 심각하게 일그러진 사이트들을 볼 수 있는데, 대부분 float의 상위 태그를 지정하지 않았거나 overflow:hidden을 적용하지 않은 경우가 많다. 위에서 수평선이 float의 영향을 받지 않도록 만들어보자. 

---

각 나라별 알파벳

가나다라마바사아자차카타파하히라가나가나카나ABCDEFGHIJKLMNOPQRSTU

---

<img>태그와 <p>태그2개를 <div style="overflow:hidden">태그로 감싸면, 하위 <hr>태그는 더 이상 float의 영향을 받지 않는다. 

레이아웃에 영향을 주는 4가지 요소(position,overflow,float,display)를 어느정도 습득했다면, 남은 것은 flex태그다. flex는 최근 해외쪽 CSS고수들이 권장하고 있는 방식이다. flex는 이후 기회가 되면 정리를 해보자.