Layout 구성하기 - html 배우기

Layout

의미있는 마크업

<header>

• 소개 및 탐색에 도움을 주는 콘텐츠
• 제목, 로고, 검색 폼, 작성자 이름 등

<nav>

• 다른 페이지 링크를 제공하는 콘텐츠
• 메뉴, 목차, 색인 등

<main>

• 문서의 핵심 콘텐츠
• 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결된 콘텐츠

<section>

• 문서의 일반적인 구분
• 챕터, 장, 절, 헤딩 태그로 구분되는 콘텐츠 등
• <section>은 보통 제목(heading)을 가진다.

<article>

• 문서, 페이지, 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
• 블로그 글, 뉴스 기사, 댓글, 포럼 글, 사용자가 작성한 기사 등
• <article>은 보통 제목(heading)을 가진다.

<aside>

• 문서의 주요 내용과 간접적으로만 연관된 부분
• 사이드바, 광고, 즐겨찾기, 링크 등

<footer>

• 작성자, 저작권 정보, 관련 문서 등
• 문서나 섹션의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.

레이아웃 구성

<div class="wrap">
    <header>
        <h1>Logo</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Section 1</h2>
            <p>Section 1 content</p>
        </section>
        <section>
            <h2>Section 2</h2>
            <p>Section 2 content</p>
        </section>
    </main>

    <footer>
        <p>Footer content</p>
    </footer>
</div>

웹디자인기능사 just쇼핑몰(A-1) 레이아웃

<div class="wrap">
    <header>
        <h1>
            <a href="#">JUST쇼핑몰</a>
        </h1>
        <nav>
            <ul class="depth1">
                <li>
                    <a href="#">탑</a>
                    <ul>
                        <li><a href="#">블라우스</a></li>
                        <li><a href="#">티</a></li>
                        <li><a href="#">셔츠</a></li>
                        <li><a href="#">니트</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">아우터</a>
                    <ul>
                        <li><a href="#">자켓</a></li>
                        <li><a href="#">코트</a></li>
                        <li><a href="#">가디건</a></li>
                        <li><a href="#">머플러</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">팬츠</a>
                    <ul>
                        <li><a href="#">청바지</a></li>
                        <li><a href="#">짧은바지</a></li>
                        <li><a href="#">긴바지</a></li>
                        <li><a href="#">레깅스</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">악세서리</a>
                    <ul>
                        <li><a href="#">귀고리</a></li>
                        <li><a href="#">목걸이</a></li>
                        <li><a href="#">반지</a></li>
                        <li><a href="#">팔찌</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <div class="slide">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/banner1.png" alt="이미지 설명" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/banner2.png" alt="이미지 설명" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/banner3.png" alt="이미지 설명" />
                </a>
            </li>
        </ul>
    </div>
    <main>
        <!-- 공지사항 섹션 -->
        <section>
            <h2>공지사항</h2>
            <ul>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet.</a>
                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet.</a>
                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet.</a>
                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet.</a>
                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet.</a>
                </li>
            </ul>
        </section>
        <!-- 배너 섹션 -->
        <section>
            <h2>배너</h2>
            <a href="#">
                <img src="./images/banner1.png" alt="배너 내용" />
            </a>
        </section>
        <!-- 바로가기 섹션 -->
        <section>
            <h2>바로가기</h2>
            <ul>
                <li><a href="#">바로가기1</a></li>
                <li><a href="#">바로가기2</a></li>
                <li><a href="#">바로가기3</a></li>
                <li><a href="#">바로가기4</a></li>
            </ul>
        </section>
    </main>
    <footer>
        <div class="logo">
            <a href="#">JUST쇼핑몰</a>
        </div>
        <div class="copyright">@copyright</div>
        <div class="sns">
            <a href="#">인스타</a>
            <a href="#">페이스북</a>
            <a href="#">유튜브</a>
        </div>
    </footer>
</div>

