스파르타 코딩클럽_항해99_웹개발 종합반_1주차

배경관련 background-color / background-image / background-size
사이즈 width / height
폰트 font-size / font-weight / font-family color
간격 margin padding

📣margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 - div에 색깔을 넣고, 직접 사용해서 차이를 비교해보기 !

✅가운데로 온다는 것은 양쪽 여백이 같아진다는 것 !

width를 주고, margin: auto를 사용하기! 그래도 안되면? display:block을 추가!

✅background은 항상 3줄이 같이 쓰인다고 생각 !

background-image
background-size
background-position

◾폰트,주석
▪폰트적용
구글 웹폰트:https://fonts.google.com/?subset=korean

1)[ + Select this style ]을 클릭
2)link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣기

ex)

<!-- HTML에 이 부분을 추가하고 --> <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

/ CSS에 이 부분을 추가하면 완성! /

• { font-family: 'Jua', sans-serif; }
  *{} --> 전체에 적용시키겠다.

▪주석
컴퓨터는 읽지 않지만 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을때, 코드에 대한 설명을 붙여두고 싶을 때 사용.
단축키->cmd+ /

◾부트스트랩
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많음)

->남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 게 답!

https://getbootstrap.com/docs/5.0/components/buttons/

✅이미지 어둡게 하기(이미지 위에 텍스트 입력 시 잘보이도록)
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

✅이모티콘 모음
https://kr.piliapp.com/facebook-symbols/

✅그림자 효과
box-shadow: 0px 0px 3px 0px gray;

✅약간의 모바일 처리를 해두기->모바일에서는 "가로 사이즈"가 가장 문제 !
-어디서나 500px 로 맞춰라 (width: 500px)
-화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면?
width: 95%;
max-width: 500px;

◾자바스크립트
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.

▪자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기

1)함수를 만들어두기
ex) function hey(){
alert('안녕!'); }

2) ~ 안에 로 공간을 만들기, 내에 자바스크립트를 작성

3)버튼에 함수를 연결하기. 버튼을 누르면 함수가 불린다.
영화 기록하기

[크롬 개발자도구]를 열어서, console 탭에 작성하기

그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능! 크롬 개발자도구 콘솔창은 어떤 의미? > 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구, 새로고침하면 모두 사라짐 !

단축키->alt(option) + command + i

▪console.log(변수)
-console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해준다. 개발자가 결과값을 보기 편하도록!
-console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있다.

▪변수 & 기본연산
-변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
-let으로 변수를 선언한다.

let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

✅사칙연산, 그리고 문자열 더하기가 기본적으로 가능함

  
let a = 1
let b = 2

a+b // 3
a/b // 0.5

let first = 'Bob'
let last = 'Lee'

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

▪리스트 & 딕셔너리
✅리스트: 순서를 지켜서 가지고 있는 형태

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 is_adult(age){

if(age > 20){ alert('성인이에요')

} else {

alert('청소년이에요')}
}
is_adult(25)

▪반복문
예를 들어 0부터 99까지 출력해야 하는 상황이라면!
console.log(0) console.log(1) console.log(2) console.log(3) console.log(4) console.log(5) ... console.log(99) // 이렇게 쓰기엔 무리가 있음 -> 반복문의 존재 이유 !

for (let i = 0; i < 100; i++) {
console.log(i);
}

for (1. 시작조건; 2. 반복조건; 3. 더하기) { 4. 매번실행 } 1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 와 같은 순서로 실행됩니다. i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옴.

🍋느낀점 : CSS까지는 눈에 바로바로 보이니 너무 재밌었다. 기초강의지만 스피드 있고 딱 포인트만 알려줘서 지루하지 않고 하루만에 1주차 모두 완강 ! 특히 실습 할 수 있게 예제랑 수업자료가 잘 되어있어서 연습하기 수월했다. 자바스크립트 부터는 아예 처음 접해보는 개념이라 뭐가 뭔지 하나도 모르겠지만.....특히 함수,조건문,반복문 부분은 거의 눈뜨고 보기만 했다. 미세먼지 예제는 왜인지 적용이 안되서 답답했다😢 숙제하면서 CSS 배경크기 지정이 뜻대로 안되서 진땀났지만 구글링해보고 하면서 해결되니 뿌듯 ! 이거 때문에 개발하는 건가..?!싶었다. 모든게 처음이라 낯설고 힘들지만 이런 뿌듯함 감정 계속 느낄 수 있도록 열심히 공부해야지 !