스파르타 코딩 클럽 웹 개발 종합반 1주차

1. 개발 진행 상황

2. 개발 중 발생한 이슈와 해결

3. 새로 배운 것

• 서버, 클라이언트, 웹의 동작 개념 설명
• 필수 프로그램 설치: Pycharm Professional 설치, JetBrains 가입, AWS 가입
• HTML, CSS 기본 내용: HTML과 CSS 개념: HTML은 뼈대, CSS는 꾸미기
• CSS 기초

1) <div> ... </div> 태그 이용해서 묶음

2) <style>.스타일명</style> 가리키는 클래스 앞에 '.'을 붙임

<style>
.mystyle {
배경관련(3개 붙어다닌다고 생각하기)
background-color
background-image
background-size

사이즈
width
height

폰트
font-size: 00px; // 폰트 크기
font-weight: ; //폰트 굵기
font-famaily: ; // 폰트 이름
font-style:  ; // 폰트 기울임
line-height: ;// 한 줄의 높이
color: ; // 색상 지정

색상
color: color명;

간격(margin은 외부 간격, padding은 내부 간격 조절) // px, cm, %로 지정 가능, 음수값도 가능
margin: 00px 00px 00px 00px; //모든 margin 값 설정, 위-오른쪽-아래-왼쪽 순
padding-top: 00px; //상단 padding 값 설정
margin-top: 00px; //상단 margin 값 설정
margin-right: 00px; //오른쪽 margin 값 설정
margin-bottom: 00px; //하단 margin 값 설정
margin-left: 00px; //왼쪽 margin 값 설정

padding: 00px 00px 00px 00px; //모든 padding 값 설정, 위-오른쪽-아래-왼쪽 순
padding-top: 00px; //상단 padding 값 설정
padding-right: 00px; //오른쪽 padding 값 설정
padding-bottom: 00px; //하단 padding 값 설정
padding-left: 00px; //왼쪽 padding 값 설정
}
</style>

3) 구글 웹폰트 입히기

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

Google Fonts

마음에 드는 폰트 고르기 -> +Select this style 클릭 -> 우측 상단 모음 아이콘 클릭 -> Embed탭 클릭 -> link태그 복사-> head아래 붙여넣기 -> CSS 복사 -> style안에 붙여 넣기

4) 주석 달기: /*...*/ , 단축키 : cmd+/

5) CSS파일 분리

<style>~</style> 부분이 길어지면 코드 보기가 어려움 CSS파일만 분리 가능

 

• 부트스트랩 : 예쁜 CSS미리 모아둔 것

https://getbootstrap.com/docs/5.2/getting-started/introduction/

Get started with Bootstrap

•  Javascript: 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어(Java와 Javascript는 관련 없음), 동적인 부분 담당

1) 크롬 개발자 도구 console 탭을 이용하여 기초 문법 연습(단축키: opt+cmd+i)

console.log(변수): 콘솔 창에 변수 출력 //개발자가 결과값 보기 편하도록

2) 변수 & 기본연산

3) 리스트&딕셔너리: 딕셔너리: 키(key)-value 값의 묶음

4) 메소드

split: 문자열을 일정한 구분자로 자름

string.split(구분 기준, 최대 분할 개수); // 기본 형태

const str = "mon tue wed thu fri sat sun";

//1. 아무것도 입력하지 않은 경우
const arr = str.split();
document.writeln(arr(); // 결과값: mon tue wed thu fri sat sun
document.writeln(array.lenght); // 1

//2. 띄어쓰기로 분할
const arr = str.split(" ");
document.writeln(array.lenght); // 7
document.writeln(array[0]); // mon
document.writeln(array[1]); // tue
document.writeln(array[2]); // wed
document.writeln(array[3]); // thu
document.writeln(array[4]); // fri
document.writeln(array[5]); // sat
document.writeln(array[6]); // sun

//3. 문자별 분할
const arr = str.split("");
document.writeln(array.lenght); // 11
document.writeln(array[0]); // mon
document.writeln(array[1]); // '공백'
document.writeln(array[2]); // tue
document.writeln(array[3]); // '공백'
document.writeln(array[4]); // wed
document.writeln(array[5]); // '공백'
document.writeln(array[6]); // thu
document.writeln(array[7]); // '공백'
document.writeln(array[8]); // fri
document.writeln(array[9]); // '공백'
document.writeln(array[10]); // sat
document.writeln(array[11]); // '공백'
document.writeln(array[12]); // sun

//4. 특정 구분 기준 ','(콤마)로 분할
const str = "mon,tue,wed,,thu,fri,sat,sun";
const arr = str.split(",");
document.writeln(array.lenght); // 7
document.writeln(array[0]); // mon
document.writeln(array[1]); // tue
document.writeln(array[2]); // wed
document.writeln(array[3]); // thu
document.writeln(array[4]); // fri
document.writeln(array[5]); // sat
document.writeln(array[6]); // sun

//5. 최대 분할 개수를 지정하여 분할
const str = "mon,tue,wed,,thu,fri,sat,sun";
const arr = str.split(",", 3);
document.writeln(array.lenght); // 3
document.writeln(array[0]); // mon
document.writeln(array[1]); // tue
document.writeln(array[2]); // wed
document.writeln(array[3]); // undefined

4. 참고 레퍼런스

https://codechacha.com/ko/javascript-how-to-substring/

JavaScript - 문자열 자르기 (split, substr, substring, slice)

5. 오늘 한 일 / 회고

• 강의 열심히 듣고 있음 아직까지는 아는 부분과 겹치고 이해안가는 부분은 없음

6. TO-DO LIST

• 웹개발 종합반 강의 듣기

7. 특이사항