웹디자인기능사 리빙샵아울렛(D-4) 레이아웃

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>리빙샵아울렛</title>
    </head>
    <body>
        <div class="wrap">
            <header>
                <h1>
                    <a href="#">리빙샵아울렛</a>
                </h1>
                <nav>
                    <ul class="depth1">
                        <li>
                            <a href="#">인기모음전</a>
                            <ul>
                                <li><a href="#">수저모음</a></li>
                                <li><a href="#">도마모음</a></li>
                                <li><a href="#">그릇모음</a></li>
                                <li><a href="#">접시모음</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">베스트상품</a>
                            <ul>
                                <li><a href="#">주방용품</a></li>
                                <li><a href="#">설비제품</a></li>
                                <li><a href="#">인덕션제품</a></li>
                                <li><a href="#">실리콘제품</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">업종별샵</a>
                            <ul>
                                <li><a href="#">한식기물</a></li>
                                <li><a href="#">양식기물</a></li>
                                <li><a href="#">일식기물</a></li>
                                <li><a href="#">중식기물</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">인덕션용품</a>
                            <ul>
                                <li><a href="#">냄비/솥</a></li>
                                <li><a href="#">후라이팬/주물</a></li>
                                <li><a href="#">인덕션렌지</a></li>
                                <li><a href="#">기타제품</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </header>
            <div class="slide">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/banner1.png" alt="이미지 설명" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/banner2.png" alt="이미지 설명" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/banner3.png" alt="이미지 설명" />
                        </a>
                    </li>
                </ul>
            </div>
            <main>
                <!-- 바로가기 섹션 -->
                <section>
                    <h2>바로가기</h2>
                    <ul>
                        <li><a href="#">바로가기1</a></li>
                        <li><a href="#">바로가기2</a></li>
                        <li><a href="#">바로가기3</a></li>
                        <li><a href="#">바로가기4</a></li>
                        <li><a href="#">바로가기5</a></li>
                        <li><a href="#">바로가기6</a></li>
                        <li><a href="#">바로가기7</a></li>
                    </ul>
                </section>
                <!-- 공지사항 섹션 -->
                <section>
                    <h2>공지사항</h2>
                    <ul>
                        <li>
                            <a href="#">Lorem ipsum dolor sit amet. <span>2023.11.27</span></a>
                        </li>
                        <li>
                            <a href="#">Lorem ipsum dolor sit amet. <span>2023.11.27</span></a>
                        </li>
                        <li>
                            <a href="#">Lorem ipsum dolor sit amet. <span>2023.11.27</span></a>
                        </li>
                        <li>
                            <a href="#">Lorem ipsum dolor sit amet. <span>2023.11.27</span></a>
                        </li>
                        <li>
                            <a href="#">Lorem ipsum dolor sit amet. <span>2023.11.27</span></a>
                        </li>
                    </ul>
                </section>
                <!-- 갤러리 섹션 -->
                <section>
                    <h2>갤러리</h2>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./images/thumb1.jpg" alt="겨울 내내 촉촉 이번에만 2+1" />
                                <p>겨울 내내 촉촉 이번에만 2+1</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/thumb1.jpg" alt="겨울 내내 촉촉 이번에만 2+1" />
                                <p>겨울 내내 촉촉 이번에만 2+1</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/thumb1.jpg" alt="겨울 내내 촉촉 이번에만 2+1" />
                                <p>겨울 내내 촉촉 이번에만 2+1</p>
                            </a>
                        </li>
                    </ul>
                </section>
            </main>
            <footer>
                <div class="col">
                    <div class="ft-menu">
                        <h2>footer menu</h2>
                        <a href="#">ftMenu1</a>
                        <a href="#">ftMenu2</a>
                        <a href="#">ftMenu3</a>
                        <a href="#">ftMenu4</a>
                        <a href="#">ftMenu5</a>
                        <a href="#">ftMenu6</a>
                    </div>
                    <div class="copyright">@copyright</div>
                </div>
                <div class="sns">
                    <h2>family site</h2>
                    <a href="#">인스타</a>
                    <a href="#">페이스북</a>
                    <a href="#">유튜브</a>
                </div>
            </footer>
        </div>
    </body>
</html>

레이아웃 스타일링

display: flex

https://www.w3schools.com/css/css3_flexbox.asp

• flex는 레이아웃을 위해 만들어진 속성으로 유연한 반응형 레이아웃 구성을 쉽게 할 수 있도록 도와준다.
• container(부모)에 적용하는 속성과 item(자식)에 적용하는 속성이 다르다.

display: grid

https://www.w3schools.com/css/css_grid.asp

• grid는 레이아웃을 위해 만들어진 속성으로 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와준다.
• container(부모)에 적용하는 속성과 item(자식)에 적용하는 속성이 다르다.

position

https://www.w3schools.com/css/css_positioning.asp

• position은 위치를 지정해 레이아웃을 구성하기 위한 속성이다.

float

https://www.w3schools.com/css/css_float.asp

• float은 레이아웃을 위해 만들어진 속성은 아니지만 flex와 grid가 나오기 전까지는 레이아웃을 구성하기 위해 사용되었다.
• float은 이미지를 텍스트와 같이 띄워서 텍스트가 흐르게 하는 것이 목적이다.