# gpt로 웹개발 1 (브라우저, HTML, CSS, FLEX, JavaScript 문법)
## 브라우저
브라우저는 요청을 보내고 받은 HTML을 그려주는 것이다.
즉 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려준다.
**요청은 어디에 보내는 건가요?**
서버가 만들어둔 API라는 창구에 미리 정해진 약속대로 요청을 보내는 것이다.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707814795108/d3e09772-9240-4cd5-9c17-df6f7d35a530.png align="center")
우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML
파일을 돌려주고 브라우저는 받은 것을 화면에 그려준다.
**그렇다면 항상 HTML 파일로 돌려주는가?**
데이터만 내려줄 때가 더 많다. HTML 파일의 코드도 결국 데이터이다.
웹페이지의 형태로 보여주는 것이 아닌 JSON이라 해서 데이터만 보여줄 수도 있다.
---
## HTML
HTML은 웹의 뼈대를 잡아준다. 웹의 전반을 HTML을 통해서 작성할 수 있다.
CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드이다.
HTML은 크게 head와 body로 구성되어 있는데,
head 안에는 페이지의 속성정보, body 안에는 페이지의 내용을 담는다.
**간단한 로그인 페이지 만들기**
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707815050791/dade5a62-eeb4-4388-be06-ee77b8393697.png align="center")
```plaintext
로그인 페이지
로그인 페이지
ID:
PW:
```
### id와 class
여러개를 선택할 때는 class, 하나를 선택할 때는 id를 사용한다.
class인 경우 .을 사용/ id인 경우 #을 사용
body에 class = “A” 이면 style에 .A {} body에 id = “A” 이면 style에 #A {}
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707815398526/ff953a84-d020-460c-89d0-88e182fff8ec.png align="center")
```plaintext
로그인 페이지
로그인 페이지
ID:
PW:
```
---
## CSS
HTML 태그를 꾸며줄 때 사용
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707815082730/174ac12f-3622-4c53-af13-72f6a88253d3.png align="center")
1. 선택자로 꾸며주고 싶은곳에 명찰을 달아준다.
2. 속성과 속성값으로 어떤 값을 줄지 결정한다.
---
## HTML 부모 자식 구조
HTML 태그는 누가 누구 안에 있느냐가 중요하다.
감싸고 있는 태그가 바뀌면 안에 있는 내용물이 영향을 받는다.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707815887486/04e23e3e-24be-44a2-82f4-f5d7bb7bfd97.png align="center")
빨간 태그를 부모 태그라 하고, 초록 태그를 자식 태그라고 해서 부모자식관계로 포함 관계를 나타낸다.
버튼 태그 입장에서는 초록 태그가 부모 태그이고, 버튼 태그가 자식태그가 된다.
* 빨간 태그안에 초록, 파랑 태그가 들어있어서 빨간 태그를 가운데로 옮기면 초록, 파랑 태그도 같이 옮겨진다.
* 초록 태그의 글씨 색을 바꾸면 버튼1의 글씨 색도 바뀐다.
---
## FLEX
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707815936287/e20151aa-4e88-447b-b8b7-8a5d811a8737.png align="center")
html은 기본적으로 박스 형태이다.
block : 1줄을 모두 차지하며 위에서 아래로 쌓이는 규칙을 가지고 있다.
inline : 왼쪽에서 오른쪽으로 가로로 배치된다, 글자의 영역만큼만 크기 차지
```plaintext
1
2
3
texttexttext
```
> container : 부모 태그
>
> box : 자식 태그
>
> flex는 무조건 부모 태그에 작성해야 한다.
1)
```plaintext
.container {
background-color: yellow;
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
}
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707816118546/b4642908-feab-4f7f-b641-c9671e42732f.png align="center")
2) justify-content를 하면 가로 방향으로 가운데 정렬 한다.
```plaintext
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
justify-content: center;
}
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707816163207/6ac3fdfd-45c5-4972-aad3-fbce5cbf9b71.png align="center")
3) align-item은 주축의 90도로 정렬된다.
```plaintext
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707816192194/8d4da879-c6f2-4832-8753-cb24027f557f.png align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1707816221098/16a8959b-4bd1-4aa8-b595-fdeb4c827a15.png align="center")
```plaintext
/* 가로 가운데, 세로 가운데 배치 */
display: flex;
justify-content: center;
align-items: center;
```
---
### display : flex;
컨테이너로 만들어주는 역할
자식 요소들을 행이나 열 방향으로 배치하고, 크기 조절 가능
### justify-content : space-between;
서로 적당한 거리를 두고 늘어서게 함.
가장 왼쪽에 있는 것은 왼쪽 벽에 붙고, 가장 오른쪽에 있는 것은 오른쪽 벽에 붙고, 가운데 있는 것은 서로 같은 거리를 두고 늘어섬
### justify-content : center;
한줄로 만들어서 정중앙에 놓음
### align-items : center;
중앙에 모여서 늘어섬
### margin
요소 바깥쪽 공간으로 다른 요소와의 거리 조절 (테두리 밖)
### padding
요소와 테두리 사이의 거리를 조절
### flex-direction: column;
보통은 가로로 쌓이지만, flex-direction: column;를 쓰면 세로로 쌓인다.
첫번째 블록은 바닥에 그 다음 블록은 그 위에 이런식으로 세로로 쌓여 올라감
### height: 100vh;
vh = viewport height라 해서 화면 높이의 100%를 의미 → 화면높이 만큼 사각형을 키워준다.
### text-align: center;
텍스트를 가운데로 정렬한다.
### position: fixed;
웹페이지에서 요소 고정
스크롤을 해도 그 요소는 항상 같은 위치에 머무르게 된다.
그래서 사용자가 웹페이지를 어떻게 움직여도 그 요소는 항상 보이게 된다.
### width: 100%;
가로 길이가 100만큼 늘어난다.
푸터 영역이 width를 주지 않으면 글자기 때문에 가운데 배치가 안된다.
width: 100%; 을 해야 여백이 생기고 여백을 기준으로 가운데로 정렬할 수 있다.
---
## JavaScript 문법
### **변수**
값을 저장하는 공간.
변수 대입은 오른쪽에 있는 것을 왼쪽에 넣는 것으로 20을 num이라는 변수에 넣는다.
```plaintext
let num = 20
console.log(num)
```
### **리스트 \[ \]**
순서가 있는 자료
**리스트 선언**
```plaintext
let a_list = []
```
**리스트는 순서가 있기 때문에 index로 값을 조회할 수 있다.**
index는 0부터 시작된다.
```plaintext
let b_list = [1, 2, "hey", 3]
console.log(b_list[0]) //1 출력
console.log(b_list[1]) //2 출력
console.log(b_list[2]) //hey 출력
```
**리스트에 요소 넣기**
```plaintext
b_list.push("헤이")
console.log(b_list) //[1, 2, 'hey', 3, '헤이']
```
push는 리스트에 새로운 값을 추가시키는 것으로 추가한 값이 리스트의 가장 끝에 들어간다.
### **딕셔너리 { }**
키(key)-밸류(value) 쌍으로 되어있다.
**딕셔너리 선언**
```plaintext
let a_dict = {}
```
딕셔너리의 키를 사용하여 그에 대응하는 값 밸류를 찾을 수 있다.
name은 bob, age는 2로 쌍으로 이루어져 있다.
키는 중복이 되면 안되며, 문자열이어야 한다.
```plaintext
{'name' : 'bob', 'age' : 2}
```
**ex)**
```plaintext
let b_dict = {'name':'Bob','age':21}
console.log(b_dict['name']) //Bob 출력
console.log(b_dict['age']) //21 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
console.log(b_dict) // {name: "Bob", age: 21, height: 180} 출력
```
### **함수**
특정 문자로 문자열을 나누고 싶을 때
```plaintext
let myemail = 'abcde@gmail.com'
let result = myemail.split('@') // ['abcde','gmail.com']
console.log(result[0]) // 'abcde'을 출력
console.log(result[1]) // 'gmail.com'을 출력
let result2 = result[1].split('.') // ['gmail','com']
console.log(result2[0]) // gmail -> 알고싶던 것
console.log(result2[1]) // com
console.log(myemail.split('@')[1].split('.')[0])
// gmail
```
**함수 선언**
```plaintext
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
```
**ex)**
```plaintext
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
console.log(sum(3, 5)); // 8 출력
console.log(sum(4, -1)); // 3 출력
```