클론코딩

[인프런] 맛집지도 만들기 - 퀴즈 4

cmkoi1 2023. 1. 27. 02:33

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

 

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지 - 인프런 | 강

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다., - 강의 소개 | 인프런...

www.inflearn.com

※ 해당 링크 강의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

CSS Media Query 퀴즈

 

  • 반응형과제.html, 반응형과제.css 파일 생성. 미디어 쿼리를 활용하여 화면 너비가 1024px을 넘어가면 네비게이션 양옆에 여백이 생기도록 설정.

 

 

 

퀴즈 코드
반응형 과제.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="반응형과제.css" />
</head>
<body>
    <nav>
        <div class="nav-container">
            <h1 class="nav-title">맛집지도</h1>
            <button class="nav-contact">Contact</button>
        </div>
    </nav>
</body>
</html>

 

퀴즈 코드
반응형 과제.css

 

@font-face {
    font-family: 'KyoboHandwriting2020A';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media all and (min-width: 1024px) { 
    .nav-title {
        padding: 1rem 10em 0;
    }
    
    .nav-contact {
        padding: 1rem 10em 0;
    }
}

* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: 'KyoboHandwriting2020A'
}

nav {
    background-color: #e69a06;
}

.nav-container {
    padding: 1rem 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav-contact {

    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

 

CSS Media Query 퀴즈 풀이

풀이 코드
반응형과제.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="반응형과제.css" />
</head>
<body>
    <nav>
        <div class="inner">
            <div class="nav-container">
                <h1 class="nav-title">맛집지도</h1>
                <button class="nav-contact">Contact</button>
            </div>
        </div>
    </nav>
</body>
</html>

 

풀이 코드
반응형과제.css

 

@font-face {
    font-family: 'KyoboHandwriting2020A';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media all and (min-width: 1024px) { 
    .inner {
        max-width: 1024px;
        margin: 0  auto;
    }
}

* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: 'KyoboHandwriting2020A'
}

nav {
    background-color: #e69a06;
}

.nav-container {
    padding: 1rem 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.nav-contact {

    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

 

728x90