320x100
처음으로 git hub 랜딩페이지 1개를 따라서 모두 시연해봤다.
불만족스러운 점은 구글맵 구현에 있어서 api코드등 문제가 있는것 같아서 작동이 안되나,
뭐 그건 현재의 나에겐 소소한 부분이니 굳이 찾아보고 해결하지 않기로 했다.
중요한 것은 일단 웹을 구조화 시켜본 것인데
실질적으로 html, css로 다 만드는 것 같다;
음... 아직 갈길이 멀지만 똑같은걸 계속 반복하는건 보통의 경우엔 재미가 없으니깐
똑같은 주제의 다른 강의든 책이든 그런걸 반복하는식으로 학습해보자.
# git hub 랜딩페이지 반응형
# 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>Github</title>
<!-- css bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- javascript bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<!-- Favicon -->
<!-- icon은 브라우저 탭의 대표 아이콘을 가져올때 사용해준다. -->
<link rel="icon" href="./favicon.png">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
<!-- stylesheet는 css를 가져올때 사용한다. -->
<link rel="stylesheet" href="./main.css">
<!-- google map으로써 여기부터 /head까지는 긁어왔다. -->
<script>
// Initialize Google Map.
// 전역적으로 사용될 수 있도록 함수를 만들었다.
function initMap() {
const myLatLng = {
lat: 37.782293,
lng: -122.391240
}
const map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: false,
zoom: 18
})
const marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'GitHub'
})
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTQIlxBn5AfKGvsfJiormAE1esN3fcCkg&callback=initMap" async defer></script>
</head>
<body>
<!-- HERO -->
<section class="hero">
<img class="globe" src="./images/hero-globe.jpg" alt="Globe">
<img class='glow' src="./images/hero-glow.svg" alt="Glow">
<!-- HEADER -->
<!-- 의미적으로 header라는 것이지, 기능적 속성을 가진건 아니다. -->
<header>
<!-- 중앙으로 몰아줄 수 있는 container -->
<!-- d-flex부터는 css를 대신하는 기능이다. -->
<div class="container d-flex align-items-center py-3">
<!-- a 는 이동할 페이지 링크를 연결하고 싶을 때 사용한다. -->
<!-- me는 margin end라는 뜻이다. -->
<a class="logo me-2" href="#">
<img src="./images/header-logo.svg" alt="Github Logo">
</a>
<!-- navigation 추가 -->
<!-- flex가 부모 요소인 container로부터 속성을 전달받을때, 가급적 많이 전달받기위해
써주는 것이 flex-grow라고 한다. / 1은 1의 비율 -->
<ul class="nav flex-grow-1">
<li class="nav-item text-light">
<!-- a 태그의 class에서 nav-link로써 이미 색상이 지정이 되어있기 때문에
이를 무시하고 다른 색상으로 해주기 위해서 text-light를 해준다. -->
<a href="#" class="nav-link text-light">Personal</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light">Open source</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light">Business</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-light">Explore</a>
</li>
</ul>
<div class="forms d-flex">
<input type="text" class="form-control me-2" placeholder="Search Github">
<!-- flex-shirink-0으로 인해서 '감소너비'를 0으로 만든다는 뜻이다. -->
<!-- btn-link로 인해서 sign in아래에 밑줄이 그어져 있다.
이를 제거 하기 위해서 text-decoration-none를 사용한다.
추가로 text-decoration은 밑줄을 맨밑, 중앙에 치거나 아예 없앨 수도 있다.-->
<button class="btn btn-link text-light flex-shrink-0 me-2 text-decoration-none">Sign in</button>
<!--배경이 아닌 테두리의 색상을 변경하는 것이라 여기서는 outline-light로 사용되었다. -->
<button class="btn btn-outline-light flex-shrink-0">Sign up</button>
</div>
<!-- 반응형 버튼 -->
<button class="btn ms-2" data-bs-toggle="offcanvas" data-bs-target="#offcanvas">
<img src="./images/menu.svg" alt="Menu Icon">
</button>
<div class="offcanvas offcanvas-end" id="offcanvas">
<div class="offcanvas-header">
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul class="list-group list-group-flush mb-4">
<li class="list-group-item">
<a href="#">Personal</a>
</li>
<li class="list-group-item">
<a href="#">Open source</a>
</li>
<li class="list-group-item">
<a href="#">Business</a>
</li>
<li class="list-group-item">
<a href="#">Explore</a>
</li>
</ul>
<input type="text" class="form-control mb-2" placeholder="Search Github">
<div class="d-grid mb-2">
<button class="btn btn-outline-primary">Sign in</button>
</div>
<div class="d-grid">
<button class="btn btn-primary">Sign up</button>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<!-- large size 기준으로 7이상일때는 12개의 컬럼 영역을 사용하되, 그렇지 않으면 7개만 쓴다는 의미
이건 반응형일때 함께 서준다.-->
<!-- 가로 기준으로 총 12개의 컬럼이 있다. 그 중 12개 컬럼 영역을 사용한다는 의미 -->
<div class="col-lg-7 col-12">
<div class="headline">
<h1 class="text-white">Where the world builds software</h1>
<!-- 약 50%의 opacity값을 가진 하얀색으로 글씨 색상 지정 -->
<p class="text-white-50">Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world.</p>
</div>
</div>
</div>
<div class="row">
<!-- 이것도 large사이즈 이상일때는 5, midium사이즈일때는 6,
나머지 영역에서는 12개의 칸을 모두 사용한다는 반응형에 대한 셋팅 -->
<div class="col-lg-5 col-md-6 col-12">
<form>
<input type="text" class="form-control form-control-lg mb-3" placeholder="Email address">
<input type="password" class="form-control form-control-lg mb-3" placeholder="Password">
<!-- d-grid를 통해서 최대한으로 늘어날 수 있다. -->
<div class="d-grid">
<button class="btn btn-primary btn-lg">Sign up for Github</button>
</div>
</form>
</div>
</div>
</div>
<img class="curve" src="./images/curve.svg" alt="Curve">
</section>
<!-- YOUTUBE -->
<section class="youtube">
<div class="container">
<img class="astronaut" src="./images/hero-astronaut.svg" alt="Astronaut">
<!-- 자동 비율 조정 -->
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/2m9nUP-e8Co" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features border-top border-bottom">
<div class="container">
<div class="row">
<!-- columns이 각각 3이라는 영역을 사용한다. 라는 의미 -->
<div class="col-lg-3 col-6">
<div class="card">
<img src="./images/features-build.png" alt="Build" class="card-img-top">
<div class="card-body test-center">
<h5 class="card-title"><strong>For everything you build</strong></h5>
<p class="card-text">Host and manage your code on GitHub. You can keep your work private or share it with the world.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card">
<img src="./images/features-work.png" alt="Work" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title"><strong>A better way to work</strong></h5>
<p class="card-text">From hobbyists to professionals, GitHub helps developers simplify the way they build software.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card">
<img src="./images/features-projects.png" alt="Projects" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title"><strong>Millions of projects</strong></h5>
<p class="card-text">GitHub is home to millions of open source projects. Try one out or get inspired to create your own.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="card">
<img src="./images/features-platform.png" alt="platform" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title"><strong>One platform, from start to finish</strong></h5>
<p class="card-text">With hundreds of integrations, GitHub is flexible enough to be at the center of your development process.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- MAP -->
<section class="map">
<div class="container">
<div class="row">
<div class="col-lg-4 col-12">
<h1>Where is GitHub?</h1>
<p>GitHub is where people build software. More than 18 million people use GitHub to discover, fork, and contribute to over 48 million projects.</p>
</div>
<div class="col-lg-8 col-12">
<div id="map"></div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<img class="curve" src="./images/curve.svg" alt="Curve">
<div class="container">
<img class ="illustration" src="./images/footer-illustration.webp" alt="Illustration.webp">
<div class="row">
<div class="col-lg-4 col-12">
<img class="logo" src="./images/footer-logo.svg" alt="Logo">
</div>
<div class="col-lg-2 col-md-3 col-6">
<h5>Product</h5>
<ul class="list-unstyled">
<li><a href="#">Features</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Enterprise</a></li>
<li><a href="#">Customer stories</a></li>
<li><a href="#">The ReadME Project</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Roadmap</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-3 col-6">
<h5>Platform</h5>
<ul class="list-unstyled">
<li><a href="#">Developer API</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Atom</a></li>
<li><a href="#">Electron</a></li>
<li><a href="#">GitHub Desktop</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-3 col-6">
<h5>Support</h5>
<ul class="list-unstyled">
<li><a href="#">Docs</a></li>
<li><a href="#">Community Forum</a></li>
<li><a href="#">Professional Services</a></li>
<li><a href="#">Learning Lab</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Contact GitHub</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-3 col-6">
<h5>Company</h5>
<ul class="list-unstyled">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">DI&B</a></li>
<li><a href="#">Social Impact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
</div>
</div>
<ul class="site-links list-unstyled">
<li>© 2021 GitHub, Inc.</li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">What is Git?</a></li>
</ul>
</footer>
</body>
</html># CSS 코드
body {
font-family: 'Poppins', sans-serif;
/* 폰트의 가중치, 폰트의 두께를 의미한다. */
font-weight: 300;
}
/* 가장 최 상단에 위치하는 메뉴바 위치의 배경셋팅 */
header {
/* background-color: #040d22; */
/* 더 위에 쌓일 수 있는 기준이 될 수 있는 명령 */
position: relative;
}
/* header라는 속성에 container라는 속성을 가진 값을
정렬 */
/* header .container {
display: flex;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
} */
header .forms input.form-control {
color: white;
/* red, green, blue, alpha를 의미하며
alpha는 투명도를 의미한다. */
background-color: rgba(255,255,255,0.15);
/* 테두리 선 */
border-color: rgba(255,255,255,.3);
}
/* placeholder가 힌트를 의미한다. */
header .forms input.form-control::placeholder {
color: rgba(255,255,255,.6);
}
/* 반응형 셋팅1 */
header [data-bs-toggle="offcanvas"] {
display: none;
}
header .offcanvas .list-group-item {
padding: 16px;
}
header .offcanvas .list-group-item a{
color: black;
text-decoration: none;
}
header .offcanvas .list-group-item a:hover{
text-decoration: underline;
}
/* 반응형 셋팅2 */
@media (max-width: 992px) {
header .logo {
flex-grow: 1;
}
/* 다중선택자 사용시 ,로 구분해주는 것이 필요하다. */
header .nav,
header .forms input.form-control,
header .forms .btn-link{
display: none;
}
header [data-bs-toggle="offcanvas"] {
display: block;
}
}
section.hero {
background-color: #040d22;
/* 기준이 되는 값 */
position: relative;
/* 자신의 영역 밖으로 흘러 넘치는 내용은 잘라내겠다는 명령 */
overflow: hidden;
}
section.hero .container {
padding-top: 160px;
padding-bottom: 160px;
/* 더 위에 쌓일 수 있는 기준이 될 수 있는 명령 */
position: relative;
}
section.hero .headline h1 {
font-size: 68px;
font-weight: 700;
/* 글자간 가로 간격 조정 */
letter-spacing: -2px;
}
section.hero .headline p {
font-size: 26px;
}
section.hero img.globe {
width: 900px;
/* position같이 '배치'를 할때는 반드시
배치에 대한 기준이 되는 요소도 함께 쓰여야 한다.
그 기준이란, 우선 부모태그로부터 비롯되어야 하므로
부모태그인 section hero설정에 position셋팅을 남기도록 하자*/
position: absolute;
top: -5%;
left: 46%;
}
section.hero img.glow {
width: 200%;
height: 200%;
/* 이거에 대한 부모요소도 마찬가지로 hero 클래스다.
기준값이 있으므로 또다시 써주진 않아도 된다. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section.hero .curve {
/* position: absolute; 면 기준이 필요하다.
이에 대해서는 section.hero에 이미 기준이 있기때문에 문제 없다.
position의 기준은 position: relative;로 알아본다.*/
position: absolute;
bottom: -1px;
/* 0px은 px를 붙이지 않는다. */
left: 0;
}
/* .ratio위에 써주는 이유는 ratio의 부모태그 이기 때문이다. */
section.youtube .container {
padding-top: 90px;
padding-bottom: 70px;
position: relative;
}
section.youtube img.astronaut {
width: 480px;
position: absolute;
top: -420px;
right: 0;
}
section.youtube .ratio{
border-radius: 10px;
overflow: hidden;
background-color: black;
}
/* 반응형 옵션. 768px이하가 되었을때 astronaut이미지가
보이지 않게 되는 옵션이다.
이렇게 하는 이유는 레이아웃 관리를 좀 더 간결하게 하기 위해서다. */
@media (max-width: 768px) {
section.youtube img.astronaut {
display: none;
}
}
section.features {
}
section.features .container {
padding-top: 30px;
padding-bottom: 30px;
}
section.features .card {
color: #627597;
/* 테두리선 사용하지 않겠다. */
border: none;
}
section.features .card img {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 60px;
padding-right: 60px;
/* 요소의 내부를 의미함 / 첫번째 30px은 위아래, 두번째 60px은 좌우를 의미 */
padding: 30px 60px;
}
@media (max-width:576px) {
sextion.features .card img{
padding: 20px 30px;
}
}
section.map {
}
section.map .container {
padding-top: 100px;
padding-bottom: 100px;
color:#627597;
}
section.map h1 {
font-size: 44px;
font-weight: 700;
}
section.map p {
font-size: 24px;
}
#map {
/* 무슨이유인지는 모르겠는데 가로는 아무튼 자동으로 늘어나는 그런개념이기에 쓸필요가 없다고 한다. */
height: 500px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 10px;
z-index: 1;
}
footer {
background-color: #040d22;
position: relative;
margin-top: 20%;
}
footer .curve {
/* y축을 기준으로 반전 */
transform: scale(1,-1);
position: absolute;
top: -1px;
left: 0;
}
footer .container {
}
footer img.illustration {
width: 100%;
margin-top: -33%;
margin-bottom: 50px;
/* scale안에 들어있는것은 x축과 y축의 각각의 비율이다. */
/* x축을 기준으로 반전 */
transform: scale(-1,1);
}
footer img.logo {
opacity: .4;
}
footer h5 {
font-weight: 700;
color: rgba(255,255,255,0.4);
margin-bottom: 20px;
}
footer ul li {
margin-bottom: 10px;
}
footer ul li a {
color: rgba(255,255,255,.4);
text-decoration: none;
transition: .3s;
}
footer ul li a:hover {
color: white;
}
footer .site-links {
/* 위,아래, 양옆의 공간이 0으로 초기화 된다. */
margin: 0;
margin-top: 60px;
padding: 20px;
background-color: rgba(255,255,255,.05);
/* 각각의 li태그가 수평이 되었으면 좋겠다는 셋팅 */
display: flex;
justify-content: center;
/* 줄바꿈 처리가 가능하게 감싸주겠다는 의미 */
flex-wrap: wrap;
}
footer .site-links li {
color: rgba(255,255,255,.4);
margin: 0;
/* footer .site-links li에 해당하는
모든 요소의 오른쪽에 20px의 공간을 준다는 의미 */
margin-right: 20px;
}
/* 마지막 자식요소가 li일때 */
footer .site-links li:last-child {
margin-right: 0;
}
@media (max-width: 992px) {
footer {
text-align: center;
}
footer img.logo {
margin-bottom: 50px;
}
}300x250
'Web > Total_Web' 카테고리의 다른 글
| Web에 유용한 사이트 모음 (0) | 2022.11.14 |
|---|---|
| bootstrap 기초1 기본 (0) | 2022.09.06 |