서버/클라이언트/웹의 동작 개념
1) 웹의 동작 개념 (HTML을 받는 경우)
👉 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는" 것입니다. 즉, 브라우저가 하는 일은
1️⃣ 요청을 보내고, 2️⃣ 받은 HTML 파일을 그려주는 일 뿐이죠.
👉 그렇다면 1️⃣은 어디에 요청을 보낼까?
서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보냄
ex) https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!
2) 웹의 동작 개념 (데이터만 받는 경우)
👉 공연 티켓을 예매하고 있는 상황을 상상해봅시다! 좌석이 차고 꺼질때마다 보던 페이지가 리프레시 되면 난감하겠죠ㅠ?
이럴 때! 데이터만 받아서 받아 끼우게 된답니다.
HTML, CSS 기본 내용
1) HTML과 CSS의 개념
간단하게 HTML : 뼈대, CSS : 꾸미기
HTML
HTML은 크게 head와 body로 구성
- head안에는 페이지의 속성 정보를 담음.
➡️ head 안에 들어가는 대표적인 요소들: meta, script, link, title 등
- body안에는 페이지의 내용을 담음.
☘️ 코딩시 맥북 줄맞춤 단축키
줄맞춤 command + option + L
일반적 탭(오른쪽) : tab
왼쪽으로 탭 되돌리기 : shift + tab
CSS 기초
- html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음.
- CSS 사용법
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭 기억하기!
- 자주 사용하는 CSS
| 배경관련 | background-color | background-image | background-size | |
| 사이즈 | width | height | ||
| 폰트 | font-size | font-weight | font-family | color |
| 간격 | margin(바깥여백) | padding(안쪽여백) |
폰트, 주석
1) 폰트
- 구글 웹폰트 : https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2) 주석
주석은 언제 사용할까?
첫번째 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
두번째 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용
➡️ 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것
단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
부트스트랩, 예쁜 CSS 모음집
부트스트랩이란?
예쁜 CSS를 미리 모아둔 것
부트스트랩 컴포넌트 5.0
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
이모티콘 모음
https://kr.piliapp.com/facebook-symbols/
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
Javascript 맛보기
자바스크립트란?
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
Java와 Javascript는 어떤 차이?
인도와 인도네시아.. 바다와 바다코끼리..
즉 아무 관련 없음.
Javascript 기초 문법 배우기(1)
크롬 개발자도구 콘솔창은 어떤 의미?
띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다. 새로고침하면 모두 사라짐.
맥 콘솔 단축키: alt(option) + command + i
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다. (개발자가 결과값을 보기 편하도록)
변수
변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
let으로 변수를 선언합니다.
ex) let num = 20
num = 'Bob'
변수는 값을 저장하는 박스예요.
한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
리스트
순서를 지켜서 가지고 있는 형태입니다.
딕셔너리
키(key)-밸류(value) 값의 묶음
Javascript 기초 문법 배우기(2)
1) 함수
- 기본 생김새
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
함수이름(필요한 변수들);
- 예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
2) 조건문
- 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
- if, else if, else if, else if else
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
3) 반복문
- 예를 들어 0부터 99까지 출력해야 하는 상황이라면
for (let i = 0; i < 100; i++) {
console.log(i);
}