티스토리, 메인 컨텐츠 영역 및 레이아웃 만들기 (html, css, js)

이제 사이드 메뉴와 본문 글이 보여지는 메인 컨텐츠 영역을 만들어 봅시다.

 

일단 화면 구성은 반응형 웹 방식으로 만들겁니다.

브라우저의 크기에 따라 3단 레이아웃 2단 레이아웃, 스택(?) 레이아웃으로 나눌려고합니다.

 

• 제일 큰 화면 (1024px 이상): 3단 레이아웃
• 조금 큰 화면 (768px ~ 1024px): 2단 레이아웃
• 중간 및 작은 화면 (768px 이하): 스택 레이아웃

기본 틀 구성

일단 좌, 우 사이드 메뉴를 위한 aside 영역과 본문이 들어갈 article 영역을 만듭니다.

 

<!-- main -->
<main role="main">
    <!-- main - left side menu -->
    <aside class="left_side">
        <section>
            side menu
        </section>
    </aside>

    <!-- main - article -->
    <article>
        test
    </article>

    <!-- main - right side menu -->
    <aside class="right_side">
        <section>
            side menu
        </section>
    </aside>
</main>

 

기본 틀 구성

위와 같이 영역 3개를 만듭니다.

 

CSS

이제 flex-box를 이용하여 레이아웃을 만들어봅니다.

 

왼쪽 사이드메뉴와 오른쪽 사이드 메뉴의 넓이는 고정 크기로 설정할 겁니다.

 

• 왼쪽 사이드 메뉴: 200px
• 오른쪽 사이드 메뉴: 320px

 

일단, 레이아웃이 원하는대로 꾸며지는지 확인하기 위해 임시로 색상을 입히도록 하겠습니다.

/* 틀을 잡기 위해 잠시 설정한 CSS */
/* 나중에 지울 CSS 코드 */
main {
    height: 1300px;
}
aside.left_side {
    background-color: pink;
}
article {
    background-color: yellow;
}
aside.right_side {
    background-color: green;
}

 

구조 CSS

웹 브라우저가 1024px 이하로 작아지면, 왼쪽 사이드메뉴를 display: none; 으로 안보이게 합니다.

/* main */
main {
    display: flex;
}
main aside.left_side {
    width: 200px;
}
main article {
    flex: 1;
}
main aside.right_side {
    width: 320px;
}
main aside,
main article {
    /* padding 값을 주면 가로 폭이 더 길어져, 가로 스크롤이 생기므로 */
    /* box-sizing을 border-box로 설정 */
    box-sizing: border-box;
    padding: 0.5em;
}

/* large */
@media screen and (max-width: 1024px) {
    /* main */
    main aside.left_side {
        /* 화면이 작아지므로, 2단 레이아웃으로 변경 */
        display: none;
    }
}

/* middle media */
@media screen and (max-width: 768px) {
    /* main */
    main {
        flex-direction: column;
    }
    main aside.right_side {
        width: 100%;
    }

}

일단 여기까지 만들어진 디자인을 확인해 봅시다.

 

큰 화면 (3단 레이아웃)

중간 화면 (2단 레이아웃)

모바일 화면 (스택 레이아웃)

 

색상 CSS

자, 그럼 임시로 색상을 입혀둔 내용을 지우고 다른 색상을 넣어봅시다. 깔끔한 색상이 좋으니 모두 흰색(#ffffff)로 설정하겠습니다.

 

/* white theme - main */
.th_white_theme aside,
.th_white_theme article {
    background-color: #ffffff;
}

 

레이아웃 구성 완료

 

 

다음 글에서는 왼쪽 사이드 메뉴에 대해 만들어보도록 하겠습니다.

 

관련 글

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리 헤더(Header) 만들기 (html, css, js)

티스토리 헤더(Header) 만들기 (html, css, js)

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리 네비게이션 바(Navigation Bar) 만들기 (html, css, js)

티스토리 네비게이션 바(Navigation Bar) 만들기 (html, css, js)