[CSS] Chapter 11. 레이아웃(Layout) 구성: CSS 위치속성

1. 개요

웹 사이트는 컴퓨터의 발전과 모니터 해상도의 변화로 발전해왔다.

과거 인터넷은 정보 교환을 목적으로 하였고, 모니터의 해상도도 높지 않아 정보 전달만으로 기능이 충분하였다.

하지만 기술의 발전에 따라 사용자의 편의성과 화면분할의 중요성이 대두되었다.

사용자는 인터페이스와 레이아웃에 따라 심미적으로 충족하는 상품에 소비하는 경향을 보인다.

이런 디자인 요소가 소비에 영향을 미치는 것은 많은 연구와 통계로 증명된 사항이다. 

 

즉, 웹 사이트 또한 기술의 발전과 함께 소비 시장에서 살아남기 위해 자연스럽게 레이아웃, 디자인 요소가 발전한 것이다.

이러한 레이아웃 요소를 만들고 구성하는 기능이 바로 플로팅이다.

다만 플로팅은 사용이 어렵고 여러 이슈가 있어 능숙하게 사용하기가 어렵다. 

 

2. 레이아웃 화면 구성: float: value

float는 ‘공중에 뜨다’라는 뜻으로 구성 요소를 화면의 앞쪽으로 띄워준다.

한마디로 block 속성을 상실하는 것이며, 이에 따라 화면 구성 요소에 변화를 준다. 

 

화면의 float는 left 혹은 right 로 속성을 부여할 수 있다.

기본적으로 지정한 위치에 따라 화면에 배치된다.

float 속성이 생기면 기존 div에 벗어나 화면 앞 쪽으로 구성되며, float를 2중으로 사용하여도 동일하게 안쪽 요소가 더 앞으로 나오게 된다.

즉, 평면인 웹 사이트에 구조적 깊이감이 생긴다는 것이다.

 

<float를 적용한 속성>

<화면1: main 및 side에 float를 제거한 영역>

 

<화면2: float를 적용한 화면> 

 

float 속성을 주면 block 속성을 상실하기 때문에 위와 같이 footer 항목이 말려 올라온다.

정확히는 main과 side가 앞으로 떠오른 것이다.

float는 자신이 있던 위치에서 공중으로 뜨는 동작이다.

다르게 말하자면 float가 없는 div 영역을 먼저 그리고, 이후에 float 속성이 들어간 화면을 그리는 식이다. 

 

grey 색상이 보이지 않는 이유는 실제 div로 구성한 1차 구성 요소가 header와 footer의 div로 그려지고(wrap의 높이 값이 없기 때문에),  이 크기는 정확히 wrap의 크기와 일치하여 회색이 보이지 않는 것이다. 

 

 

쉽게 말해 위의 그림과 같이 float를 사용한 main과 side는 앞으로 나온 형태로 표현된되고, 해당 항목이 앞으로 나오면서 header와 footer가 뒤에 배치된 효과를 가진다.

 

또한 float는 가장 처음 나온 float를 기준으로 다른 float의 위치가 결정되는데, 상단에 배치되는 float의 모양이 가장 처음 객체를 중심으로 일치하게 배치되는 것을 확인할 수 있다.

이러한 특성에 따라 float 속성 하단으로 구성 요소를 정렬하는 것이 힘들다. 

 

3. float 속성을 제거하는 방법: clear:both;

footer는 div의 block 속성을 잃은 main과 side에 의해 위로 말려올라가고, float를 가진 항목이 앞으로 표시된다.

이럴 경우, footer에서 표시되는 항목 뒤에 배치되어 실제 데이터 전달 및 구성이 어려워진다. 

 

이에 사용할 수 있는 방법이 해당 float 속성에 대해서 영향을 받지 않겠다는 명령어를 지정하는 것이다.

clear: both로 지정이 가능하고 value 값에 따라 영향을 받지 않는 영역을 별도 설정할 수 있다

 

4. 3단 레이아웃

다수의 float으로 레이아웃을 구성한다면 위에서 아래로, 왼쪽 혹은 오른쪽부터 그림이 그려진다.

