항해99

웹개발 종합반_1주차

Hyeon_E 2023. 4. 1. 00:05

[ 웹의 동작 개념 ]

브라우저는 

  1. 요청을 보내고
  2. 받은 HTML 파일을 그려줌

즉 웹 페이지는 서버에서 미리 준비해두었던 것을 받아서 브라우저에서 볼 수 있도록 그려주는 역할을 수행

즉 브라우저는 요청을 보내고 요청의 답으로 받은 HTML 파일을 그려주는 일만 함 

 

그렇다면 요청은 어디서 보내는 것일까?

서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보내는 것

주소 창에 주소를 입력하고 엔터를 입력하는 것이 바로 요청을 보내는 행위

 

예시로 https://naver.com/ 들자면

naver.com 이름의 서버에 있는 “/”라는 주소 창구에 요청을 보낸 것

네이버에서 그 대답으로 네이버 홈에 해당하는 HTML 파일을 줌

 

결국 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려줌

많은 웹서비스에서는 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아끼워줌

 

[ HTML, CSS 기본 내용 ]

HTML은 뼈대, CSS는 꾸미기

  • HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드, 웹의 전반을 HTML을 통해서 작성할 수 있음
  • CSS는 HTML을 통해 작성된 뼈대의 속성을 꾸며주는 코드
  • HTML 코드 내에 CSS 파일을 불러와서 적용

▶ HTML 기초

크게 head와 body로 구성되어 있음

  • head 안에는 페이지의 속성 정보, body안에는 페이지의 내용을 담음
  • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
    • head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부름
    • 즉, 눈에 안 보이는 필요한 것들을 담는 것
  • body안에 들어가는 대표적인 요소들
    • <div>: 구역을 나눔
    • <p>: 문단
    • <ul>,<li>: 블랫이 붙어서 나옴
    • <h1>~<h6>: 구획 제목 요소, 숫자가 작을수록 글씨가 큼. <h1>은 제목태그
    • <span>: 특정 글자를 감싸 꾸밀때 슴
    • <a>: 하이퍼링크
    • <input>: 입력태크
    • <button>: 버튼
    • <textarea>: 사용자가 여러줄의 텍스트를 입력할수 있는 텍스트 입력 영역을 정의할때 사용

- VSCode에서 자동정렬 기능

  • 윈도우: Shift + Alt + F
  • 맥: Shift + Option + F
  • VSCode에서 확장기능으로 Prettier을 추가하면 저장할때마다 자동정렬됨

- Html 뼈대 만들기

  • 파일을 만든 후
  • 코드를 적는 공간에 html이라쓰고 자동완성 항목에 html:5 클릭
  • Html 뼈대 완성

▶ CSS 기초

HTML 부모-자식 구조

Html 태그는 "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요!!

감싸고 있는 태그가 바뀌면 그 안의 내용물도 모두 영향을 받음

 

CSS 사용

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성

 

많이 쓰는 CSS

더보기

배경관련

  • background-color
  • background-image
  • background-size

사이즈

  • width
  • height

폰트

  • font-size
  • font-weight
  • font-family
  • color

간격

  • margin
  • padding

자주쓰는 가운데로 옮기기

가운데로 옮겨오기 원하는 태그블럭들을 박스씌우고 양쪽 여백을 조정하면 됨

즉, div태그로 감싸고 width로 가로넓이를 준다음, margin: auto

 

구글 폰트 사용하기

구글웹폰트

https://fonts.google.com/?subset=korean&noto.script=Kore 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

  1. 웹사이트에 들어가기
  2. 옵션에서 language를 korean으로 변경
  3. 원하는 폰트 선택&클릭
  4. 폰트 두께를 결정해서 클릭
  5. 오른쪽에 창이 뜨면 Use On Web탭에서 import 버튼 클릭
  6. <style></style> 태그 안에 묶인 코드만 복사해서 style태그 안에 넣음
  7. CSS rules to specify families 탭의 코드를 복사해서 전체적용(*)하거나 원하는 클래스에 넣으면 완성

 

[ 코딩의 꿀팁 ]

▶ 주석

주석의 사용

주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않음. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것

  • 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
  • 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용
  • 단축키: 주석처리하고 싶은 코드 선택한후 ctrl(또는 command) + /

▶ 파일분리

css 파일분리

<style> ~ </style> 부분이 너무 길어지면, 보기 어려움(가독성이 떨어짐)

이럴 땐 CSS 파일을 분리해둘 수 있음

  1. style.css 파일을 같은 폴더에 만들기
  2. head태그에서 <link rel="stylesheet" type="text/css" href = "(css파일이름).css">로 CSS파일 가져오기

현재는 내 컴퓨터에 있는 파일을 가져왔지만(CSS파일) 인터넷에 있는것을 가져온다면 이것을 바로 라이브러리라고 함

 

[ 부트스트랩(bootstrap) ]

예쁜 CSS를 미리 모아둔것

  • CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기
  • 현업에서는 미리 완성된 누군가가 만들어 놓은 CSS 꾸러미(ex.부트스트랩) 가져다 쓰는 경우 경우가 많음
  • CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일

https://getbootstrap.com/docs/5.0/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

부트스트랩 시작 템플릿

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>

 

부트스트랩 사용하기

  • 자신이 부트스트랩을 사용하길 원하는 파일에 헤드쪽에 부트스트립크 링크와 스크립트를 붙여넣음
    • 만약에 링크와 스크립트를 부트스트랩페이지에서 찾기 힘들다면 위에 부트스트랩 시작템플릿 복붙
  • 부트스트랩 링크: https://getbootstrap.com/docs/5.0에 들어가 자신이 사용하기 원하는 것을 찾음
    • 예쁜 버튼을 만들고 싶다면 버튼쪽으로 들어가 버튼을 복사하면 됨
  • 복사한 버튼을 자신이 넣길 원하는 부분에 붙여넣기함

 

[ 웹 페이지 배포 ]

▶ GitHub

  • Github는 인터넷에서 코드를 업로드 할 수 있는 사이트
  • 동시에 코드를 배포해서 마치 홈페이지처럼 접속할 수 있음

https://github.com/

 

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com

▶ github를 이용해 내가 만든 웹 페이지 배포하기

  1. GitHub페이지에 들어가 회원가입을 함
  2. 로그인 하기
  3. Create Repository를 선택하여 public을 선택하고 Create Repository를 선택하여 레파지토리 만들기
  4. Upload Exsiting Files를 선택하여 index.html 파일을 드래그앤 드롭으로 업로드
  5. 저장소에 settings으로 들아감
  6. setting화면 왼쪽부분에서 Pages를 찾아 클릭
  7. Deploy from a branch를 선택
  8. Branch Name을 main으로 설정하고 save 버튼을 누르기
  9. 기다렸다가 새로고침(F5)하면 화면 위에 주소가 노출됨

-  Github를 이용해서 배포할 때는 반드시 파일이 하나 index.html이어야 함

    index.html이라는 파일를 잡아서 업로드를 해줘야 Github가 배포를 해줌

▶ 배포한 웹페이지 수정하기

  1. 깃허브 저장소 들어가기
  2. 저장소에서 index.html파일을 클릭
  3. 화면 오른쪽에 연필 아이콘 클릭
  4. 깃허브의 코드를 전체 선택(ctrl +  a) 후 삭제
  5. 수정한 코드를 복사해 깃허브에 붙여넣기
  6. 화면 맨 아래에 commit 버튼 클릭
  7. 기다리면 적용완료