[스파르타 코딩클럽] 1주차 실습일지 - HTML, CSS, Javascript (feat. Bootstrap)

1주차 실습일지 시작

한이음 ICT 프로젝트에서 스파르타 코딩클럽 강의를 들을 수 있도록 지원해주어 웹개발 종합반 수업을 신청하게 되었다. 매주 강의를 들으면서 기억에 남는 내용들을 정리해서 남겨두려고 한다!

1주차 과제 완성 화면

배운 내용 정리

1. 클라이언트-서버 모델 / 웹의 동작 개념

- 브라우저는 API로 요청을 보내고, 이를 통해 받은 html 파일을 그려주는 일을 한다.

- html 파일이 아닌 데이터만 받는 경우에는 JSON 형식으로 전달 받는다.

2. Pycharm에서 ctrl+alt+L로 자동 정렬 기능 사용 가능

3. CSS 배경 관련

.background {
  background-image: url("-- 이미지 URL 넣기 --");
  background-size: cover;
  background-position: center;
  
  border-radius: 10px;		/* 모서리 둥글게 */
  text-align: center;		/* 글자 입력 시 가운데 정렬 */
  padding-top: 40px;		/* 위쪽 여백 */
}

4. margin은 바깥 여백, padding은 안쪽 여백을 설정.

-설정 순서: top, right, bottom, left

margin: 10px 20px 10px 20px;

-아래와 같은 경우 top, bottom은 10px이고 left, right는 여백을 균등하게 맞춘다.

margin: 10px auto;

5. 특정 영역을 가운데로 설정할 때 div 태그를 활용해서 묶고 정렬

- width를 주고, margin: auto를 사용

- 버튼이나 상자일 경우 display:block 활용

ex)

.wrap {
	width: 300px;
	margin: auto;       /* margin: auto는 양쪽 여백이 동등해짐 */
}
.mybtn {
	width: 100px;
	margin: auto;
	display: block;     /* 버튼과 같은 박스를 옮길 때 */
}

6. 구글 웹 폰트 활용

https://fonts.google.com/?subset=korean 

Google Fonts

- CSS에서 선택자를 *로 주면 전체 요소를 대상으로 적용 가능

 

7. 주석 처리 꿀팁: 주석 처리 하고 싶은 부분 선택 후 CTRL + /

8. 부트스트랩 컴포넌트

https://getbootstrap.com/docs/4.0/components/alerts/

Alerts

- 헤더에 Starter template을 넣어 부트스트랩 사용 선언 후, 미리 정의 되어있는 class를 갖고와 사용

9. Javascript 문법 정리

1) var, let, const 차이

- var는 같은 변수를 한번 더 선언했음에도 불구하고 에러나 가오지 않는 문제점이 존재하여 ES6 이후 이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다.

- let과 const의 차이점은 immutable 여부이다.

→ let은 변수에 재할당이 가능하지만, const는 변수 재선언, 변수 재할당 모두 불가능하다.

- var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지지만, let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 따라서 var로 선언된 변수와 달리 let로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생한다. (var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프)

 

let a_list = ['참외', '수박', '배'];
a_list.push('감');				//배열 맨 뒤에 원소 추가: ['참외', '수박', '배', '감']

 

2) Dictionary

let a_dict = {'name' : 'bob', 'age' : 27};
a_dict['age'];				// 27
a_dict['height'] = 180;		// a_dict = {'name' : 'bob', 'age' : 27, 'height' : 180}
a_dict['fruits'] = a_list;	// value 값에 배열도 선언 가능

 

3) split

let phone = '010-0101-1234';
phone.split('-');			// ['010', '0101', '1234']

 

4) 함수 사용

function sum(num1, num2) {
	alert(num1+ ' + ' + num2 + ' = ' + (num1+num2));
	return num1 + num2;
}

 

5) 반복문 + 딕셔너리 사용

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++) {
	let name = scores[i]['name'];
    let score = scores[i]['score'];
	console.log(name, score);
}

function show_names(num){
	for (let j = 0; j < scores.length; j++) {
		if (scores[j]['score'] < num) {
				let name = scores[j]['name'];
				console.log(num + "점 미만 학생 : " + name);
		}
	}
}
show_names(70)

 

회고

- 대학교 1학년 때 웹프로그래밍 수업을 제외하고는 웹 개발 관련 수업을 들어본 적이 없어 프로젝트할 때 구글링이나 도서를 참고하는 것이 대부분이였다. 하지만 이번 스파르타 코딩클럽 수업을 들으면서 실제로 개발 환경에서 도움이 될만한 꿀팁들을 유쾌하게 잘 알려주는 것 같다는 생각이 들었다.

- 기존에는 Javascript로 변수를 선언할 때 주로 var을 사용했었는데, 강사님이 let을 주로 사용하시는 것을 보았다. 이번 주차 수업을 통해 var, let, const의 차이점을 찾아보며 var의 문제점인 Function Scope와 호이스팅(Hoisting)에 대해 알게 되었다. 변수 선언 시 각 차이점을 잘 고려하며 사용해야겠다고 느꼈다.

- 또한 로그인 페이지 만들기, 나홀로메모장 만들기 퀴즈를 통해 Bootstrap을 적극 활용해볼 수 있어 좋았고 Javascript의 주요 문법을 잘 짚고 넘어갈 수 있었다.

- 네이버 웹페이지 해킹을 시작으로 Javascript 활용까지 약 2시간동안 정말 알찬 내용들을 배웠다. 앞으로 2주차~5주차의 수업에서는 어떤 내용을 배우게 될지 매우 기대된다!