[해피CGI][cgimall] 좌우 여백없이 박스정렬하는 방법

위와 같은 디자인 작업시 파란 박스 리스트에 float:left로 정렬을 시키고
오른쪽이나 왼쪽에 마진이나 패딩값을 주고, 마지막 또는 첫 박스에
해당 마진이나 패딩을 없애주는 방법을 주로 사용합니다.


<div class="box">

  <ul>

     <li></li>

     <li></li>

     <li></li>

     <li></li>

     <li></li> <== 보통 이단계에서class또는 style을 이용해 margin 또는 padding 값을 제거합니다.

  </ul>

</div>

하지만 개발을 통한 리스트 작업시에는 마지막박스를 체크할 방법이 없습니다.
이 방법을 간단하게 해결할 수 있는 방법은 -margin, -padding 입니다.

<style>

.box{width:540px;height:100px;padding:10px 0;background:pink;}

.box ul{width:560px;margin-left:-10px;overflow:hidden;}

.box ul li{float:left;width:100px;height:100px;margin-left:10px;background:red;}

</style>

위와 같이 li를 감싸는 url에 마진값을 더하고 대신 마이너스 margin값을 주면 됩니다.
이렇게 되면 양옆이 일정한 가이드라인을 기준으로 정렬되게 됩니다.

약간의 꼼수같지만 유용한 팁입니다.