웹개발 종합반 1주차: HTML, CSS 기초 (ft. JS 한 스푼)

💬 개발일지를 쓰게 된 계기

스파르타 코딩클럽 웹개발 종합반을 수강하게 되었다. 정확히 말하면, 2년만에 다시(!) 수강하게 되었다. 2년 전에는 회사 업무에 필요한 기초 지식을 습득하기 위해서였지만, 이번에는 스파르타 코딩클럽의 개발자 부트캠프인 내일배움캠프를 수료하기 위해서 듣게 되었다. 목적이 완전히 달라진 만큼 이번에는 개발일지를 제대로 써보려고 한다. 개발일지에 작성할 항목은 다음과 같다.

✅ 개발일지 항목

• 수강 일자
• 오늘 새로 배운 내용
• 수업 내용 메모
• 이슈/고민 또는 이를 해결한 내용
• TO-DO LIST
  *향후 필요한 항목이 있으면 수정 및 추가하기

📜 오늘 새로 배운 내용

• 수강일자: 2022.10.17~19
• HTML/CSS 기초 배우기 (로그인 페이지, 영화 포스팅박스 만들기)
• 부트스트랩 사용법 배우기
• Javascript 기초 문법 배우기 (변수, 자료형, 함수, 반복문, 조건문)
• 숙제로 좋아하는 가수의 팬명록 페이지 만들기

💡 수업 내용 메모

◻ HTML

• h1: 제목을 나타내는 태그 (한번만 쓴다!)
• span: 특정 글자만 꾸미고 싶을 때

◻ CSS

이미지 꾸밀 때 기본 CSS

background-color
width
height

*background-color: 위치 조정을 위해서 사용 (배경에 임의의 색 지정)

이미지 조정 시 필수 CSS 세트

background-image: url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;

가운데 정렬 방법

가운데 정렬 = '바깥 여백이 모두 똑같다'는 의미
상하좌우 여백을 최대한으로 밀자!

display: block;
margin: auto;

• margin: 바깥 여백 (top부터 시계방향으로 적용)
• padding: 안쪽 여백!

전체 css탭에 효과를 줄 때

* {
  font-family: 'Gowun Dodum', sans-serif;
}

2개 이상의 요소를 가운데 정렬하는 CSS 세트

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

• column: 세로로 정렬 시
• row:가로로 정렬 시

이미지를 어둡게 처리하는 css

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://image.yes24.com/momo/TopCate884/MidCate006/88354724.jpg');

모바일 가로 사이즈 처리 방법

width: 95%;
max-width: 500px;

모바일은 가로 폭이 좁기 때문에 이미지가 잘려서 보일 수 있다
→ "최대 500px 까지는 95% 사이즈로만 보여주라"고 설정한다

◻ Javascript

• '변수/자료형/함수/조건문/반복문'만 알면 된다!
  

• 리스트 형태 (순서가 있는 형태)

let a_list = [] // 선언
a_list[] // 출력
a_list.push('') // 요소 추가

• 딕셔너리 형태: 키(key)-밸류(value) (고객별로 정보를 묶을 때)

let a_dict = {key:value, ...} // 선언
a_dict[key]  // 해당하는 value 출력
a_dict[value] // 해당하는 key 출력
a_dict[key] = value // 키:밸류 추가
a_dict // 전체 키:밸류 출력

• 함수 형태

// 만들기
function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

• 반복문 형태

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
}

1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3

와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

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

💡 이슈/고민 또는 이를 해결한 내용

• CSS 가운데 정렬이 생각보다 간단하지 않다. (display 사용하기)
• 넬의 팬명록을 만들었다! (뿌듯)
• JS 반복문의 구조가 어렵다. 변수 선언부터 하기.
• 반복문 실행해보니 브라우저가 무한 로딩이 돼서 무슨 일인가 했더니... i를 1로 잘못 쓰는 실수 때문이었다. 다행히도 발견!

⭐TO-DO LIST

• Javascript 함수와 반복문 복습하기
• 2주차 강의 듣기