[목차]

<aside> ✨ 웹개발 종합반 주차별 주요 키워드

• 1주차: HTML, CSS로 웹페이지의 뼈대와 화면을 꾸미는 법을 배운다.
• 2주차: JavaScript로 서버에 데이터를 요청하고 JQuery, Fetch를 이용해 요청을 브라우저에 보여준다.
• 3주차: Python으로 웹서비스의 서버 역할을 배우고 monoDB로 데이터베이스를 다룬다.
• 4주차: Python, Flask, mongoDB, JavaScript를 모두 활용해 나만의 웹서비스를 만든다.
• 5주차: 지금까지 배운 내용을 모두 합해 프로젝트를 만든 후 배포를 진행한다. </aside>

<aside> ✨ 1주차 수업 목표

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

01. 웹 브라우저의 간단한 원리

1) 웹의 동작 개념

• 브라우저는 1) 요청을 보내고, 2) 받은 HTML 파일을 그려준다!

1. 요청을 보내는 곳?

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

   • 예시

     • https://naver.com/ 은 ‘naver.com’이라는 이름의 서버에 있는 ‘/’라는 주소 창구에 요청을 보낸 것과 같다.
     • 이에 대한 응답으로 해당 서버는 네이버 홈에 해당하는 HTML 파일을 보내준다.

   • 이를 정리해보면 아래의 사진과 같다.

     

2. 그럼 항상 HTML 파일로 돌려주는지?

   • 데이터만 내려줄 때가 더 많다. (HTML 파일의 코드도 결국 데이터라고 할 수 있다.)

   • 만약 공연 티켓을 예매하고 있는 상황에서 좌석이 실시간으로 매진될 때마다 보던 페이지가 새로고침된다면 예약이 어려울 수 있다.

     → 때문에 데이터만 받아서 교체하는 방식으로 작동하게 된다.

     → [참고] 데이터가 내려올 경우는 아래의 형식과 같이 내려오는데, JSON 형식이라고 한다.

     

   • 실제로 많은 웹서비스에서는 API로 요청을 보내면 서버의 DB에서 데이터를 돌려주고, 브라우저에서는 JavaScript라는 언어가 데이터를 교체해준다.

     

02. HTML, CSS 기초

<aside> 📢 HTML은 뼈대, CSS는 꾸미기, JavaScript는 움직이기

</aside>

1) HTML

• 웹의 뼈대를 잡아주는 구역을 나타내는 코드로, 웹의 전반을 HTML을 통해 작성할 수 있다.
• HTML은 크게 head와 body로 구성된다.
  1. head

     1. 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다.

        → 즉, 눈에 보이지 않으나 필요한 것들을 담는다.

     2. 대표적인 요소들 : meta, script, link, title 등

  2. body
     1. 페이지의 내용을 담는다.
     2. 대표적인 요소들 : div, p, h1, img, input, button, textarea