브라우저
브라우저는 요청을 보내고 받은 HTML을 그려주는 것이다.
즉 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려준다.
요청은 어디에 보내는 건가요?
서버가 만들어둔 API라는 창구에 미리 정해진 약속대로 요청을 보내는 것이다.
우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML
파일을 돌려주고 브라우저는 받은 것을 화면에 그려준다.
그렇다면 항상 HTML 파일로 돌려주는가?
데이터만 내려줄 때가 더 많다. HTML 파일의 코드도 결국 데이터이다.
웹페이지의 형태로 보여주는 것이 아닌 JSON이라 해서 데이터만 보여줄 수도 있다.
HTML
HTML은 웹의 뼈대를 잡아준다. 웹의 전반을 HTML을 통해서 작성할 수 있다.
CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드이다.
HTML은 크게 head와 body로 구성되어 있는데,
head 안에는 페이지의 속성정보, body 안에는 페이지의 내용을 담는다.
간단한 로그인 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인</button>
</body>
</html>
id와 class
여러개를 선택할 때는 class, 하나를 선택할 때는 id를 사용한다.
class인 경우 .을 사용/ id인 경우 #을 사용
body에 class = “A” 이면 style에 .A {}
body에 id = “A” 이면 style에 #A {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인 페이지</title>
<style>
.mytitle {
color: red;
font-size: 40px;
}
/* #id {
color: purple;
} */
.mytxt {
color: seagreen;
}
.mybtn {
color: white;
background-color: royalblue;
font-size: 12px;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p id="id" class="mytxt">ID: <input type="text" /></p>
<p class="mytxt">PW: <input type="text" /></p>
<button class="mybtn">로그인</button>
</body>
</html>
CSS
HTML 태그를 꾸며줄 때 사용
선택자로 꾸며주고 싶은곳에 명찰을 달아준다.
속성과 속성값으로 어떤 값을 줄지 결정한다.
HTML 부모 자식 구조
HTML 태그는 누가 누구 안에 있느냐가 중요하다.
감싸고 있는 태그가 바뀌면 안에 있는 내용물이 영향을 받는다.
빨간 태그를 부모 태그라 하고, 초록 태그를 자식 태그라고 해서 부모자식관계로 포함 관계를 나타낸다.
버튼 태그 입장에서는 초록 태그가 부모 태그이고, 버튼 태그가 자식태그가 된다.
빨간 태그안에 초록, 파랑 태그가 들어있어서 빨간 태그를 가운데로 옮기면 초록, 파랑 태그도 같이 옮겨진다.
초록 태그의 글씨 색을 바꾸면 버튼1의 글씨 색도 바뀐다.
FLEX
html은 기본적으로 박스 형태이다.
block : 1줄을 모두 차지하며 위에서 아래로 쌓이는 규칙을 가지고 있다.
inline : 왼쪽에서 오른쪽으로 가로로 배치된다, 글자의 영역만큼만 크기 차지
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</body>
container : 부모 태그
box : 자식 태그
flex는 무조건 부모 태그에 작성해야 한다.
1)
.container {
background-color: yellow;
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
}
2) justify-content를 하면 가로 방향으로 가운데 정렬 한다.
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
justify-content: center;
}
3) align-item은 주축의 90도로 정렬된다.
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 가로 가운데, 세로 가운데 배치 */
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이라는 변수에 넣는다.
let num = 20
console.log(num)
리스트 [ ]
순서가 있는 자료
리스트 선언
let a_list = []
리스트는 순서가 있기 때문에 index로 값을 조회할 수 있다.
index는 0부터 시작된다.
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 출력
리스트에 요소 넣기
b_list.push("헤이")
console.log(b_list) //[1, 2, 'hey', 3, '헤이']
push는 리스트에 새로운 값을 추가시키는 것으로 추가한 값이 리스트의 가장 끝에 들어간다.
딕셔너리 { }
키(key)-밸류(value) 쌍으로 되어있다.
딕셔너리 선언
let a_dict = {}
딕셔너리의 키를 사용하여 그에 대응하는 값 밸류를 찾을 수 있다.
name은 bob, age는 2로 쌍으로 이루어져 있다.
키는 중복이 되면 안되며, 문자열이어야 한다.
{'name' : 'bob', 'age' : 2}
ex)
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} 출력
함수
특정 문자로 문자열을 나누고 싶을 때
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
함수 선언
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
ex)
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
console.log(sum(3, 5)); // 8 출력
console.log(sum(4, -1)); // 3 출력
