🍏 🖍

스파르타 코딩클럽 웹개발 종합반 1주차 강의를 다 들었다.

코딩이 뭔지 아무것도 모르는 도자기 디자인 하는 흙쟁이인 나에겐 너무나도 큰 도전이었다.

시작이 반이라고 개발자가 되어야겠다는 마음을 먹고, 여러 학원을 찾아 봤다.
생활코딩,제로초,드림코딩 등 유튜브로 기본적인 코딩의 지식들을 보고, 독학을 하며 학원을 찾아나섰다.

정말 아무 베이스가 없다보니 뭐부터 뭘 해야 할지 감 자체가 안잡혔다.
그러다 우연히 스파르타코딩클럽을 보게 되었고, 온라인 강의라 걱정되는 부분도 있었지만, 많은 수업량과 밀착 관리를 해준다는 말에
내일배움캠프에 지원하게 되었고, 본격적인 캠프 개강에 앞서 웹개발 종합반을 듣게되었다. 🔥

1주차 수업내용

1주차에는 간단하게 html,css,bootstrap,javascript에 관한 설명과 깊은 이론보단 빠른 실행으로 이렇게이렇게 돌아간다는 흐름을 느낄 수 있는 수업이었다.

1.HTML 뼈대 만들기

• html은 구역과 텍스트를 나타내는 코드로 전체적인 뼈대를 만들어 준다
• html 기초 코드로 간단한 로그인 페이지를 만든다

2. CSS 꾸미기

• css는 html에서 잡은 뼈대에 코드를 이용하려 꾸며주는 것이다
• 이전에 만든 로그인 페이지에서 css로 약간 꾸며줬다

2-1 CSS에서 자주 쓰는 것

background-image, background-size, background-position color, width, height, border-radius, margin, padding

• 화면 가운데로 만들어 주려면
  width : n값;
  margin : auto;
  display : block
  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }
  

단축키

• option + command + L = 코드 정렬
• option + command + i = 개발자 도구 켜기(chrome)
• Tab / shift + Tab = 코드 띄우기
• command + / = 주석처리
  Bootstrap - 시작템플렛
  : 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)

[ 부트스트랩 컴포넌트 5.0 ]

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

CSS 폰트 넣기

밑에 폰트 link를 입력하고

영화 기록하기

Jacascript 기초문법

• console.log(변수)

-- console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");

• 변수 & 기본연산

변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)
let으로 변수를 선언합니다.
let num = 20
num = 'Jaeyoung'

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

• 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.

let a = 1
let b = 2

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

let first = 'Jaeyoung'
left last = 'Lim'

first+last // 'JaeyoungLim'

first+ ' '+last // 'Jaeyoung Lim'

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