미디어쿼리 실습

nabong·2021년 7월 12일

CSS 대구AI스쿨 미디어쿼리 실습

TIL / WEB-Beginner

목록 보기

11/53

📌학습 내용

📖 메뉴 버튼 실습

X축 정렬된 메뉴 버튼을 모바일 버전에서 Y축 정렬되게 하기

• 기본 PC 버전 세팅

        .media-menu {
            list-style: none;
            margin: 0;
            padding: 0;

            display: flex;
            justify-content: space-between;
            align-items: center;

            width: 700px;
            background-color: black;
        }

        .media-menu a {
            color: black;
            text-decoration: none;
        }

        .media-menu li {
            width: 150px;
            background-color: yellow;
            border: solid 5px red;
            padding: 5px 15px;
            text-align: center;
        }

• 미디어쿼리 적용하기

        @media (min-width: 320px) and (max-width: 767px) {
            .media-menu {
                flex-direction: column;
                width: 190px;
                align-items: flex-start;
            }

            .media-menu li {
                margin-bottom: 10px;
            }

            .media-menu li:last-child {
                margin-bottom: 0;
            }
        }

📖 HELBAK `header`영역 실습

• 특징
— PC와 모바일에서 header 레이아웃이 다름
— PC 버전에서는 header가 고정되어 있음

• header 기본 적용
📎html

        <header class="intro">
            <h1>Logo</h1>
            <nav>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </nav>
        </header>

        <main role="main"> <!-- 익스플로러 호환을 위해 role="main" 꼭 -->
            <h1>Hello World</h1>
        </main>

📎CSS

        .intro {
            width: 100%;
            height: 80px;
            background-color: #ffffff;
        }

        .intro h1 {
            width: 50%;
            height: 80px;
            background-color: black;
        }

        .intro nav {
            width: 50%;	
            height: 80px;
            background-color: yellow;
        }

        .intro nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        main {
            width: 100%;
            height: 2000px;
            background-color: lightgray;
        }

• li x축 정렬하여 각각 색 바꿔주기

        .intro nav ul {
            display: flex;
        }

        .intro nav ul li {
            width: 33.3333%;
            height: 80px;
        }

        .intro nav ul li:nth-child(1) {
            background-color: lightpink;
        }

        .intro nav ul li:nth-child(2) {
            background-color: skyblue;
        }

        .intro nav ul li:nth-child(3) {
            background-color: yellowgreen;
        }

• LOGO 영역과 메뉴 영역 분리하기

        .intro {
            display: flex;
        }

• header 고정하기

        .intro {
            position: fixed;
        }

        main {
            padding-top: 80px;  
            /*3차원인 .intro 뒤로 2차원 main이 숨겨지기 때문에 padding 적용*/
        }

• 모바일 버전 작업하기

        @media (min-width: 320px) and (max-width: 767px) {
            .intro {
                flex-direction: column;
                height: 160px;
            }

            .intro h1 {
                width: 100%;
            }

            .intro nav {
                width: 100%;
            }
        }

• 모바일 버전에서 header 고정 풀기

        @media (min-width: 320px) and (max-width: 767px) {
            .intro {
                position: static;
            }

            main {
                padding-top: 0;
            }

📖 미디어쿼리 레이아웃 변경 실습

• PC버전: 이미지 레이아웃 3x2

📎html

        <div class="container">
            <div class="column">
                <img src="https://via.placeholder.com/250x150">
                <div class="image-info">
                    <h2>Title</h2>
                </div>
            </div>
        </div>

📎CSS

        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            width: 1140px;
            margin: 0 auto;
            background-color: lightpink;
        }

        .column {
            width: 355px;
            background-color: white;
            border: solid 2px red;
            margin-bottom: 10px;
        }

        .column:nth-child(4),
        .column:nth-child(5),
        .column:nth-child(6) {
            margin-bottom: 0;
        }

        .column img {
            width: 100%;
            vertical-align: middle; /*img의 기본 마진을 없애줌*/
        }

• 텍스트 영역에 디자인 적용하기

        .image-info {
            padding: 20px 0;
            text-align: center;
        }

        .image-info h2 {
            margin: 0;
        }

• 미디어쿼리 - 태블릿 버전 이미지 레이아웃 2x3

        @media (min-width: 540px) and (max-width: 720px) {
            .container {
                width: 720px;
            }
        }

• 4, 5, 6번 영역에 적용된 마진값 0을 풀어주기

        @media (min-width: 540px) and (max-width: 720px) {
            .column:nth-child(4) {
                margin-bottom: 10px;
            }
        }

• 미디어쿼리 - 모바일 버전 이미지 레이아웃 1x6

        @media (min-width: 320px) and (max-width: 539px) {
            .container {
                width: 100%;
            }

            .column {
                width: 100%;
            }

            .column:nth-child(4),
            .column:nth-child(5) {
                margin-bottom: 10px;
            }
        }

• 양 옆 여백 주기

        @media (min-width: 320px) and (max-width: 539px) {
            .container {
                box-sizing: border-box;
                width: 100%;

                padding: 0 20px;
            }