24.02.14_TIL (웹 페이지 구조 : 데일리모토 프로젝트)

티스토리 뷰

AI웹 개발자 과정 공부 (팀스파르타)/ChatGPT 웹 개발

24.02.14_TIL (웹 페이지 구조 : 데일리모토 프로젝트)

티아(tia) 2024. 2. 13. 22:15

728x90

[수업 목표]

웹 브라우저의 기본 원리에 대해서 이해한다
HTML, CSS의 기초 지식을 이해하고 뼈대를 생성할 수 있다
부트스트랩을 활용하여 웹을 다양하게 구현할 수 있다

1. 데일리모토 프로젝트 설명

✅ 웹페이지 구조

1) 네비게이션바 (navbar) : 홈페이지 상단에 위치하며 주로 메뉴 항목이 포함되어 있다. 사용자가 웹사이트 내에서 이동하고자 하는 다른 페이지로 연결되어 있다.
본문 (main) : 주요 컨텐츠가 포함되는 영역. 웹사이트의 내용이 위치하며 텍스트, 이미지, 동영상 등 다양한 형태의 정보가 포함되어 있다.
푸터 (footer) : 홈페이지 하단에 위치하고 추가정보와 부가적인 링크를 포함한다. 연락처 정보, 저작권 정보, 개인정보 처리 방침 등이 이에 포함된다.

✅ 프로젝트 환경 설정

body 코드 안에 배경으로 url을 넣어주고 위치와 글씨도 화이트 색상으로 바꾸어준다.

body 밑에 nav.navbar를 쓴 뒤 tab을 누르면 코드 수식이 완성된다.

navbar 코드 사이에 날씨 수식을 넣으면서 [단축키 : Alt+위쪽 화살표]를 누르면 날씨가 수식 안으로 들어간다.
15,16에 navbar의 CSS 수식을 넣어 정렬을 한다.

justify-content를 넣고 space-between을 넣으면 위의 로고 세개가 서로 떨어진다.
space-between는 두개의 아이템을 양쪽 끝으로 일정한 간격으로 떨어트리는 것이라서 달 모양과 날씨를 묶어서 오른쪽으로 보내려면 div로 박스에 묶듯이 묶어주면 된다.

날씨의 글씨가 그림과의 세로 센터가 맞지 않아서 align-items: center을 넣고, 끝쪽에 조금 붙은 것 같아서 margin-right: 30px; 로 30픽셀만큼 안쪽으로 들어오게끔 수정하였다.

flex-direction: column; /* Flex 안의 아이템들을 세로 방향으로 배치합니다. */
justify-content: center; /* 주축 방향으로 가운데 정렬합니다. */
align-items: center; /* 교차축 방향으로 가운데 정렬합니다. */
height: 100vh; 박스를 화면 전체 높이 만큼 크기를 늘려서 조절한다.
text-align: center; 다시 가운데 정렬을 한다.

아래를 정렬해본다. position: fixed;를 하면 스크롤을 내렸다가 올려도 위치가 픽스되어 움직이지 않는다.

width: 100%; 가로 길이가 100인만큼 늘어난다. 여백을 기준으로 가운데 정렬을 하기 위해서
text-align: center; 글씨를 가운데 정렬
font-weight: bold; 글씨체를 두껍게 꾸며주기
padding: 20px 0; padding이 칸 안에서 글자사이 간격을 말하며 위아래가 20픽셀, 좌우가 0으로 한다.

src 앞에 class="logo"로 파일?을 만들어 준 뒤 조정한다. 바로 상위 파일인 navbar의 세부내용을 수정 정리한다. align-items: center; 를 넣어주면 스파르타 로고도 줄에서 가운데 정렬이 되어 보인다.
<!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>

<style>

body {

background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/background.jpg");

background-position: center;

background-size: cover;

color: white;

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

}

.weather {

display: flex;

align-items: center;

margin-right: 30px;

}

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: 100vh;

text-align: center;

}

