매일 땡기는 마라 코딩

[인프런] 맛집지도 만들기 - 퀴즈 3 본문

클론코딩

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

cmkoi1 2023. 1. 27. 02:30

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

 

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

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

www.inflearn.com

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

 

 

 

CSS Flex 퀴즈

 

  • 플렉스과제.html, 플렉스과제.css 파일 생성.

플렉스과제.html

<!-- 
    요구사항
    1. flax를 활용한 레이아웃 적용
    2. 버튼 배경, border 제거, 커서 포인터 적용
    3. 네비게이션에 색깔 적용
    4. h1, button 태그에 글꼴 적용하기
 -->

<!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;
}

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

html {
    font-size: 10px;
}

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

    background-color: orange;
}

.nav-title {
    border: 20px;
    padding: 20px;
    font-family: 'KyoboHandwriting2020A';
}

.nav-contact {

    border: 20px;
    padding: 20px;
    background-color: orange;
    cursor: pointer;
    font-family: 'KyoboHandwriting2020A';
}

 

 

 

 

CSS Flex 퀴즈 풀이

풀이 코드
플렉스과제.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;
}

* {
    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;
    /* html에 설정한 폰트를 자동적으로 속성받지 못함 */
    font-family: inherit;
}

 

728x90

'클론코딩' 카테고리의 다른 글

[인프런] 맛집지도 만들기 - 퀴즈 4  (0) 2023.01.27
[인프런] 맛집지도 만들기 (4)  (0) 2023.01.27
[인프런] 맛집지도 만들기 (3)  (0) 2023.01.27
[인프런] 맛집지도 만들기 - 퀴즈 2  (0) 2023.01.27
[인프런] 맛집지도 만들기 (2)  (0) 2023.01.26
'클론코딩' Related Articles more