출력 결과
파이어베이스(firebase) 배포 사이트
소스코드 (파일 첨부)
firebase_example2022.zip
17.52MB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Grayscale - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<!--BODY-->
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">WELCOME TO SEOUL</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Contents</a></li>
<li class="nav-item"><a class="nav-link" href="#signup">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
<div class="d-flex justify-content-center">
<div class="text-center">
<h1 class="mx-auto my-0 text-uppercase">SEOUL</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">I SEOUL U</h2>
<a class="btn btn-primary" href="#about">INTRODUCE</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="about-section text-center" id="about">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8">
<h2 class="text-white mb-4">S E O U L</h2>
<p class="text-white-50">
Seoul is one of the most beautiful cities in the world.<br/><br/>
THIS IS (Seúl ,Szöul ,ソウル ,سول ,漢城/汉城)
</p>
</div>
</div>
<img class="img-fluid" src="assets/img/seoul2.gif" alt="..." />
</div>
</section>
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<div class="container px-4 px-lg-5">
<!-- Featured Project Row-->
<div class="row gx-0 mb-4 mb-lg-5 align-items-center">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/경복궁.jpg" alt="..." /></div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Gyeongbokgung Palace</h4>
<p class="text-black-50 mb-0">Gyeongbokgung Palace is a royal palace of the Joseon Dynasty located in Cheong Wa Dae-ro, Seoul, South Korea. It was founded in 1395, the 4th year of King Taejo's reign, and burned down in 1592 due to the Japanese Invasion of Korea in 1592, and was rebuilt in 1868 under the leadership of Heungseon Daewongun. It was damaged during the Japanese colonial period and the restoration project is currently underway. It was built on the basis of officiating and high-airing.</p>
</div>
</div>
</div>
<!-- Project One Row-->
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/korea.jpg" alt="..." /></div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
후기: firebase 에 대해 알고 있었지만 사용해본건 처음이었다.
부트스트랩에 이미 만들어진 템플릿을 가지고 개인홈페이지를 만들어보았다. 처음부터 코드 짜는것보다 이렇게 누군가 기초틀 정도 만들어진 코드에다가 추가 수정하는걸 평소에 좋아하기 때문에 페이지를 개발하면서 너무 재밌었다.🤩
'웹 개발자 준비 과정🐳' 카테고리의 다른 글
| day07: 자바스크립트를 이용하여 퍼즐,햄버거 하우스 게임만들기😬 (1) | 2022.07.27 |
|---|---|
| day06: 드래그 앤 드롭(drag and drop)😮💨 (0) | 2022.07.26 |
| day04: 부트스트랩_jeju (html,css,js,bootstrap)😀 (0) | 2022.07.26 |
| day03 : 나이키,시계,이미지로테이트 웹페이지 만들기 (html,css,js)😵 (1) | 2022.07.26 |
| day02: 문서 구조화,그리디 (html,css,js)🙂 (0) | 2022.07.26 |
