웹 동작의 개념
웹페이지는 서버에서 미리 준비해두었던 것을 서버에서 받아서 보여주는 것.
브라우저의 역할 = 서버에 요청하고 받아와서 보여주기
HTML -> 뼈대
CSS -> 꾸미는거(폰트,로고,디자인)
자바 스크립트 -> 움직이는 것
HTML
- head
페이지의 속성 정보
meta, title, style 등등이 있음
- body
페이지에 보이는 모든 것들
텍스트,버튼 등등
CSS
- 작성법
<head> ~ </head> 안에 <style> ~ </style>을 넣어 작성한다.
- 자주 사용하는 css
배경 관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-family color
color
간격
margin - 외부 간격
padding - 내부 간격
내용정렬
flex-direction 은 column으로 바꾸면서 사용한다.
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
모바일처리
width : 500px일 경우 웹/모바일 환경 모두 width:500px 고정
화면 폭 500px 보다 작을경우 95%로 맞추다가 500px을 넘으면 500px로 고정
max-width : 500px;
width: 95%;
백그라운드 이미지
background-image: url("");
background-position: center;
background-size: cover;
주석 달기
ctrl + /
- CSS의 파일 분리
style 영역이 너무 길어지면 보기가 어렵기 때문에 css파일을 같은 폴더에 만들고
head 태그에서 불러올 수 있다.
부트 스트랩
- 부트 스트랩이란
예쁜 CSS를 모아둔 것.
body 영역에 들어가며 부트스트랩 적용은 CSS 파일 분리와 원리가 동일하다.
CSS의 파일이 인터넷에 있는 것일 뿐.
자바 스크립트
자바와 자바 스크립트는 다른 것. 연관 없음
자바 스크립트는 크롬 페이지의 오른쪽클릭-검사-console로도 사용 가능하다.
자바 스크립트의 큰 틀에는
변수, 자료형, 함수, 조건문, 반복문이 있다.
alert
알람이 창으로 뜨는것
console. log
콘솔창에만 띄워주는 것
- 리스트
순서를 지켜서 가지고 있는 형태
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 b_dict = {'name': 'Bob', 'age': 21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
- 함수
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
- 조건문
function is_adult(age) {
if (age > 20) {
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12) //청소년이에요 출력
- 반복문
a_list만 변경하면서 사용
let a_list = ['사과' , '배' , '감' , '딸기']
for (let i = 0; i < a_list.length; i++) {
console.log(a_list[i])
}