웹의 동작 개념
-
우리가 흔히 보는 웝 페이지는 서버에서 준비해두었던 것을 받아 부라우저에서 우라기 볼 수 있도록 그려주는 역할을 한다. 즉 브라우저는 요청을 보내고 받은 HTML 파일을 그려준다. 그럼 요청은 어디로 보내는걸까 ? 그건 바로 서버가 만들어 놓은 API(Application Programming Interface) 라는 창구에 미리 정해진 약속대로 요청을 보내는 것이다. 우리는 평소에도 웹을 쓰는 동안 주소 창에 주소를 입력하고 엔터를 입력하는 것으로 몇 번이고 요청을 보낸다.
예시) https://naver.com/
위의 예시는 “naver.com”라는 이름의 서버에 있는 “/”라는 주소 창구에 요청을 보낸 것이다.
네이버에서 그 대답으로 네이버 홈에 해당하는 HTML 파일을 준다고 보면 된다.
우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일 돌려주고 브라우저는 받은 것을 화면에 그려주는 것이다. -
실제로 많은 웹 서비스에서는 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아 끼워준다.
HTML 기초
- html은 웹페이지에서 뼈대를 담당한다. 웹의 전반을 바로 이 html을 통해 작성할 수 있다.
- CSS는 HTML을 통해 작성된 뼈대에 살을 예쁘게 붙여주는 코드들이다. 하지만 CSS를 잘 사용할 줄 아는 것과 '예쁘게' 만드는 것은 다른 영역이기 때문에 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 된다.
-VS CODE(Visual Studio Code)는 마이크로소프트 사에서 개발한 코드 에디터로 코딩하는데 효율적인 프로그램중 하나이다. 이 VS CODE 에 html:5를 입력해주면 우리가 흔히 들락날락 거리는 웹의 html 뼈대가 번쩍하고 만들어진다!
- HTML은 크게 영역과 영역으로 이루어져 있다. 이러한 head안에는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부르며, body안에는 페이지의 내용을 담는다.
간단한 로그인 페이지 만들어 보기
- 간단한 로그인 페이지를 직접 한번 만들어보자 ! 먼저 VS CODE 에서 html:5 입력해 html뼈대를 만들어 준 뒤 body 부분에 h1태그를 통해 제목을 입력해준다. 그 후 문단 태그인 p태그를 통해 ID와 PW의 INPUT 태그를 TEXT 타입으로 입력을 받아 BUTTON태그로 마무리 해주면 간단한 로그인 페이지 완성 !
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>로그인</title> </head> <body> <h1>로그인 페이지</h1> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button>로그인하기</button> </body> </html>
CSS 기초
- CSS는 HTML을 통해 작성된 뼈대에 살을 붙여주는 코드들로 head와head 사이안에 style 태그로 공간을 만들어 작성한다.
주요 css 종류
배경관련
background-color
background-image
background-size사이즈
width
height폰트
font-size
font-weight
font-family
color간격
margin
padding
TIL