html, css, javascript

html은 웹브라우저의 뼈대

css는 꾸미기

javascript는 서버 및 웹페이지 동작

 

vscode를 깔아서 영상 강의를 따라 해보는 중인데 html로만 이루어진다면 사이트가 못생기고

css로 꾸며줘야 한다는 걸 알게 됐다.

하지만 css를 처음부터 창작하여 만들면 너무 힘들기 때문에 세상엔 bootstrap과 구글폰트 같은 것들이 있고 이를 활용하면 조금 더 쉽게 꾸민다는 것을 배웠다.

나중에 유용한 css들은 모아서 정리해두면 자주 쓸 것 같다.

 

javascript

• 리스트

let a = ['사과', '배', '수박'];
        console.log(a[2])

변수 a의 3번째 데이터를 콘솔창에 출력해줘 라는 의미.

수박이 콘솔창에 출력된다.

a[2]인데 3번째인 이유는 프로그래밍 세계에서는  첫 시작이 0번부터이기 때문이라고 한다.

 

• 딕셔너리

let person = {'name' : 'bob', 'age': '30', 'height' : '180'} 
console.log(person['name'])

person 변수의 name 키의 밸류를 콘솔창에 출력해줘 라는 의미

bob이 콘솔창에 출력된다.

키(name, age, height)와 밸류(bob, 30, 100)로 구성되어 있다.

• 조건문

let age = 20; 
if (age < 20) { 
	console.log('청소년입니다.') 
    } else { 
    	console.log('성인입니다.') 
    }

age 변수의 값은 20이다.

만약 age 변수가 20살 미만이면 청소년을 초과면 성인을 출력해줘 이다.

20살이니까 성인이라고 나온다.

• 반복문

let ages = [15, 30, 28, 7, 40, 13];

      ages.forEach((age) => {
        if (age < 20) {
          console.log("청소년입니다.");
        } else {
          console.log("성인입니다.");
        }
      });

ages 변수에 6명의 나이가 리스트 형식으로 입력되어 있고

forEach 반복문 안에 조건문을 삽입하여 20살이 넘는 사람과 안넘는 사람을 콘솔창에 출력하는 반복문이다.

ages의 데이터들을 age(내 마음대로 이름 정해도 됨)라는 곳에 넣고 조건문의 참, 거짓에 따라 반복하여 콘솔에 출력한다.

15세 30세 28세 7세 40세 13세 이니까 청소년 3명 성인 3명 나온다.