1주차 개발일지: HTML, CSS, Javascript 기본

목차

프론트엔드

- 개발자의 분류는 크게 눈에 보이는 구성을 만드는 프론트엔드와 뒤의 서버를 만드는 백엔드로 구분할 수 있다.

- 프론트 엔드: 이용자의 눈에 보이는 앱이나 웹의 껍데기라고 생각하면 된다. 사용자 인터페이스(UI)와 사용자 경험(UX)을 만드는데 초점을 맞추며, 기본적으로 디자인 감각 와 고객 경험에 대한 이해가 있는 사람이 적성에 맞다. 

- 백엔드: 소프트웨어 개발 프로세스 서버 측 개발 분야로 데이터의 저장 및 관리, 웹사이트의 클라이언트 측에서 모든 것이 매끄럽게 작동할 수 있도록 해준다. 추상적인 논리의 체계화와 구현에 대한 흥미가 있는 사람이 적성에 맞다. 

- 풀 스택: 프론트엔드와 백엔드를 일정 수준 이상 소화할 수 있는 엔지니어를 말한다 

 

-> 서버의 보이는 부분을 구성하는 프론트 엔드는 크게  HTML, CSS, Javascript 로 이루어져 있다 

HTML은 뼈대, CSS는 색상, 모양 등의 꾸미기 , Javascript는 움직임이나 작동을 구현하는 것으로 보면 된다. 

 

HTML 기본 

1) <> , </>로 처음과 끝을 구성함

2) HTML 태그는 누가 누구 안에 있는지 구성을 이해하는 것이 가장 중요함

3) <div> </div>로 분리 가능함

-예시

<div>

       <div>

           <button>나는 버튼</button>

      </div>

      <div>

         <button>나는 버튼2</button>

      </div>

</div>

 

CSS 기본

1) 자주 쓰는 CSS

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

 

2) 묶음 단위로 쓰는 CSS

color: white;

width: 300px;

height: 200px;

(보통 *px 단위로 설정)

 

border-radius: 10px;

text-align: center;

padding-top: 40px;

 

background-image:url(‘-----’)

background-size: center;

background-position: center;

 

3) CSS추가 활용 사이트

-구글웹폰트: https://fonts.google.com/?subset=korean

-부트스트랩: https://getbootstrap.com/docs/5.0/components/buttons/  

-이모티콘 모음: https://kr.piliapp.com/facebook-symbols/

 

Javascript 기본

1) 크롬 개발자 도구: console 탭 활용 가능

(띄어놓은 페이지에서 빠르게 자바스크립트를 테스트해 볼 수 있도록 만든 도구)

 

 2) 기본 연산

let a = 1

let b = 2

 

a+b // 3

a/b // 0.5

 

let first = 'Bob'

let last = 'Lee'

 

first+last // 'BobLee'

first+' '+last // 'Bob Lee'

first+a // Bob1

 

3) 함수

// 만들기

function 함수이름(필요한 변수들) {

내릴 명령들을 순차적으로 작성 }

// 사용하기

함수이름(필요한 변수들);

 

4) 조건문 

20보다 작으면 작다고, 크면 크다고 알려주는 함수

function is_adult(age){

if(age > 20){

alert('성인이에요')

} else {

alert('청소년이에요')

}

}

is_adult(25)

 

5) 반복문

for (let i = 0; i < 100; i++) {

console.log(i);

}

console.log(0)

console.log(1)

console.log(2)

console.log(3)

console.log(4)

console.log(5)

... console.log(99)

이런식으로 출력 가능 

 

 🍀🍀 1주차 수업 느낀 점 

- 개발의 기본은 Ctrl C,  Ctrl V 복붙을 부끄러워하지 말자! 

- 개발자들은 본인의 코드 노하우를 가감 없이 공유한다. 많이 멋있다 

- 자바스크립트는 벌써부터 어렵다..ㅠㅜ