float로 떠오른 구성 요소는 실제 margin 값이 없는 ‘떠오른 물체’이기 때문에 붙어서 정렬이 된다.  

 

<div id="wrap">     <div id="header"></div>     <div id="contents1"></div>     <div id="contents2"></div>     <div id="contents3"></div>     <div id="footer"></div> </div>

header외 에 3개의 콘텐츠를 구성하며, 화면이 3분할되어 표시된다.  본래 float로 떠오른 항목은 margin 설정이 안되어 있고 지정 또한 불가능하다. 다만 최근 html5에서는 해당 구성 요소에 margin 값을 줘서 각 영역 사이에 간격을 조정할 수 있다.

 

5. grid layout

<격자형 구조 코드>

 

 

격자형(grid) 레이아웃은 콘텐츠를 위와 같이 테이블 모양으로 구성하는 것을 말한다.

일반적으로 div로 나눈 영역 사이에 ul 태그를 사용하여 만드는데, li가 하나의 영역으로 표현된다.

이러한 격자형 레이아웃은 모바일 버전의 반응 및 구성에 유리하고, 웹 페이지를 이와 같이 구성하면 모바일 버전에서 별도의 지정 없이도 레이아웃이 자연스럽게 구성된다. 

 

다만 각 영역이 li로 구성되어 margin 값을 주면 양쪽으로 margin 값이 구현되어 헤더가 삐져나온 것처럼 구성될 것이다.

이를 해결하기 위해 선택자에 함수를 적용하여 선택하고 효과를 주거나 혹은 over하는 영역을 보이지 않게 지정해야 한다. 

 

6. 배경에 설정한 모양이 표시되지 않을 때 해결 방법

 

#inner
{
    background: grey;
}
#left
{
    height:150px; width:200px; 
    background-color: red; 
    float:left;
}
#right
{
    height:100px; width:200px; 
    background-color:green;
    float:right;
}

위의 코드에 따라 본다면 inner에 위치한 grey 색상이 구현되어야 할 것이지만, 실제로 해당 태그 안에 포함된 left와 right가 float 속성을 가지면서 해당 div의 상위인 inner가 block 속성을 잃어버린다. 
즉, float로 포함된 요소가 화면에 앞에 배치되면서 같은 선상에 포함된 요소 값에 따라서 너비가 구현되는 block 속성이 발휘되지 않는것이다. 이를 해결할 수 있는 방법은 여러가지가 있으나 대표적으로 2가지를 사용한다. 

 

6.1. 새로운 div 생성 및 해당 div에 clear:both 

float로 block속성을 잃어버린 상위 요소 중 가장 마지막에 새로운 div를 그려서 해당 div에 clear:both;를 줄 수 있다.

이 경우, 해당 div 자체에 모양이 없어도 clear:both에 따라 float 속성과 구별되고, 이 구별되는 데이터가 상위 요소에서는 분명히 존재하는 것으로 인식되어, 누락되는 상위 요소의 영역이 표시된다.  

 

6.2. 클리어픽스: #id:after{content:””; display:block; clear:both;}

외국 개발자가 html의 레이아웃 구성에 대해서 연구하고 구축한 방법으로, 정식 기능은 아니지만 존경의 의미를 담아 해당 개발자가 지정한 이름으로 지칭한다.

배경에 위치해야할 div가 float에 의해 block 기능이 작동하지 않는다면 div에 포함한 배경이 표시되지 않는다.

이에, clear:both;를 기입하여 해당 div에 block을 주려고 하여도 스크립트를 통해 그려지는 화면에서 새로운 div 태그를 삽입하는 것 자체가 불가능할 수 있다.

 

클리어픽스는 해당 배경 혹은 배경 이미지를 가진 속성 다음에 일정 글자를 추가하여 화면을 구현하는 것인데, 선택자로 #id:after{}를 사용한다.

해당 선택자는 id 뒤에 데이터를 추가한다는 명령어로, 해당 속성 안에 content:””; display:block; clear:both;를 추가한다.

이로써 아무 콘텐츠도 없지만 화면(display)에 block 값을 표현하면서 clear:both; 속성을 가진 데이터가 상위 div 마지막에 추가되는 것이다.

