const now = new Date(); //현재 날짜 및 시간
console.log(now)

위처럼 입력하면 콘솔 출력값은 한국 표준시로 적용된다.

여기에 더해, console.dir(now)를 실행시키면 가져올 수 있는 객체들이 나온다.

연, 월, 일 구하기

데이터 객체 getFullYear(), getMonth(), getDate() 사용.

const now = new Date();
const year = now.getFullYear();

위와 같은 코드에서 year은 month/date로, getFullYear은 getMonth/getDate로 각각 월과 일을 구할 수 있다.

시간, 분, 초 구하기

위와 같은 코드에 데이터 객체 getHours(), getMinutes(), getSeconds()를 사용.

웹페이지에서 실시간 표시하기

영역을 설정하고 기본 시간은 00:00:00으로 설정.

자바스크립트에서 time을 변수 선언.

위와 같은 코드로 입력하면

이렇게 웹페이지에는 구현은 되지만, 문제가 2가지 발생한다.

1. 현재 시간이 실시간으로 적용이 안 되고 새로고침을 해야지만 현재 시간이 적용됨.
2. 시, 분, 초가 두 자리 수로 나타나지 않음.

1번 현재 시간 실시간으로 반영하도록 수정하기 = setInterval() 사용하기. = setInterval(function[, delay]);

위처럼 적용하면 새로고침 없이 실시간 반영 가능.

2번 시, 분, 초 두 자리 수로 나타내도록 수정하기. = padStart() 사용하기. = 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환. 채워 넣기는 대상 문자열의 시작(좌측)부터 적용된다. Srting을 받아야 한다. = String.prototype.padStart()

 const str1 = '1';
 console.log(str1.padStart(2, '0'));
 //pasStart(길이, '채워넣을문자')

이미지 스프라이트 처리 사이트

https://spritegen.website-performance.org/

CSS Sprites Generator (toptal.com)

js 구현시

버전 및 구현한 사람 용도 주석으로 명시하기

ex.)

/**
 * 접근성 & UX 개선 (키보드 사용할 때만 포커스 나오게)
 *
 * @version 1.0.0
 * @since 2023-03-09
 * @author 하원
 */

(+) 수정, 추가 내용은 직관적으로 적기

1. 모든 CSS 파일에 들어가 하단 부분에 미디어쿼리 작업해 놓을 것
2. responce.css 파일을 만들어 몽땅 넣기 (단점: 유지 보수가 빡셀 거라 예상)
3. PC, Tablet, Mobile 분기점별로 CSS 파일 만들어 놓기

분기점은 어떻게 나눌까

사이트마다 다르기 때문에 최소치 1024까지 잡을 것.

• 구현 불가능 시점, 공존이 안 되는 시점, 시안으로 제공이 안 될 확률이 99.9%?

태블릿 max: 1023px ~ min 768px

모바일 max: 767px ~ min 320px

@media screen and (max-width: 1200px) {
    /* *1024을 기준으로 화면을 보고 잡아야함 */
}

@media screen and (max-width: 1023px) {
    /* *768을보고 잡아야함 */
}

@media screen and (max-width: 767px) {
    /* *320을 보고 잡아야함 */
}

해당 엘리먼트 관련한 데이터 불러오기 (가구, 패브릭..)

똑같은 CSS 영역의 다른 내용 불러올 때의 방법

아주 빡셌다

근데 이걸 내가 해냄!!