Today I Learned
- javascript 올인원 강의 듣기
- 웹페이지 수정하며 공부하기
javacsript 강의 공부한 내용
*프로그래밍 과정: 입력 -> 처리 -> 출력
*변수선언: let 변수이름 = 값
*기본형 데이터 타입: number, string(문자열), boolean(참거짓), null, undefined
let name = null 비어있는 값을 할당
let age = 변수 선언만 하고 값 할당은 x (undefined)
*산술연산자: + - / * % **
*증감연산자
let count = 1
const prePrice = ++count -> count=count+1 / prePrice=count
const postPrice = count++ -> postPrice=count / count=count+1
*대입연산자
a += b -> a=a+b
a -= b -> a=a-b
*비교연산자: < <= > >=
*논리연산자
ll (or) 하나만 true여도 true 리턴
&& (and) 모두 true여야 true 리턴
! (not) true를 false로, false를 true로 리턴
*일치연산자: ===
const milkPrice = 4000
const jellyPrice = 2000
let totalPrice = milkPrice + jellyPrice
console.log(totalPrice)
console.log(`총 ${totalPrice * 0.8}원에 물건을 구입합니다.`)
*조건문: if, esle if, else
const distance = 3
if (distance < 2) {
console.log('같이 가자.')
} else if (distance >= 2 && distance < 5) {
console.log('택시를 타자.')
} else {
console.log('기차를 타자.')
}
*for 반복문: for (begin; condition; step) { }
for (let number = 1; number <= 20; number++) {
if (number % 2 === 0) {
console.log(`${number}은 짝수입니다.`)
} else {console.log(`${number}은 홀수입니다.`)}
}
*함수의 선언과 호출
function threeAvg(price1, price2, price3) {
const avg = (price1 + price2 + price3) / 3
return avg
}
const priceA = 1000
const priceB = 2000
const priceC = 3000
const avg1 = threeAvg(priceA,priceB,priceC)
console.log(`물건 평균가격은 ${avg1}원 입니다.`)
*클래스 선언과 메소드 정의, 객체 만들기
class cloth {
constructor(color, size, price) {
this.color = color
this.size = size
this.price = price
}
printInfo() {
console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
}
}
const shirts = new cloth('white', 'M', '50000')
const coat = new cloth('navy', 'S', '20000')
shirts.printInfo()
coat.printInfo()
*배열의 선언: const array = [1, 2, 3, 4, 5]
*요소 추가와 삭제
array.push(6)
array.pop()
*배열과 반복문
const priceList = [1000, 5000, 2500, 4000, 2000, 3500, 6000, 500, 1500, 8000]
let sum = 0
for (const price of priceList) {
sum += price
}
const avg = sum / priceList.length
console.log(`합계: ${sum}, 평균: ${avg}`)해결하는 경험
a 태그 밑줄, 색상 제거하기
주말에 고민하던 문제를 해결했다. 링크 걸었을 때 파란색으로 변하고 밑줄 생기는 효과를 CSS로 수정하려다가 실패했었는데 실패했던 이유가 CSS에서 .mititle > h1까지만 들어가서 그런 거였다. . mititle > h1 > a까지 들어가니까 해결되었다.
.mytitle > h1 > a {
text-decoration: none;
color: white;
}
width 설정 값 밖으로 튀어 나가는 문제
전체적으로 width 값을 1200px로 설정해 뒀었는데 수전 정 사진을 보면 하단에 빨간 박스가 오른쪽으로 10px 정도 튀어 나가서 나를 굉장히 불편하게 만들었었다.🤔 CSS 안에 따로 margin이나 padding 값을 설정해두지 않았기 때문에 원인을 알 수가 없어서 튜터님께 질문했었는데 부트스트랩으로 인해 코드가 보이진 않지만(?) padding 값이 15px로 설정되어 있었다고 한다. 그래서 container의 padding을 0px로 설정했더니 문제가 해결되었다.
.container {
align-items: center;
width: 1200px;
padding: 0;
}
CSS에서 img 크기 일괄 조절하기
<img width="200" height="200" src="https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png">원래는 짱구 캐릭터 이미지마다 개별적으로 height, width 값을 설정해주고 있었는데☝🏻 특정 div 안에 있는 이미지 크기를 일괄적으로 조절할 수 있는 방법을 알아냈다.
.mypage > figure > a > img{
height: 190px;
width: 190px;
border-radius: 140px;
}
이미지 배치 수정하기
나는 디자인 감각이 없어서 이게 최선이었던 거 같다. 이전보다 디자인적으로 나아졌다기보다는 이것저것 부딪히며 공부하기 위해서 수정했다. 그래도 메인 페이지를 수정하며 CSS grid, 호버 기능, 그 외에도 정말 많은 부분을 배웠다. 호버 기능은 너무 쉬워서 깜짝 놀란 반면에 grid는 공부하느라 엄청 고생했다ㅠㅠ 이제 내일부터는 내 개인 페이지를 수정해봐야겠다.
CSS grid 공부하기 좋은 사이트 추천
https://blog.tommyzip.co.kr/code/css-basic-layouts-gridlayout-container-properties/
https://studiomeal.com/archives/533
느낀 점
오늘은 오전 발제 후 저녁 6시까지 자바스크립트 강의를 모두 듣고 저녁에는 개인 공부를 했다. 자바스크립트 강의는 클래스 선언 부분에서 약간의 위기를 맞이했지만 너무 완벽하게 이해하려는 마음을 포기하고 일단은 강의를 모두 들었다. 근데 팀 프로젝트와는 다르게 가만히 앉아서 강사님이 하는 얘기만 듣고 있으려니까 너무 졸렸다.😴 그래도 강의를 빨리 듣고 저녁엔 혼자 공부할 수 있는 시간이 생겨서 다행이라고 생각한다. 9 to 9 일정만으로도 체력을 다 써버리기 때문에 평일엔 도저히 공부할 시간이 나지 않는다.