내일배움캠프 72일차

1. 오늘 내가 한 일!

오늘은 중간발표 전날이라 자잘한 문제들을 해결하며 프로젝트를 합치는 일을 했다!

2. 알게된 것

1. hasOwnProperty() 메소드

hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환한다.
우리는 유저가 로그인을 했을 때, 안했을 때 보여주는 화면을 다르게 하기 위해 이 메소드를 사용했다!
로그인을 했을 때

if(localStorage.hasOwnProperty("user") === true)

로그아웃 했을 때

if(localStorage.hasOwnProperty("user") === false)

이런 느낌!!
참고 자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

2. 반응형으로 종횡비 유지하여 이미지 표시하기

이미지 태그를 활용했을 땐 width: 100% height: auto 속성을 이용하여 너비는 꽉 차게, 높이는 이미지의 비율에 맞게 조정할 수 있다.

예시)

.card {
	position: relative;
    	width: 100%;
    	height: 0;
    	padding-top: calc(300 / 1000 * 100%);
	img {
	    position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
	}
}

참고 자료 1 : https://velog.io/@juno7803/%EB%B0%98%EC%9D%91%ED%98%95%EC%9C%BC%EB%A1%9C-%EC%A2%85%ED%9A%A1%EB%B9%84-%EC%9C%A0%EC%A7%80%ED%95%98%EC%97%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0
참고 자료 2 : https://mber.tistory.com/27

3. 레이어 위치 가운데 정렬 css
   수평 : transform:translateX(-50%);
   수직 : transform:translateY(-50%);
   수평, 수직 : display:flex; justify-content:center;align-items:center;

예시)

• 수평정렬

style="width:200px;position:relative;left:50%;"

=> 레이어의 왼쪽 모서리가 화면의 50% 에서부터 시작하여 출력

style="width:200px;position:relative;left:50%;transform:translateX(-50%);"

=> 레이어의 왼쪽 모서리가 화면의 50%에서 width값의 -50%인 100px만큼 이동되어 가운데 정렬됨