* 웹의 기본 동작 방식
웹은 기본적으로 사용자 요청에 의해 시작된다. 사용자가 클릭과 같은 특정 이벤트(Event)를 발생시키면 해당 요청이 서버로 전송된다. 서버에서는 필요한 데이터를 데이터베이스에 요청하고 데이터베이스는 데이터를 서버에 전송한다. 마지막으로 서버는 사용자가 요청한 데이터를 클라이언트(브라우저)로 보낸다.
* 과거의 웹 VS 현대의 웹
과거에는 사용자가 요청을 하면 서버는 HTML 문서 전체를 브라우저로 전송하고 브라우저는 HTML 문서를 해석해서 G화면에 렌더링했다. 그러나 현대에는 리액트 웹 프레임워크와 같은 SPA(Single Page App)이 주를 이룬다. SPA은 사용자 요청이 오면 초기에 HTML 문서를 한번만 전송하고 웹 화면의 변경이 필요하면 서버에서 데이터만 가져와서 새로운 데이터로 브라우저 화면을 그린다. 예) 토익 문법문제
* HTML, CSS, JAVASCRIPT 가 하는 역할
HTML은 브라우저 화면에 정적 문서를 보여준다. CSS는 브라우저 화면을 디자인한다. JAVASCRIPT는 사용자 인터렉션을 담당한다.
* 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>
<button>클릭</button>
<img src="" alt=""/>
</body>
</html>HTML은 Tag들로 이루어져있다. 시작태그와 종료태그가 모두 존재하는 button과 시작태그만 존재하는 img 태그가 있다. 시작태그와 종료태그로 묶인 그룹을 요소(Element)라고 한다. 또한, img 태그의 src alt 처럼 속성(attribute)을 가지고 있다. 속성은 속성 이름과 속성값의 쌍으로 구성되어 있다.
* CSS 기본구조
img{
width: 100%;
}
.list{
color: white;
}
#item{
text-align: center;
}CSS는 선택자(selector)가 있다. {} 내부에는 속성이름과 속성값의 쌍으로 이루어져 있다. 선택자는 태그 이름이 될수도 있고, 클래스 이름이 될수도 있고, 아이디명이 될수도 있다. 점(.)은 클래스 선택자이고, 샵(#)은 아이디 선택자이다.
* 리액트에서 자주 사용하는 HTML 태그
<div> <h1> <h2> <ul> <li>
<a> <p> <button> <input>
<span> <img> <link> <style>
<html> <head> <body> <title>div 태그는 웹화면의 레이아웃을 구현할때 자주 사용한다. h1, h2는 문서의 헤드라인이나 서브 헤드라인 주제를 보여줄때 사용한다. ul, li는 리스트(목록)을 보여줄때 사용한다. a 태그는 클릭시 다른 웹사이트로 이동할때 사용한다. p 태그는 문장의 단락을 나눌때 사용한다. button은 사용자 클릭 요청을 처리한다. input은 사용자의 데이터 입력을 처리한다. img는 이미지를 보여줄때 사용한다. link는 CSS 파일을 가져올때 주로 사용한다. style은 HTML 문서 내에서 CSS 구문을 사용할때 활용한다. 나머지 태그들은 HTML 기본 뼈대를 구성하는 태그들이다.
* 웹사이트에서 HTML CSS JAVASCRIPT 코드 확인하기
F12키를 누르면 개발자 도구가 나오며 Elements 탭에서 코드를 확인할 수 있다. 개발자 도구는 모든 브라우저에 다 있으며, 웹사이트를 개발할때 디버깅 도구로 유용하게 사용된다.
Do it! 인터랙티브 웹 페이지 만들기
이 책에 나온 HTML, CSS, 자바스크립트만 알아도 충분하다! 비전공자도 만드는 최신 프런트엔드 웹 사이트 8가지! 최신 프런트엔드 웹 디자인은 물론 인터랙티브 웹 사이트 8개를 한 번에 완성할 수
www.youtube.com
'웹 (web)' 카테고리의 다른 글
| 자바스크립트 엔진과 런타임 (1) | 2024.04.16 |
|---|---|
| 인터넷 용어 - ipconfig 의 기본게이트웨이와 서브넷마스크 (1) | 2024.01.22 |