웹 브라우저 원리
요청 - 클라이언트가 서버가 만들어 놓은 API 따라 정보를 전송하는 것
API - 소프트웨어 간의 상호작용을 위한 규칙
클라이언트는 URL을 이용해 서버에 요청을 보낸다. (클라이언트 = 서버로부터 정보를 제공받는 컴퓨터)
이때, 클라이언트는 서버에 위치한 디렉토리 또는 파일의 이름을 지정하게되는데, 해당 서버에 요청이 수신되면 서버는 요청 내용을 분석하고, 적절한 응답을 생성하여 클라이언트에게 반환한다.
브라우저의 역할 - 클라이언트가 서버의 API로 요청을 보내면 해당 요청에 대한 HTML파일을 받아 해석해서 클라이언트의 화면에 그려준다.
※ 항상 HTML 파일을 돌려주는 것은 아니다. 데이터만 내려줄 때가 더 많다.
예를 들어, 영화를 예매하려고 할 때 좌석이 실시간으로 매진될 때마다 페이지가 새로고침되면 예약하기가 어려워진다. 따라서 데이터만 받아서 갈아끼우는 방식으로 작동한다. 즉, API로 요청을 보내면 서버의 DB에서 데이터를 돌려주고, 브라우저는 JS언어로 갈아 끼워준다.
서버가 요청을 처리 하는 일반적인 방법
1. 클라이언트에서 요청한 데이터를 DB에서 검색하여 해당 데이터를 클라이언트에게 반환
2. 클라이언트가 서버에 데이터를 전달하면 서버는 데이터를 받아들인 후 사전에 작성한 규칙에 따라 데이터를 처리 후 응답 ex) DB에 저장하거나, 다른 서버로 데이터를 전송
로컬 개발환경: 컴퓨터 한 대로 클라이언트와 서버 역할을 모두 수행하는 환경
HTML,CSS 기본 내용
HTML: 구조, CSS: HTML꾸미기, JS: 동적인 웹 페이지
HTML - 웹페이지의 구조를 만드는 코드로
CSS - HTML을 통해 작성된 구조에 속성을 선택해 꾸며주는코드
HTML 코드 내에 style 속성을 사용하여 CSS를 적용할 수 있지만, 일반적으로는 HTML 코드 내에서 CSS 파일을 불러와 적용
HTML 기초
! + Enter 또는 html:5를 클릭하면 자동으로 완성
HTML은 head와 body로 구성된다.
head는 페이지 속성을 정의하거나 필요한 스크립트를 부르고, body는 페이지의 내용을 담는다.
HTML은 줄 바꿈이 자동으로 안되므로 구역과 문단을 나누는 것이 중요하다.
body 안에 들어가는 대표적인 요소
<body>
<!-- 구역을 나누는 태그들 -->
<div>구역</div>
<p>문단</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>제목을 나타내는 태그. 페이지마다 하나씩 꼭 사용 권장. 구글 검색 유리</h1>
<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="url주소" />
<hr>
input 태그: <input type="text" />
<hr>
button 태그: <button> 버튼</button>
<hr>
textarea 태그: <textarea>입력</textarea>
</body>
로그인 페이지 만들어 보기
<h1>로그인 페이지</h1>
<p>ID: <input type="text"></input></p>
<p>PW: <input type="text"></input></p>
<button>로그인하기</button>'[스파르타 코딩클럽] > 비개발자를 위한, 웹개발 종합반' 카테고리의 다른 글
| Fetch연습2 (0) | 2023.02.20 |
|---|---|
| 서버-클라이언트 통신(GET,POST)/JSON/Fetch연습 (0) | 2023.02.20 |
| JavaScript 기초/split/JQuery기초/append (0) | 2023.02.20 |
| 부트스트랩/github에 파일 업로드 (0) | 2023.02.19 |
| CSS기초/구글 웹폰트 사용법 (0) | 2023.02.19 |
