1. 서버와 클라이언트
서버: 유저가 보는 웹사이트에 뿌려줄 것 (html이나 데이터)
클라이언트: 유저가 웹사이트를 보는 도구 (휴대폰, PC, 아이패드 등등..)
1. 웹의 동작 개념:HTML을 받는 경우
웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서" , "그려주는" 것!
즉 브라우저가 하는 일은 1)요청을 보내고, 2) 받은 HTML을 그려주는 일을 합니다.
여기서 브라우저가 요청을 보내는 곳은 서버가 만들어 놓은 "API" 라는 창구에 요청을 보내는 것입니다.
ex) https://google.com/
-> "google.com" 이라는 이름의 서버에 있는 "/"창구에 요청을 보낸 것!
API
: Application Programming Interface 의 줄임말로,
운영체제와 응용프로그래밍 사이의 통신에 사용되는 언어나 메세지 형식을 말하며,
쉽게 말해 프로그램들이 서로 상호작용하는 것을 도와주는 매개체라고 볼 수 있습니다.
2. 웹의 동작 개념:데이터만 받는 경우
그렇다면 항상 HTML만 내려주나요?
-> ❌아니요! 데이터만 내려 줄 때가 더 많습니다! (HTML도 줄글로 쓰면 데이터!)
ex) 콘서트 예매창에서 실시간으로 티켓이 구매되면서 좌석이 사라질 때
이럴 때! 데이터만 받아서 끼우게 됩니다.
데이터만 내려오는 경우의 동작 형식.
이런 생김새를 JSON 형식이라고 합니다.
JSON(JavaScript Object Notation)
:경량의 DATA 교환 형식으로 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다.
2. HTML
HTML(Hypertext Markup Language)은 프로그래밍 언어가 아닌 마크업언어입니다.
웹 문서를 만들기 위해서 사용하는 가장 기본적인 언어로,
하이퍼텍스트를 작성하기 위해 개발된 언어이며 퍼블릭 도메인, 즉 저작권이 없는
무료 언어이자 클라이언트 사이드 개발에 사용되는 언어입니다.
HTML은 구역과 텍스트를 나타내는 코드로 웹페이지의 뼈대라고 생각하면 됩니다.
즉 웹 페이지에 정보를 담아 표시하기 위한 마크업 언어
마크업(markup)
: 마크업은 "Markup" 말 그대로 "표시한다" 라는 의미로
문서 처리의 원활한 지원을 위해 문서에 추가되는 약속된 정보를 표현하는 언어입니다.
- HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body 안에는
페이지의 내용을 담습니다.
* head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
CSS
CSS는 간단하게 설명하면 HTML 태그로 웹 문서를 작성하면 CSS style로 문서의 스타일을 꾸미는 것입니다!
CSS의 사용법 < head > ~ < /head> 안에 < style > ~ < /style >로 공간을 만들어 작성합니다.
- React에서의 CSS
/* id selector */
#id { ... }
/* class selector */
.class { ... }
/* tag selector */
tagName { ... }
/* 여러 요소 선택하기 */
#id, .class { ... }
/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
button:hover { ... }
-
margin box:
가장 바깥 영역입니다. margin 속성을 주면 이 영역이 바뀌어요.
주로 다른 요소들과 간격을 줄 때 사용합니다 -
border box:
테두리 영역입니다. border 속성으로 테두리를 주면 이 영역이 바뀝니다. -
padding box:
테두리와 콘텐츠 사이 영역입니다. padding 속성을 주면 이 영역이 바뀌어요.
박스 내부의 간격을 줄 때 사용합니다. -
contents box:
실제 콘텐츠 영역입니다. width, height 등으로 사이즈를 줄 수 있고, 따로 지정하지 않을 경우는 콘텐츠 내용(글이나 이미지 등)에 따라 임의로 사이즈가 잡힙니다.
.todo-card {
border: 1px solid gray;
border-radius: 5px;
padding: 2em;
margin: 1em;
}