웹의 동작 개념
💡 브라우저의 역할
✔ 서버한테 요청하고
✔ 서버가 준 것을 받아 그대로 그려주는 역할 !
💡 웹의 동작 개념 (HTML을 받는 경우)
브라우저는 서버에게 요청을 보내고 받은 HTML파일을 그려준다.
이때 어디에 요청을 보낼까? 라는 생각을 하게 되는데,
서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것 !
예) Https://naver.com/ -> "naver.com"이라는 이름의 서버에 있는 "/"창구에 요청을 보냄
💡 웹의 동작 개념 (데이터만 받는 경우)
항상 HTML만 그려주는 것은 아니고 데이터만 내려주는 경우가 있다.
데이터만 받아올 경우에는 아래와 같은 "JASON"형식으로 받아 온다 !
HTML, CSS , Javascript
💡 HTML = 뼈대 (ex. 네이버 홈에 사전은 뉴스 옆에 있어)
💡 CSS = 예쁘게 꾸미기 (ex. 사전은 흰색글씨, 폰트사이즈는 10이야)
-> HTML 코드 내에 CSS 파일을 불러와서 적용한다.
💡 Javescript = 움직이는 것, 클릭하면 이동하는 것
HTML
💡 head와 body로 구성
- head
✔ 페이지의 속성 정보나 필요한 스크립트들을 부른다.
✔ 눈에 안 보이는 필요한 것들을 담는 곳
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>- body
✔ 페이지의 내용을 담는 곳
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>❕ 꿀팁
코드의 생김새를 쉽게 파악하기 위해 코드를 정렬하는 것은 매우 중요!!
pycharm 코드 자동정렬 : ctrl + alt + L
CSS
✔ html 태그는 부모-자식 구조가 중요하다. 나를 감싸고 있는 부모 태그가 바뀌면, 그 안의 내용물이 모두 영향을 받기 때문!
CSS 사용방법
✔ head안에 style로 공간을 만들어 작성
✔ .mytitle{ } 로 class를 지정하여 css를 먹인다~
<head>
<style>
.mytitle {
color: white;
}
</style>
</head>CSS 종류
# 배경관련
background-color
background-image
background-size
# 사이즈
width
height
# 폰트
font-size
font-weight
font-famliy
color
# 간격
margin # 바깥 여백주기
padding # 안쪽 여백주기폰트, 주석, 파일분리
폰트
✔ 구글 웹폰트 이용
https://fonts.google.com/?subset=korean
✔ head 부분에 link 태그를 복사!
✔ style부분에 CSS를 복사!
<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">/* CSS에 이 부분을 추가하면 완성! */
* {
font-family: 'Nanum Gothic', sans-serif;
}주석달기
✔ ctrl + /
✔ 코드에 대한 간단한 설명을 붙여두고 싶을때나 필요없어진 코드를 삭제하는 대신 작동하지 못하게 할 때 주석처리를 하면 컴퓨터가 읽지 않음.
css 분리
✔ style 부분이 너무 길어지다 보면 보기 불편하기 때문에 css파일을 분리하여 저장해둠
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">Bootstrap
💡 부트스트랩이란?
✔ 예쁜 css를 미리 모아둔 것!
✔ https://getbootstrap.com/docs/4.0/components/alerts/
💡 부트스트랩 시작 템플릿
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>JavaScript
💡 자바스크립트란?
✔ 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
✔ 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML + CSS + javascript를 준다.
💡 자바스크립트 사용방법
✔ head안에 script로 공간을 만들어 작성
✔ 함수를 만들어 둔다.
function hey(){
alert('안녕!');
}✔ 함수를 연결시키면 함수가 불리면서 자바스크립트가 동작
JavaScript 문법
❕ 이때
크롬 개발자도구 console탭을 이용한다. -> 단축키 f12
console탭은 띄워놓은 페이지에서 빠르게 자바스크립트를 test할 수 있도록 만들어 둔 도구!!
--
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!
console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.
console.log("Hello World!");변수 & 기본연산
✔ let으로 변수를 선언
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.리스트 & 딕셔너리
💡 리스트
✔ 순서를 지켜서 가지고 있는 형태
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력💡 딕셔너리
✔ key,value 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
// 예) 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3조건문
✔ if, else로 구성
// 20보다 작고 크다를 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)반복문
for (let i = 0; i < 100; i++) {
console.log(i);
} // i는 0부터 100까지 1씩 더하기를 반복!✔ 반복문 예제
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.✔️ 1주차 후기
말로만 듣던 HTML과 CSS에 대해 배워보았다.
HTML과 CSS은 가장 기본이 되면서 개발에 재미를 느낄 수 있는 부분이라고 해서 궁금했는데 드디어 직접 다뤄볼 수 있었다. 눈으로 직접 변화를 느끼면서 코드를 작성하기 때문에 신기하고 흥미로웠다!! 코드를 적다보면 나도 뭔가 컴퓨터 박사가 된듯 한 느낌이다ㅋㅋㅋㅋ껄껄^^
자바스크립트도 재미있지만 조건문, 반복문이 쪼금 헷갈리고.... 받아쓰기하는 느낌....
하지만 앞으로 익숙해지면 되겠지...?ㅎㅎㅎㅎ 코드가 손에 익숙해 지는 그날까지 화이팅!
