'HTML' 과 'CSS' 를 이용하여 레이아웃을 연습하세요.

margin: 0 auto 를 사용하여 중앙 정렬.
width 속성 필수!

width: 300px;
margin: 0 auto;

float: left 로 수평 정렬하고 중간 여백을 줄 경우,
:last-child 를 사용하여 마지막 요소(element)의 우측 여백(margin) 제거.

.container li {
    margin-right: 10px;
}
.container li:last-child {
    margin-right: 0;
}

.inner 를 사용하여 섹션 콘텐츠의 중앙 정렬.

<div class="inner"></div>

inner 요소 내부에 콘텐츠 추가하기

float: left 와 float: right 를 동시 사용하여 요소들을 양쪽으로 정렬.

.logo {
    float: left;
}
.menu {
    float: right;
}

float의 값이 존재하는 요소에서는 '마진 병합' 현상이 발생하지 않습니다.

.logo {
    margin-top: 15px;
    float: left;
}
.menu {
    margin-top: 20px;
    float: right;
}

'iRiver' 페이지(UI) 레이아웃 연습.

'Logo, Sub, Main' 의 각 기능을 분리하고 Markup 하는 순서(HTML 계층구조)를 정리하세요.

<ul class="sub_menu"></ul>

<div class="logo"></div>

<ul class="main_menu"></ul>

float 속성을 사용 후 바로 clearfix 해제하세요.

<ul class="sub_menu clearfix"></ul>

inner 요소 내부에 콘텐츠를 추가하여 중앙 정렬하세요.

<div class="inner"></div>

float 으로 정렬하고 position 으로 배치하세요.

.quick_menu li {
    float: left;
    margin-right: 25px;
}

.family_site {
    position: absolute;
    top: 15px;
    right: 0;
}