1. 웹 브라우저 작동 원리

브라우저의 역할

  • 1. 요청을 보내고,
    • 요청은 어디로 보낼까?
      • 서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청
  • 2. 받은 HTML 파일을 그려주는 것
    • 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려주는 역할을 함.

 

그럼 항상 HTML 파일로만 결과가 응답되는가?

  • 데이터만 내려 줄 때가 더 많다.
  • 이때 사용되는 형식이 JSON

 

 

2. HTML 기초

  • 웹의 뼈대인 HTML
  • HTML 크게 <head> 영역과 <body>영역으로 이루어져 있다.
  • head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다
😎 head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 
  • head 안에 들어가는 대표적인 요소들: meta, script, style, link, title 등
  • body 안에 들어가는 대표적인 요소들: span, img, input, textarea 등

 

 

 

3. CSS 기초

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

 

꾸미기 위해서는 지칭할 수 있는 대상이 중요

  • html 태그에 class 로 명찰을 지정
<h1 class="mytitle">로그인 페이지</h1>
  • mytitle라는 클래스를 가리킬 때, <head> 태그 안 <style> 태크에 .mytitle { } 라고 써줘야 함
<!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>
        .mytitle {
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p>ID: <input type="text" /></p>
    <p class="mytitle">PW: <input type="text" /></p>
    <button> 로그인하기</button>
</body>
</html>

 

 

부트스트랩 CDN 

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

 

 

부트스트랩

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

 

 

 

 

 

 

 

티스토리툴바