-
맛집지도 사이트 뼈대 만들기Projects/맛집지도만들기 2022. 8. 24. 08:07
<!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>맛집지도</title> <meta name="author" content="동네코딩" /> <meta name="description" content="맛집지도 서비스" /> <meta name="keywords" content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버" /> <link rel="stylesheet" href="style.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> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button ><button class="category-item">중식</button ><button class="category-item">일식</button ><button class="category-item">양식</button ><button class="category-item">분식</button ><button class="category-item">구이</button ><button class="category-item">회/초밥</button ><button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!-- 카카오지도 --> </main> </html># css @font-face { font-family: "Open Sans"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 10px; font-family: "KyoboHandwriting2020A"; } # nav section부문과 main section 부문의 간격 벌리기 main{ margin-top: 1.5rem; } .category-title{ font-size: 3rem; } .category-item{ width: 25%; # 카테고리 메뉴아이템을 4개씩 자른다 height: 5rem; background : none; # 메뉴 배경색 삭제 border: none; # 경계선 삭제 font-family: inherit; # font-family 상속 font-size: 1.6 rem; } .category-item:hover{ color:orangered; cursor: pointer; } nav { background-color: #4206e6; } .nav-container { padding: 2rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size : 3rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .inner{ padding : 0 2rem; } # 반응형 처리 @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } }
html실행결과 ## 참고:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
@font-face - CSS: Cascading Style Sheets | MDN
The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.
developer.mozilla.org
본 강의는 인프런의 '비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!:Front, Back-end 그리고 배포까지'
강의를 토대로 작성하였습니다.
'Projects > 맛집지도만들기' 카테고리의 다른 글
카카오맵API활용해보기 - 상세조회+유투브썸네일 (0) 2022.09.13 카카오맵API활용해보기 - 지도에 marker 찍기 (0) 2022.08.26 카카오 API를 활용해서 지도 만들기 (0) 2022.08.25