웹 브라우저 원리
브라우저의 역할 : 서버로 문의HTML 파일 보내기 및 받기 그냥 그려 하다.
요청은 주어진 약속에 따라 서버에서 생성한 API로 전송됩니다.
요청 예) https://naver.com/
“naver.com”이라는 이름의 서버에서 “/” 주소창으로 요청 보내기
우리가 보는 브라우저는 주소를 통해 API에 요청하고 API는 요청에 해당하는 HTML 파일을 반환하며 브라우저는 수신된 콘텐츠를 화면에 그립니다.
항상 HTML 파일을 반환하지는 않습니다. 예를 들어 데이터만 실패하는 경우가 많습니다.
영화 예매 시 실시간으로 좌석이 매진될 때마다 보고 계신 페이지가 업데이트되어 예매가 어려워집니다.
따라서 데이터를 수신하고 교체하는 것만으로 작동합니다.
즉, API에 요청을 보내면 서버의 데이터베이스에서 데이터가 반환되고 브라우저는 이를 JS 언어로 변환합니다.
로컬 개발 환경: 서버를 만들고 컴퓨터를 사용하여 요청 보내기(클라이언트 = 서버)
HTML, CSS 기초
HTML: 해골CSS: 보석류JS: 이동
HTML – 웹의 뼈대를 구성하는 영역을 나타내는 코드
CSS – HTML로 작성된 스켈레톤 속성 선택장식하는 코드
HTML에서 style 속성으로 꾸밀 수 있지만 일반적으로 HTML에서 CSS 파일을 불러와서 적용합니다.
HTML 기초
바탕 화면에 폴더를 만들고 VSCode에서 액세스하는 방법
! + Enter 또는 html:5를 클릭하여 스켈레톤을 자동 완성합니다.
HTML은 헤드와 바디로 구성됩니다.
페이지 헤드에서 속성 정의 또는 필수 스크립트 호출페이지 본문 내 세부 사항포함
신체의 대표 요소
<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="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>
결과
로그인 페이지 만들기
줄 바꿈은 자동으로 발생하지 않으므로 섹션과 단락을 나누는 것이 중요합니다.
<h1>로그인 페이지</h1>
<p>ID: <input type="text"></input></p>
<p>PW: <input type="text"></input></p>
<button>로그인하기</button>