ChatGPT 웹개발 진행노트 - 1일차

2024. 1. 19. 16:17ㆍ스파르타_부트캠프/웹개발

VS Code에서 다음과 같은 필수 확장 프로그램을 설치하였다.

 

[HTML]

* open in browser

* Auto Close Tag

* Auto Rename Tag

* HTML End Tag Labels

* indent-rainbow

* Bracket Pair Color DLW

 

[Python / SQLite / Flask]

* autopep8

* SQLite

* Flask-snippets

 

실습내용 저장을 위한 github repository를 생성하였다.

https://github.com/lsi3131/sparta_chatgpt_webdev

 

06. 간단한 로그인 페이지 만들어보기

login.html 생성 및 강의 자료의 코드를 붙여넣었다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
</head>
<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

 

07. css 기초를 배우기

login.html에 css를 추가하였다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
				.mytitle {
            color: red;
            font-size: 40px;
        }

        .mytxt {
            color: red;
        }

        #mybtn {
            font-size: 12px;
            color: white;
            background-color: green;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text"/></p>
    <p class="mytxt">PW: <input type="text"/></p>
    <button id="mybtn">로그인하기</button>
</body>
</html>

html, css의 기초적인 내용은 대략적으로 알고 있으니 강의자료 내용을 복사, 붙여넣기를 진행하면서 넘어갔다.

 

08. HTML로 레이아웃 만들기

레이아웃 학습을 위해 다음 코드를 복사한 후 flex.html에 붙여넣었다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .container {
    background-color: rgb(216, 216, 219);
    margin: 10px;
    padding: 7px;
    height: 50vh;

  }

  .box {
    background-color: purple;
    color: white;
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
  }

  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <span>text</span>
    <span>text</span>
    <span>text</span>
  </div>
  
</body>
</html>

 

.container {
    background-color: rgb(216, 216, 219);
    margin: 10px;
    padding: 7px;
    height: 50vh;
    display: flex; /* new */
    justify-content: center; /* new */
    align-items: center; /* new */
}

 

.container style에 대해 몇가지 적용값을 알아보았고 그 중 flex는 개발자 도구에서 다양한 설정을 확인할 수 있었다. 기존에 몰랐던 내용이므로 숙지해두었다,

개발자 도구에서 flex 옵션 확인 방법
실습 진행 화면

10. 데일리모토 만들기

frontend/motto.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>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;
      /* Flex 안의 아이템들을 세로 방향으로 배치합니다. */
      justify-content: center;
      /* 주축 방향으로 가운데 정렬합니다. */
      align-items: center;
      /* 교차축 방향으로 가운데 정렬합니다. */
      height: 100vh;
      text-align: center;
    }

    .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      text-align: center;
      font-weight: bold;
      padding: 20px 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>

nav, container, footer 구조로 페이지를 설계하는 것을 배웠다. 일일히 코딩하지는 않고 우선 필요한 부분을 수정해보며 코드 구조를 파악하였다.

11. 구글 폰트 사용하기

구글 폰트를 사용하여 원하는 폰트를 찾아서 적용할 수 있다.

페이지 주소

https://fonts.google.com/

 

앞으로 웹개발에서 종종 사용할 수 있을 것 같아 북마크에 추가해두었다.

 

폰트는 Nanuem gothic을 선택하였다.

 

얇은 두께인 Regular 400을 선택하였다.

@import를 선택한 후 코드 복사를 

 

<style> 태그에 다음과 같이 코드를 추가한 후 결과를 확인할 수 있었다.

<style>
/* font */
        @import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap");

        * {
            font-family: "Nanum Gothic", "sans-serif";
        }
</style>

 

(좌)기본 폰트, (우)나눔 고딕 적용 폰트

 

13. 부트스트랩, 예쁜 CSS 모음집

bootstrap.html 파일을 새로 만들었다.

이후 시작템플릿의 내용을 붙여 넣었다.

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

 

 

부트스트랩 버튼 컴포넌트가 있는 url로 이동 후

https://getbootstrap.com/docs/5.3/components/buttons/

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com



중간에 위치한 Primary 버튼을 복사하여 다음과 같이 붙여 넣었다.

  <body>
    <h1>이걸로 시작해보죠!</h1>
    <button type="button" class="btn btn-primary">Primary</button>
    <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>

브라우저에 다음과 같이 출력되는 것을 확인하였다.

bootstrap을 사용하기 위해서는 다음과 같이 <link>, <script>에 해당 CDN 링크를 추가해야한다. 직접 다운로드해서 사용하는 방법도 있지만 CDN을 사용하는 것이 일반적이다.

 <head>
    ...
    <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>
    ...
    <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>

 

CDN은 Chat GPT에게 물어보니 다음과 같은 설명을 해주었다.

더보기

CDN은 "Content Delivery Network"의 약자로, 콘텐츠 전송 네트워크를 나타냅니다. CDN은 웹 사이트의 정적인 콘텐츠(이미지, 스타일시트, 자바스크립트 파일 등)를 효과적으로 제공하기 위한 분산 네트워크 시스템입니다.

 

일반적으로, 웹 페이지의 모든 요소는 사용자의 브라우저에서 웹 서버로부터 다운로드되어 표시됩니다. 그러나 사용자와 서버 간의 물리적인 거리, 서버의 부하, 대역폭 등의 이유로 이러한 요소들의 로딩이 느려질 수 있습니다. CDN은 이러한 문제를 완화하기 위해 전 세계에 분산된 서버 네트워크를 구축하여 콘텐츠를 사용자에게 빠르게 제공하는 역할을 합니다.

CDN은 Content Delivery Network의 약자로 분산 네트워크 시스템이라고 한다. 웹개발 시 기본적으로 알아두어야할 용어인 듯하여 숙지하고자 하였다.

 

1일차 진행사항

웹개발을 위해 VS Code에 필수 extension을 설치하여 기본적인 환경설정을 하였고 실습내용을 진행사항을 저장할 github repository를 추가하였다.

또한 html, css에 대해 기본적인 내용을 숙지하였으며, motto.html 을 분석하여 사용법에 익숙해질 수 있도록 하였다. 

마지막으로 bootstrap에 대해 <link>, <script>에 CDN 링크 설정 및 bootstrap 사이트를 사용하여 UI를 생성하는 방법을 배웠다.

 

아주 기본적인 웹 프론트엔드 기능에 대해 간단히 학습한 시간이였다. 추후 학습할 내용을 통해 웹개발 환경에 익숙해지려고 노력할 예정이다.

'스파르타_부트캠프 > 웹개발' 카테고리의 다른 글

ChatGPT 웹개발 진행노트 - 6일차  (1) 2024.02.02
ChatGPT 웹개발 진행노트 - 5일차  (0) 2024.01.25
ChatGPT 웹개발 진행노트 - 4일차  (0) 2024.01.23
ChatGPT 웹개발 진행노트 - 3일차  (0) 2024.01.22
ChatGPT 웹개발 진행노트 - 2일차  (0) 2024.01.20

관련글

티스토리툴바