홍홍홍... 제가 만들어드리죠...
<!-- inline-block으로 정렬하기 -->
<ul class="inline">
<li>채치수 <br> 주장 </li>
<li>권준호</li>
<li>정대만</li>
<li>송태섭</li>
<li>서태웅</li>
<li>강백호</li>
</ul>
<!-- inline-block에 여백없애기 -->
<ul class="inline font">
<li>이정환 <br> 주장 </li>
<li>전호장</li>
<li>신준섭</li>
<li>윤대협</li>
<li>황태산</li>
<li>김수겸 <br> 선수 겸 감독 </li>
</ul>
<!-- float로 정렬하기 -->
<ul class="float">
<li>이명헌 <br> 주장 </li>
<li>최동오</li>
<li>김낙수</li>
<li>신현철</li>
<li>정우성</li>
<li>신현필</li>
</ul>기본 HTML 구조
첫 번째 ul은 inline-block로 정렬하기
두 번째 ul은 inline-block로 정렬 후 요소들간의 여백없애기
세 번째 ul은 float로 정렬하는 방식을 사용할 것이다!
ul > li {
list-style: none;
width: 33.3333%;
margin: 0 auto 10px;
padding: 10px;
font-size: 1rem;
background: #f0f0f0;
vertical-align: top;
}
#contsWrap ul li:nth-child(2n) {
background: #ddd;
}기본 공통 CSS
vertical 어쩌구 이거는 이따 설명하겠습니당😉
2n에 배경색 차이는 요소별 차이점을 주기 위해 사용~
/* 정렬방식이 inline-block 일 때 */
ul.inline li {
display: inline-block;
}
/* inline-block에 여백 없애기 */
ul.font {
font-size: 0;
}
/* 좌->우로 정렬할 때 */
ul.float li {
float: left;
}각 리스트별로 위 속성값을 주었다.
결과...🖥
undefined
차이점을 보자면
1번 리스트는 정렬이 되었으나 각 요소별로 1/3의 너비를 주었음에도 불구하고 여백이 생겨 공간 분배가 되지 않는 문제가 발생한다.
2번 리스트의 경우 위 문제를 해결하기 위해 font-size: 0;을 주었다. 그리고 각 영역별 높이를 맞추기 위해 vertical-align: top;을 사용하여 높이를 맞춰준다.
3번 리스트의 경우 float: left로 정렬을 주었지만 각 영역별로 높이가 맞지않으면 중구난방으로 정렬이 된다. 이 경우 height값을 지정하면 해결되지만 어느 요소에 높이가 어떻게 될지 모르는 경우가 있기 때문에 좋은 방법은 아니다.