Today I Learned ...
오늘은 '웹개발 A to Z' 강의의 1, 2강을 들었다.
1강은 HTML과 CSS에 대해서, 2강은 JavaScript에 대해서 다룬다.
📚 1강 _ HTML과 CSS
웹 브라우저는 ① 요청을 보내고, ② 받은 HTML, CSS, JS 등의 파일을 그려주는 역할을 한다.
이때, HTML은 뼈대를 생성하고, CSS는 꾸미고, JS는 움직이게 만들어준다.
HTML은 크게 head와 body로 나뉜다.
head는 페이지 속성을 정의하고, 필요한 스크립트(script, style, link 등)를 부르는 역할을 한다.
그리고, body에는 내가 원하는 정보를 입력하면 된다.
body를 작성할 때 다양한 태그들을 사용해서 글씨 크기를 조절하거나 선을 그리고, 이미지를 생성하고, 버튼과 같은 요소들을 생성할 수 있다.
이때, div와 class 등의 태그를 통해서 묶음으로 지정해두면, 이후에 알아보기가 편하다.
CSS를 사용하기 위해서는 html의 head 안에 style 스크립트를 작성하면 된다.
여기에서는 글자 폰트 혹은 색을 지정하고, 배경에 이미지를 넣고, 여백을 조절하는 등의 작업을 할 수 있다.
HTML에서는 무작정 글씨만 넣는다면, CSS에서는 그걸 예쁘게 꾸밀 수 있다.
그런데, 부트스트랩이라는 사이트를 통해서 다른 사람이 만들어둔 css를 긁어와 사용할 수 있다.
내가 하나하나 지정하지 않아도 이미 만들어진 모양을 그대로 사용할 수 있기 때문에 매우 편하다.
이때, HTML 파일에 부트스트랩의 경로를 잘 지정해두어야만 한다.
자세한 실습 내용은 노션을 통해 정리해두었다.
Notion 확인하기
📚 2강 _ JavaScript
JavaScript는 페이지에 '동작'을 주기 위해서 사용한다.
1. 변수
변수는 '값을 담는 상자'를 뜻한다. 즉, 변수에 값을 담아서 한번에 수정할 수 있도록 하는 것이다.
let a = '대한'
let b = '민국'
console.log(a)
console.log(a+b)
console.log(a+b+b)a, b를 수정하면 한번에 모든 값을 바꿀 수 있는 것이다.
이때, = 기호는 '같다'는 의미로 사용되는 것이 아니라 '오른쪽'에 있는 것을 '왼쪽'에 넣는다는 의미로 사용된다.
2. 자료형
자료형은 리스트와 딕셔너리로 나눌 수 있는데, 리스트는 '순서'를 지켜서 가지고 있는 형태이고, 딕셔너리는 '키(Key)-밸류(Value)' 값을 묶어놓은 형태이다.
let a = ['사과', '배', '수박'];
console.log(a[1])리스트에서 이렇게 지정할 경우, a의 1번 값인 '배'가 출력된다. 이때, 번호는 0부터 시작된다.
let person = {'name':'bob', 'age':30, 'height':180};
console.log(person['name'])딕셔너리에서 이렇게 지정할 경우, person의 'name'에 해당하는 값인 'bob'이 출력된다.
3. 반복문
반복문은 리스트에 있는 자료를 간단하게 보기 위해서 사용한다.
let a = ['사과', '배', '수박'];
console.log(a[0])
console.log(a[1])
console.log(a[2])반복문을 사용하지 않는다면, 모든 값을 하나하나 지정해야만 전체를 출력할 수 있다.
let fruits = ['사과', '배', '수박'];
fruits.forEach(a => {
console.log(a)
});그런데, 반복문을 사용한다면, 하나의 명령문을 통해서 모든 값을 출력할 수 있다.
4. 조건문
조건문을 사용한다면, 조건에 따라 다른 출력값을 얻을 수 있게 된다.
let age = 15
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}여기에서 age의 값이 변경되면, 변경된 값에 따라 다른 결과를 얻을 수 있게 된다.
반복문과 조건문을 함께 사용할 수도 있다.
let ages = [15, 30, 28, 7, 40, 13]
ages.forEach(a => {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
});이렇게 작성한다면, 리스트의 값에 따라 성인인지, 청소년인지가 순서대로 출력된다.
이뿐 아니라 자바스크립트를 통해서 HTML을 움직이게도 만들 수 있다.
특정 버튼을 클릭할 때 안내문이 나오게 설정할 수도 있고, 글자 색이 바뀌게 할 수도 있다.
자세한 실습 내용은 노션을 통해 정리해두었다.
Notion 확인하기
