float 정렬에 이용된 트릭 사용 방법

float 속성을 이용한 배치와 배치에 사용된 트릭 방법

우리는 float 속성을 이용하여 내부(세부) 콘텐츠를 배치하는데 많이 사용하고 있습니다.

내부 콘텐츠의 배치를 좀 더 간단히 할 수 있는 방법에 대해 알아봅니다.

overflow: hidden을 이용한 트릭

일반적으로 가장 많이 쓰이는 콘텐츠 포맷은 아래와 같은 형태일 것입니다.

좌측 콘텐츠의 양은 일반적으로 적고, 우측 콘텐츠 양이 많은 포맷으로 구성되는 경우가 종종 있습니다.

이 포맷은 리스트 형태가 될 수도 있고 쇼핑몰의 썸네일과 썸네일의 디테일 내용 형태 등등.. 수없이 많은 타입으로 내용을 담는데 사용되는 디자인 형태라고 할 수 있습니다.

위 그림은 2개의 행만 가지고 있지만 만약 좀 더 많은 행을 가진 콘텐츠가 있으며 그 배치를 할 때 좀 더 쉽게 구현할 수 있는 방법에 대해 알아보도록 합니다.

마크업 구조는 아래와 같으며 반드시 이 구조로 해야하는 것은 아닙니다.

여기에 사용되는 트릭을 이해하는데 중점을 두시기 바랍니다.

html

<div class="clearfix">
    <h1>Step 1 계좌개설Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
    <ul>
        <li><strong>영업점계좌개설</strong> : 평일 09:00~16:00</li>
        <li><strong>은행계좌개설</strong> : 평일 09:00~16:00 (은행별 상이)</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aut, consequatur </li>
    </ul>
</div>
<div class="clearfix">
    <h1>Step 2 ID등록</h1>
    <ul>
        <li><strong>등록화면</strong>
            <ul>
                <li>홈페이지: 고객센터&gt;신규고객&gt;정회원 아이디등록/관리</li>
                <li>HTS: 로그인화면 하단&gt;신규ID등록</li>
                <li>MTS: 로그인화면 하단&gt;ID등록</li>
            </ul></li>
        <li><strong>등록시한</strong>
            <ul>
                <li>영업점방문개설(5영업일이내)</li>
                <li>은행방문개설(기한없음)</li>
            </ul></li>
        <li class="none"><span class="point">*</span> 5일이 지나면 센터를
            재방문(신분증지참)하셔서 시한연장을 하셔야 합니다.</li>
    </ul>
</div>

조금 번잡한 마크업일지는 모르지만 일단 이 코드상에서는 <h1> 요소가 좌측 정렬, <ul> 요소가 우측 정렬하여 위 그림과 같은 형태를 취하려고 합니다.

만약 여러분이 CSS를 작성한다면 어떻게 하시겠습니까?

가장 많이 사용되는 방법이 좌,우측에 float:left(혹, 우측은 float:right)를 이용하여 배치를 하고 각각의 너비와 높이를 지정하려고 할 것이고,  float을 해제하기 위한clearfix 방법도 사용할 것입니다.

하지만 지금 사용하려고 하는 방법은 단 한쪽(좌측)에만 float 속성을 지정함으로써 배치를 하고자 합니다.

css

.clearfix {
  font-size:14px;
  padding: 20px;
}

.clearfix:nth-child(even) {
  background: #a1a1a1;
}

h1 {
  float: left;
  width: 30%;
  background-color: #ddd;
}

위 코드에서는 <h1> 요소에만 float: left;와 너비만 지정했습니다. (Bg CSS는 행(row)을 구분짓기 위해 사용됨)

이렇게 CSS를 작성하게 되면 오른쪽 콘텐츠의 양이 많을 경우 좌측으로 부유(흐름)하게 되어 레이아웃이 아래 그림과 같이 틀어질 것이 분명합니다.

이제 트릭을 사용하기 위해 우측요소인 <ul>요소에 overflow: hidden; 을 지정하도록 합니다.

css

ul {
  overflow: hidden;  /* 플롯 속성을 해제함으로써 높이값을 가지게 된다 */
}

위와 같이 CSS를 작성하면 우측의 배치가 알맞게 정렬되는 것을 확인하실 수 있습니다.

가만히 생각해 보면 overflow: hidden; 이 트릭이 아니라 당연한 걸지도 모릅니다. 

플롯을 해제하는 clearfix 방법 중의 하나인 부모요소에 overflow: hidden; 을 설정하는 방식을 생각한다면 거의 동일한 이치라고 볼 수 있습니다.

자식요소들의 높이를 부모가 가지지 못하여 생기는 현상을 부모에게 높이를 올바르게 가지도록 해주기 위해 hidden 값을 지정하곤 하는데 이 방식이 위에 사용된 방식과 유사하다고 할 수 있습니다.

이런 이유로 ul 요소가 플롯 해제는 물론이고 높이값을 제대로 인식하게 됩니다.

하여 overflow: hidden 만으로 코드를 간결하게 작성할 수 있게 됩니다.

위에서 사용된 예제입니다.

See the Pen float 트릭 사용하기 by jaeheekim (@jaehee) on CodePen.

clear:both 는 선택사항으로 사용 가능합니다.

한 가지 예시를 들었을 뿐 이와 같은 방법의 원리를 이해하는 것이 무엇보다 중요합니다. 

이를 활용하여 또 다른 방법을 구상해 볼 수 있을 것입니다.

Jaehee's WebClub