.footer {

position: fixed;

left: 0;

bottom: 0;

width: 100%; /*가로 길이가 100만큼 늘어난다

여백을 기준으로 가운데 정렬을 하기 위해서*/

text-align: center;

font-weight: bold; /*글씨체 두껍게 꾸며주기*/

padding: 20px 0; /*padding이 칸 안에서 글자사이 간격을

위아래가 20픽셀, 좌우가 0으로 한다*/

}

.greeting {

margin-bottom: 50px;

}

.motto {

margin-bottom: 100px;

}

.logo {

height: 32px;

margin-left: 30px;

}

</style>

</head>

<body>

<nav class="navbar">

<img class="logo" src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg" alt=""/>

<div class="weather">

<img src="https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png" id="weather-icon">

<p>날씨 맑음, 20ºC</p>

</div>

</nav>



<div class="container">

<div class="greeting">

<h1>Hello, My name!</h1>

<h1>12:30</h1>

</div>

<div class="motto">

<h3>My life's motto</h3>

<h2>웃으면 행복해집니다.</h2>

</div>

</div>



<div class="footer">

<p>- 작자 미상 -</p>

<p>멋진 명언입니다. 아이스크림을 먹으면 행복해져요.</p>

</div>

</body>

</html>

✅ 구글 폰트 사용하기

구글 폰트 사이트 https://fonts.google.com/ 에서 폰트를 검색해 원하는 폰트의 CSS 코드를 복사한다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap')
</style>

' * ' 표시는 모든 코드에 부여한다는 의미이고 그 안의 내용은 폰트를 다 poppins로 적용된다는 말이다.
여기서 꿀팁! 긴 style 코드를 줄여볼 수 있다. CSS파일 분리! link:css 탭을 누르면 자동완성으로 <link rel="stylesheet" href = "style.css">로 나온다. 그 때 새파일로 'style.css'를 만들어 준다. 그 후 스타일의 긴 부분을 잘라낸 후 'style.css'에 복사 붙여 넣기를 하면 그대로 코드가 복사되어 실행된다.

✅ 부트스트랩

사이트에서 버튼의 코드를 볼 수 있다. https://getbootstrap.com/docs/5.3/components/buttons/

부트스트랩 사이트에서 'navbar'를 검색한 후 코드를 복사해서 붙이면 위 그림과 같다.
<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>

<body>

<h1>이걸로 시작해보죠!</h1>

<button type="button" class="btn btn-primary">Primary</button>



<nav class="navbar navbar-expand-lg bg-body-tertiary">

<div class="container-fluid">

<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav me-auto mb-2 mb-lg-0">

<li class="nav-item">

<a class="nav-link active" aria-current="page" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

Dropdown

</a>

<ul class="dropdown-menu">

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</li>

<li class="nav-item">

<a class="nav-link disabled" aria-disabled="true">Disabled</a>

</li>

</ul>

<form class="d-flex" role="search">

<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</div>

</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

</body>

</html>

자주 쓰는 코드로는 'card'는 인스타그램 같은 폼이고 'forms'는 위의 사진과 같은 폼이다.
flex, color 등 다양한 코드를 부트스트랩에서 가져와 쓸 수 있다.

'AI웹 개발자 과정 공부 (팀스파르타) > ChatGPT 웹 개발' 카테고리의 다른 글

24.02.17_TIL (자바스크립트 : 데일리모토) (0)	2024.02.18
24.02.16_TIL (자바스크립트 : 함수, 리스트, 딕셔너리) (0)	2024.02.16
1강 숙제 (0)	2024.02.15
24.02.15_TIL (멜로디쉐어 만들기) (0)	2024.02.15
24.02.13_TIL (HTML, CSS 웹 기본) (0)	2024.02.13

TAG more

최근에 올라온 글

개발자 공부합니다

티스토리 뷰

24.02.14_TIL (웹 페이지 구조 : 데일리모토 프로젝트)

[수업 목표]

1. 데일리모토 프로젝트 설명

'AI웹 개발자 과정 공부 (팀스파르타) > ChatGPT 웹 개발' 카테고리의 다른 글

티스토리툴바