🐶 오늘의 개발일지_웹개발 1주차

 

🍏  🖍

스파르타 코딩클럽 웹개발 종합반 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 폰트 넣기

<title></title> 밑에
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

폰트 link를 입력하고

 

<style> CSS칸에 

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

입력하기

 

---

웹화면에서 모바일 처리 하기

 

- 개발자 도구에서 두번째 아이콘을 클릭 -> 모바일 화면으로 볼 수 있음

- ex) 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면?

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

---

Javascript

뼈대와 꾸미기를 했다면 Javascript를 이용하여 움직임을 넣어주자.

* 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다.

 

수학을 잘 하지 못하는 나에겐 아주 기보적인 개념조차 어색하고 이해가 되지 않아 좌절감을 느꼈다ㅠㅠ

 

- Javascript -HTML 연결하기

ex) 버튼을 클릭하면 경고창이 뜨게하기

<script>
      function hey( ){
          alert('안녕!');
     }
</script>

버튼에 함수를 연결하기, 버튼을 누르면 함수가 불립니다.

<button onclick="hey()">영화 기록하기</button>

 

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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.