웹 브라우저 원리
브라우저는 서버에서 미리 준비해둔 걸 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할을 한다.
요청을 보내고 받은 HTML 파일을 그려주는 거.
우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려준다.
예 : https://naver.com/
> 여기서 naver.com이라는 이름의 서버에 있는 / 라는 곳에 요청을 보낸 거다.
> 네이버에서 요청을 보냈으니깐 그에 대한 대답으로 네이버 홈에 해당하는 HTML 파일을 준 거다.
그런데 항상 HTML 파일로 내려주는 건 또 아니다.
데이터만 내려줄 때가 더 많다.
만약 우리가 영화 티켓을 예매하고 있는 상황에서 좌석이 실시간으로 매진 될 때마다 페이지가 새로고침되면 예약하기 어렵지 않을까? 그래서 데이터만 받아서 갈아끼우는 식으로 작동하게 함.
실제로 많은 웹서비스에서 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아끼워준다. 데이터만 내려올 경우 JSON 형식으로 받을 수 있다. (JSON은 나중에 배운다.)
HTML,CSS의 기본
HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드. 웹의 전반을 HTML을 통해서 작성할 수 있다.
CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 꾸며주는 코드이다.
HTML 내 style 속성으로 꾸미기를 할 수 있긴 하지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었다. HTML 코드 내에 CSS 파일을 불러와서 적용한다.
HTML은 뼈대, CSS는 꾸미기
html:5를 vs code의 ~.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>
</head>
<body>
</body>
</html>여기서 보면 head 부분과 body 부분이 보이는 데
head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다. 즉, 눈에 안 보이는 필요한 걸 담는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>div는 구역
p는 문단
h1은 제목을 나타내느 태그
h2는 소제목
hr 태그는 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용한다.
..
직접 보면서 하는게 낫겠다.
위의 사진과 코드 블럭을 비교하면 될 거 같다.
그런데 코드가 난잡하면 보기도 힘드니깐
Shift + Alt + F 로 정리해주면서 하자. (Windows 만 해당/ Mac은 Shift + Option + F)
'웹 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 1주차 복습 (폰트 적용) (0) | 2023.03.05 |
|---|---|
| 웹개발 1주차 복습 (CSS) (1) | 2023.03.05 |
| 웹개발 4주차 (2) (0) | 2023.02.13 |
| 웹개발 4주차 (1) (0) | 2023.02.12 |
| 웹개발 이거 다 끝나면 (1) | 2023.02.10 |