매일 땡기는 마라 코딩

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

클론코딩

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

cmkoi1 2023. 1. 27. 02:27

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

 

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

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

www.inflearn.com

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

 

 

 

CSS Position 퀴즈

 

 

해당 사이트 만들어 보기

  • 포지션과제.html, 포지션 과제.css 파일 생성.
  • border:0; margin:0; box-sixing: border-box; 기본 세팅.

포지션.html

<!-- 
    요구사항
    1. position을 활용한 레이아웃 적용
    2. 버튼 배경, border 제거, 커서 포인터 적용
 -->

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

 

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

.nav-title {
    display: inline-block;
    position: fixed;
    top: 10px;
    left: 10px;
}

.nav-contact {
    display: inline-block;
    position: fixed;
    top: 10px;
    right: 10px;

    background-color: transparent;
    border: none;
    cursor: pointer;
}

 

 

 

CSS Position 퀴즈 풀이

풀이 코드
포지션과제.css

 

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

html {
    font-size: 10px;
}

.nav-container {
    position: relative;
    margin: 1rem 1rem 0;
}

.nav-contact {
    position: absolute;
    right: 0;
    top: 0;

    border: 0;
    background-color: white;
    cursor: pointer;
}

 

728x90

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

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