원리 자체는 6.1 에서 확인한 것과 유사하지만, 태그를 추가하지 않고 display로 block 값을 설정하는 점, 스크립트에 영향을 받지않는 css 속성인 점에서 자주 사용하는 기법이다. 

 

6.3. margin:-n overflow:hidden;

상위에 포함된 div 태그를 생성하여 margin 값을 마이너스로 주고 넘치는 항목을 가린다면 상위 태그는 block을 가지지만 실제로 표시되는 다른 모양을 가진 div가 보이지 않게된다.

사용할 일이 거의 없을 것이나, div와 float의 동작 원리를 이해하면 이러한 기법도 가능하다.

 

 

7. 레이아웃 구성시, 요소의 위치를 지정: position

position: 속성( absolute; 등)
left: npx (혹은 right: npx)
top: npx (혹은 bottom: npx)

 

position 은 속성을 가진 태그의 위치를 지정하는 역할을 한다. 

position 속성을 이용하면 레이아웃을 구성하는 요소를 원하는 위치에 표기할 수 있다는 장점을 가지고 있다.

JavaScript와 결합하면 드래그에 따라 일부 요소가 보이게 하거나, 페이지를 눌렀을 때 화면 하단에 스토어나 '연결'등으로 요소 객체를 지정하는 것도 가능하다. 

position의 속성에는 static, relative, fixed, absolute 가 있다.

 

7.1. position: static (정적 위치)

static은 정적 위치를 지정하는 것으로 left, top 등 방향을 지정하는 속성의 영향을 받지 않는다. 

포지션을 별도로 지정하지 않은 요소는 모두 static 속성을 default로 가지고 있다.

 

7.2. position: relative (상대 위치)

relative는 해당 요소가 정적 위치 지정 방식일 때의 위치를 기준으로 상대적으로 위치를 지정하는 방식이다.

쉽게 말해, 자신이 정적인 상태일때 가지고 있던 위치 값을 (0, 0) 으로 하여 right, top은 양수, left, bottom은 음수로 이e동한다.

7.3. position: fixed (고정 위치)

fixed는 뷰포트(view port)에 상대적으로 위치를 지정하는 속성이다.

뷰포트란 사용자가 보고있는 화면을 말하는데, fixed를 이용하면 해당 뷰포트에서 몇 px에 해당 요소를 나타낼지 지정할 수 있다.

뷰포트는 모바일과 PC가 상이하여, 사용자 화면을 기준으로 하는 점에서 차이가 발생한다. 

 

 

 

7.4. position: absolute (절대 위치)

absolute 속성은 위치가 설정된 바로 상위의 조상(ancestor) 요소를 기준으로 위치를 지정한다.

absolute 속성을 지정하면 화면이 어떻게 바뀌어도 위치가 변하지 않는다.

 

위치의 절대값이기 때문에 사용자의 기기에 따라 위치가 다르게 표현된다.

absolute 속성은 스크롤에도 영향을 받고, 화면이 작아지면 content가 깨져보이기도 한다.

특정 사이트에 들어가면 '상담하기' 등으로 표시되는 것이 absolute 속성을 가지고 있을 가능성이 높다. 

 

해당 속성으로 요소를 화면 밖으로 배치하기도 한다. 이는 개발자 입력(input) 정보를 지정할 때 사용한다. 

 

7.5. z-index 속성

position으로 위치가 지정된 요소에 z-index 속성을 주면 화면 구성에서 쌓아진 것 처럼 모양을 구성할 수 있다. 

이 속성은 스택(stack)을 정하여 동일한 스택은 같은 선상에 있고, 높은 스택은 수치가 낮은 스택보다 위에 있는 것처럼 표현한다. 

스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치한다.

 

8. div 중 가장 상위 항목에 높이를 안주는 이유

가장 바깥에 위치한 div에는 높이값을 지정하지 않는데, 이는 사용자가 표시할 콘텐츠 영역에 따라 스크롤하는 길이가 실제로 달라지기 때문이다.

값을 설정하면 초과하면 일부 정보가 누락되고, 미달할시 배경만 보이는 효과가 생긴다.

때문에 애초에 가장 바깥 div는 길이를 설정하지 않는다.