컨테이너 및 기본 박스 모델 설정

웹 페이지의 전체적인 폭을 제어하고 콘텐츠 영역을 정의하는 기본 컨테이너 스타일을 구성합니다. 고정된 너비를 설정하고 브라우저 기본 스타일을 초기화하여 일관된 레이아웃을 유지합니다.

.layout-wrapper {
    font-size: 16px;
    box-sizing: border-box;
    overflow: hidden;
    width: 1024px;
    margin: 0 auto;
    float: left;
}

네비게이션 헤더 스타일링

상단 내비게이션 바의 높이, 배경색, 텍스트 정렬을 설정하고, 상대 위치(relative)를 사용하여 내부 요소의 배치 기준점을 마련합니다. 패딩을 조절하여 시각적인 균형을 맞춥니다.

.main-nav {
    height: 60px;
    line-height: 60px;
    background-color: #f0f4f8;
    color: #2c3e50;
    text-align: center;
    position: relative;
    padding-left: 30px;
    padding-right: 80px;
}

요소 배치 전략: 플로트와 절대 위치

아이템을 나열할 때는 float를 사용하여 너비를 비율로 설정하거나, 특정 영역(예: 우측 상단)에 고정해야 할 때는 position: absolute를 활용합니다. 부모 요소에 position: relative가 지정된 경우, 자식 요소는 이를 기준으로 절대 좌표를 갖게 됩니다.

/* 방법 1: 유동적인 너비 비율 할당 */
.nav-item {
    float: left;
    width: 50%; /* 부모 컨테이너 너비의 50% */
    position: center;
    white-space: normal;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e0;
}

/* 방법 2: 우측 절대 위치 배치 */
.action-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    text-align: right;
}

리스트 스타일 초기화

순서 없는 리스트(ul)나 순서 있는 리스트(ol)의 기본 불릿 점이나 숫자를 제거하여 깔끔한 메뉴나 레이아웃을 구현합니다.

ul, ol {
    list-style-type: none;
}

전역 마진과 패딩 리셋

브라우저마다 다르게 적용되는 기본 여백(margin)과 패딩(padding) 값을 0으로 초기화하여 크로스 브라우징 이슈를 방지합니다.

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, fieldset, input, textarea, button {
    margin: 0;
    padding: 0;
}

복합 선택자를 활용한 페이지네이션 디자인

페이지네이션 컴포넌트에서 복합 선택자(Intersection Selector)를 사용하여 특정 클래스가 결합된 요소만 스타일을 적용합니다. 예를 들어, .pagination 내부의 .active 클래스를 가진 요소는 다른 링크와 구별되는 스타일을 적용받습니다.

먼저 HTML 구조는 다음과 같이 작성합니다.

<div class="pagination">
    <a href="/page/prev" class="control-link prev">이전</a>
    <!-- 페이지 반복 출력 -->
    {% for num in page_range %}
        {% if num == current_page %}
            <span class="page-num active">{{ num }}</span>
        {% else %}
            <a href="/page/{{ num }}" class="page-num">{{ num }}</a>
        {% endif %}
    {% endfor %}
    <a href="/page/next" class="control-link next">다음</a>
</div>

다음은 CSS를 통해 선택자의 결합을 활용한 스타일링입니다.

.pagination {
    padding: 20px 0;
    font-size: 14px;
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 36px;
    text-align: center;
}

/* 복합 선택자: .pagination 내부의 .page-num 중 .active 클래스를 가진 요소 */
.pagination .page-num.active {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
}

.pagination .page-num, .pagination a.control-link {
    display: inline-block;
    border: 1px solid #cbd5e0;
    padding: 0 12px;
    height: 36px;
    min-width: 36px;
    text-decoration: none;
    margin: 0 4px;
    vertical-align: middle;
    color: #2d3748;
    transition: all 0.2s;
}

/* 마우스 오버 시 효과 및 활성화된 페이지 스타일 */
.pagination .page-num.active, .pagination .page-num:hover {
    background-color: #3182ce;
    color: #ffffff;
    border-color: #3182ce;
}