천사님 밥 친구해요

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 학원에서 피그마로 만든 게시판을 혼자서 만들어 보라는 숙제를 받았습니다. 하다가 테이블과 관련된 명령어 중 여백제거와 가로,세로 여백을 몰라서 찾아서 해봤습니다.~ HTML코드 헤더 영역 바로가기 컨텐츠 영역 바로가기 푸터 영역 바로가기 메인으로 Developer Blog 회원가입 회원가입 로그인 게시판 블로그 회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다. 총 1111건의 게시물이 등록되어 있습니다. 검색 글쓰기 번호 제목 등록자 등록일 조회수 1 게시판 영역입니다. 아직 제목이 없어요.! 안교남 2023-04-20 50 2 게시판 영역입니다. 아직 제목이 없어요.! 안교남 2023-04-20 50 3 게시판 영역입니다. 아..

1.SQL문의 빈칸을 완성하시오. [학생] 테이블에서 전화번호가 NULL 값이 아닌 학생명을 모두 검색하기 위한 SQL문의 작성하시오. SELECT 학생명 FROM 학생 WHERE 전화번호 _____; 답: IS NOT NULL 2.SQL문의 빈칸을 완성하시오. 사용자 "HWANG"에게 테이블을 생성할 수 있는 권한을 부여하기 위한 SQL문을 작성하시오. _____ CREATE TABLE _____ HWANG 답: GRANT, TO 3.SQL문의 빈칸을 완성하시오. [성적] 테이블에서 점수가 90점 이상 95점 이하인 '컴퓨터공학과' 학생의 정보를 검색한 SQL문을 작성하시오. SELECT * FROM 성적 WHERE (점수 _____ 90 _____ 95) AND 학과 = '컴퓨터공학과'; 답: BET..

오늘도 시험을 보고 많이 틀렸네요.(불합격) 1.다음의 결괏값을 작성하시오 let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) 답: 129 2.다음의 결괏값을 작성하시오 let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); 답: 50, 10 3.다음의 결괏값을 작성하시오. funct..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 패럴렉스 2단계는 닷버튼을 클릭하면 애니메이션 효과를 부여합니다. 브라우저에서 scroll을 하면 scroll값을 갖고와서 그 값으로 애니메이션을 부여합니다. HTML코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다...

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 스크롤 API를 활용해서 포트폴리오 첫번째를 만들어 봤습니다. 다음부터는 API를 안쓰고 코드로 만들어 본다고 하네요. HTML코드 CHEER HEALT 세상은 나만의 무엇인가를 찾아야 하는 이들에게 보다 더 많은 것을 제공한다. In the middle of every difficulty lies opportunity." - Albert Einstein 코드설명 1.div태그 .s1-img1-1 / .s1-img1-2 / .s1-img1-3 / .s1-img1-4 / .s1-img1-5를 만듭니다. 총 5개의 효과입니다. 2.data-숫자는 이제 스크롤바를 내릴때마다 해당 위치에서 효과를 넣어줄 요소들입니다. (data-숫자를 사용하는 ..

학원에서 배운 PHP 로그인 화면입니다. 배우면서 많이 안되는 부분이 있어서 답답했던적이 많았네요. 그래도 그덕에 학원 수업을 이해를 많이하게 된 것 같아요. 로그인.php코드 로그인 로그인을 하시면 게시글 및 댓글 작성이 가능합니다. 회원가입을 하면 로그인이 가능합니다. admin@admin.com/1234 로그인 영역 이메일 비밀번호 로그인 회원가입을 하지 않았다면 회원가입을 먼저 해주세요! 회원가입 아이디가 기억이 나지 않는다면! 아이디 찾기 비밀번호가 기억이 나지 않는다면! 비밀번호 찾기 코드설명 1.form이 중요하니간 form부터 보는게 좋을 것 같습니다. 2. form의 action에다가 경로를 입력하면 버튼 클릭시 그 경로로 이동을 합니다. 3. input에다가 내용을 입력하고 button..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 포트폴리오 준비도 할겸. 사이트를 만들때 효과를 더 주기 위해서 패럴렉스 고정된 방식을 배웠습니다. HTML코드+CSS코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다. 더 나은 미래를 향해 나아가려면 불확실성..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 문제를 풀었던 명언 30개에다가 추가하라는 미션을 받았습니다. 배경 이미지가 계속 변하게 만들라는 것입니다. (밑에가 랜덤 30개 미션이었습니다.) https://skadldldl123.tistory.com/manage/newpost/78?type=post&returnURL=https%3A%2F%2Fskadldldl123.tistory.com%2Fmanage%2Fposts HTML+CSS+JAVASCRIPT코드 2초만 기달려주세요 코드 설명 1. img태그를 하나 만듭니다. 2. let Img = document.querySelector("img"); querySelector("img");로 img태그를 찾습니다. 3. setInterval..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 ㅠ_ㅠ... set()을 이용해 보라고해서 이용했어요. 처음에 set으로 중복을 지우는데 중복이 계속 삭제가 되는거애요. 그래서 중복이 제거된 부분에 값들을 추가를 해봐도 중복이 계속 겹치더라고요. 그래서 다시 중복을 지우니간 중복이 제거가 되는겁니다.ㅠ_ㅠ (머리가 아파왔습니다.) 6시간 헤매고 난다음. 구글링 30분 하고나서야 set()의 비밀을 알았어요... for()을 이용해서 만들면 중복을 제거한다고 하더군요.. -_- 6시간을 뺏겼지만. 이전보다 배열에 대해 좀 더 알게 되어서 괜찮네요 (공부해야 하는데.. 못했어요.) 문제내용 자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하세요. set()을 꼭 이용할 것 / ..

완성된 모습 HTML 삽입 미리보기할 수 없는 소스 문제 내용 json파일에 배열로 생성한 내용이 30개가 있습니다. ("명언"과 "사람 이름" 입니다.) 여기에 저장된 내용들을 랜덤하게 출력을 하라는 문제입니다. 저는 2개로 만들어 봤어요. 1) 1개씩 차례대로 추출하는 방법입니다. (문제를 잘못 봐서 만들었어요. 지우기가 아깝네요.) 2) 랜덤으로 추출하는 방법입니다. 1) 1개씩 차례대로 추출하는 코드입니다. 3초만 기달려주세요 코드설명 1. fetch()로 json파일을 불러옵니다. 2. let Result, let Quote, let What은 명언, 사람 이름, 몇번인지 출력할 변수입니다. 3. setInterval은 주어진 시간만큼 반복적으로 실행합니다. 4. result.quotes[num..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 닷버튼 대신 썸네일이 있습니다. 썸네일을 클릭하면 슬라이드가 이동합니다 그리고 NEXT와 PREV버튼을 누르면 이동합니다. HTML+CSS코드 Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next mailto: skadldldl123@gmail.com 코드설명 1.div태그인 .slider__wrap은 안에 있는 내용물들을 전부 이동 시켜줍니다. 2.div태그인 .slider__img는 이제 슬라이드에 들어갈 이미지가 들어갑니다 (이것은 JAVASCRIPT로 넣어줄 예정입니다.) 3.div태그인 .slider__thumb은 이제 닷버튼 대신 들어갈 썸..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 닷버튼을 클릭하면 슬라이드가 이동을 합니다. Next와 Prev버튼은 선생님이 해주셨습니다. HTML+CSS코드 Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next mailto: skadldldl123@gmail.com 코드설명 (이번것도 HTML을 슬라이드 2번을 활용해서 만들어서 중복이네요) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번거는 슬라이드 4번을 이용해서 위로 올라가는 것을 만들어 보라는 미션입니다. (JAVASCRIPT, GSAP, JQUERY) HTML+CSS코드 Javascript Slider Effect05 슬라이드 이팩트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 mailto:skadldldl123@gmail.com 코드 설명 (역시나 슬라이드 2번을 재탕 중이네요) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘라줍니다. (주렁 ..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에도 슬라이드를 API 없이 코드를 입력하는 것 입니다. 이번에는 슬라이드가 연속적으로 자연스럽게 이동하는 것을 배웠습니다. (JAVASCRIPT, GSAP, JQUERY)를 활용했습니다. HTML+CSS코드 Javascript Slider Effect04 슬라이드 이팩트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (슬라이드 2번과 똑같은 HTML과 CSS라 설명이 중복이 됩니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 sli..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 이번 슬라이드도 API 없이 코드로 작성합니다. 이번거는 위로 이동하는 슬라이드 입니다. (1번과 2번을 활용해서 만들어보기 미션이었네요) HTML+CSS코드 Javascript Slider Effect02 슬라이드 이팩트 : 위로 움직이기 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (이번것은 2번을 활용하여서 HTML내용이 슬라이드 2번과 똑같습니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 ov..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 이번에도 API없이 코드로 만들어보는 슬라이드 유형입니다. 이번에는 absolute없이 사용하는 방법입니다. (JAVASCRIPT, GSAP, jQuery를 사용했습니다.) HTML+CSS코드 Javascript Slider Effect02 슬라이드 이팩트 : 좌로 움직이기 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (이번거가 특히 이해가 안가서 1시간 쳐보고 이해가 갔습니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 오늘은 슬라이드 만들기를 배웠습니다. API 없이 직접 코드로 짜는 연습을 먼저 했습니다. HTML + CSS 코드 Javascript Slider Effect01 슬라이드 이팩터 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (처음이라 슬라이드 배치 방법이 이해가 안가서 쳐보고 이해를 했습니다.) 1.div태그인 .slider__wrap은 전체적인 내용물들을 가운데로 배치해줍니다. (align-items는 안먹혀서 height값을 줬습니다.) 2.div태그 .slider__img는 .slider의 보여줄 만큼의 width를 주고 overflow를 줍니다. (여기에서는 이제 보여줄 width의 값만큼 지정해주고 ove..

오답 정리 1. 다음 중 디자인의 조건에 해당하지 않는 것은? ④ ① 합목적성 ② 심미성 ③ 경제성 ④ 유통성 2. 물리적인 빛이 우리의 눈에서 색채로 지각되어 범위의 파장 한계 내에 있는 스펙트럼을 의미하는 것은? ① ① 가시광선 ② 색청 ③ 색각 ④ 지각색 11. 색의 3속성에 포함되지 않는 것은? ③ ① 색상 ② 명도 ③ 대비 ④ 채도 12. 촉각적 질감에 대한 설명으로 틀린 것은? ① ① 촉각적 질감에는 장식적 질감, 자연적 질감, 기계적 질감 이 있다. ② 촉각적 질감은 눈으로 볼 수 있을 뿐 아니라 손으로 만 져서 느낄 수 있는 질감이다. ③ 촉각적 질감은 2차원 디자인의 표면과 함께 3차원의 양 각(relief)으로 확대하는 것이다. ④ 촉각적 질감의 연출방법에는 자연재료사용, 재료변형, 재..

오답 정리 1. 다음 중 디자인의 기본 요소들로 옳은 것은? ② ① 선, 색채, 공간, 수량 ② 점, 선, 면, 질감 ③ 시간, 수량, 구조, 공간 ④ 면, 구조, 공간, 수량 12. 다음 중 게슈탈트의 시각에 관한 법칙으로 볼 수 없는 것은? ④ ① 근접의 원리 ② 유사의 원리 ③ 연속의 원리 ④ 통일의 원리 13. 다음 디자인 형태 중에서 다른 성격을 지닌 것은 어느 것인가? ③ ① 추상적 형태 ② 기하학적 형태 ③ 유기적 형태 ④ 기능적 형태 17. 먼저 본 색의 영향으로 나중에 보는 색 이 다르게 보이는 현상은? ④ ① 동시대비 ② 면적대비 ③ 연변대비 ④ 계시대비 20. 오스트발트(Ostwald) 색상환은 무채색 축을 중심으로 몇 색 상이 배열되어 있는가? ④ ① 9 ② 10 ③ 11 ④ 24 ..

2015년 7월 오답노트 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? ① ①명도대비 ②색상대비 ③보색대비 ④채도대비 2.색의 주목성에 대한 설명으로 옳지 않은 것은? ④ ①명시도가 높으면 색의 주목성이 높다 ②채도 차이가 클수록 주목성이 높다 ③빨강은 초록보다 주목성이 높다 ④명도채와 채도가 낮은 색이 주목성이 높다 3. 디자인의 원리 중 비례에 대한 설명이 잘못된 것은? ① ①균형을 가장 많이 고려하여 구성해야 한다. ②부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. ③조형을 구성하는 모든 단위의 크기를 결정한다. ④객관적 질서와 과학적 근거를 명확하게 드러내는 구성 형식이다. 4. 색의 감정에서 저채도의 배색이 주는 느낌은? ① ①부드러운 느낌 ②명쾌한 느낌 ③화려..

(원본) 일러스트에서 펜툴 따기 일러스트를 활용해서 포트폴리오와 자기소개 페이지를 꾸미기 위해 일러스트에서 펜툴 도구에 대해 배웠습니다. (사용) 일러스트 펜툴 활용한 모습 포트폴리오에서 명함을 만들기 위해 연습한 결과입니다.

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 어제 완성된 코드에 3가지를 추가하라는 미션을 받았습니다. 1.문제를 맞추거나 틀렸으면 그것들을 표시해줄 것 2. 시간을 00:00으로 만들어 볼 것 3.input type="text"에 이름을 입력하면 "수험자"에 표시하기 1번 문제 : HTML코드+ JAVASCRIPT코드 맞춘개수 : 0 틀린개수 : 0 코드설명 1. em태그인 .cbt__score는 문제를 맞추면 갯수를 표시해줄겁니다. 2. em태그인 .cbt__wrong은 문제를 틀렸다면 틀린 갯수를 표시해줄겁니다. let wrong = 60; let hap = 0; if(numberAnswer == question.answer){ console.log("정답"); cbtselects[nu..

보충 작업 완성물 HTML 삽입 미리보기할 수 없는 소스 최종 완성된 사이트 어제가 지나고 화가 가라 앉으니간 어느정도 따라가기 시작하네요. HTML코드 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2011년 1회 웹디자인기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 59분 10초 답안지 제출하기 수험자 : 안교남 전체 문제수 : 0 남은 문제수 : 0 1 1 2 3 4 필기 시험 공부하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 200..

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 오늘은 CBT퀴즈 만들기를 따라 만들었습니다. 초반에는 이해가 갔다가 마지막에 너무 헷갈렸습니다. HTML코드 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2011년 1회 웹디자인기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 59분 10초 답안지 제출하기 수험자 : 안교남 전체 문제수 : 60문항 남은 문제수 : 59문항 1 1 2 3 4 코드설명 1. div태그 .container은 내용물들을 가운데로 옮겨주고. 반응형을 위해서 특정 max-width에서 퍼센트(%)을 줍니다. 2. div태그 .cbt__header은 "시험 종목", "남은 시간", "답안지 제출하기"를 담고 있습니다. 3. div태그 .cbt__header안..

틀린 것 : 4, 7, 10, 14, 15, 16 1번. 다음의 결괏값을 작성하시오. let num = 0; while(false){ num++; if(num == 3){ continue; } if(num > 10){ break; } } console.log(num); 답 : 0 설명 : while문은 true일때 조건을 반복합니다. false일떄는 while문을 벗어납니다. 2번. 다음의 결괏값을 작성하시오. let a=6, b=9, c=3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); 답 : 20, 21 설명 : 선연산자와 후연산자 입니다. 선연산자는 먼저 값이 적용되지만 후연산자는 1번 더 호출이 되어야 적용됩..

1번 문제. 이미지 위에 마우스 포인터를 올려 놓으면 다른 이미지로 변하고. 마우스가 밖으로 이동하면 원래의 이미지가 돌아옵니다. (자바스크립트는 mouseover와 mouseout을 사용해야합니다.) 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 HTML+CSS코드 코드 설명 1. div태그 .img1을 만듭니다.(여기는 재가 좋아하는 교촌치킨 윙봉 사진이 들어갑니다.) 2. div태그 .img2을 만듭니다.(여기도 재가 좋아하는 교촌치킨 닭다리만 사진이 들어갑니다.) 3. CSS에서는 .img1에다가 background-image로 이미지를 불러오고 width값과 height값을 줍니다. 4. .img2에다가 똑같이 background-image로 이미지를 불러오고 width값과 height값을..

1.원시 유형과 객체 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열로 예를 들겠습니다. let str = "hello" str.length; //5 자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데 이런 객체를 "래퍼 객체"라고 부릅니다. 2.문자열의 길이 : length 프로퍼티 ● 문자열.length 문자열의 길이를 찾을 때는 배열에서처럼 length프로퍼티를 사용합니다. let str = "Good morning!"; let greeting = "안녕하세요?"; str.length; //14 greeting.length; //6 3.문자열에서 문자의 위..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 링크 이번에는 여태까지 배웠던 header, section, slide, footer을 쪼개서 만들고 리액트를 배우기 전에 이것들을 하나하나 합치는 작업을 했습니다. 처음으로 복붙해서 CSS를 만들다보니 공통 요소의 중복된 이름 때문에 문제가 있었는데 해결했네요. 으으으으..... HTML코드 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 pizza 소개 훈련방법 교육방법 주의할점 공지사항 연락처 로그인 슬라이드 영역 event 야채, 과일, 고기의 좋은 점 영양가가 높다. 야채는 비타민, 미네랄..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번 퀴즈 사이트는 "다음 문제" 버튼을 누르면 정답체크와 다음 문제가 나오는 형태입니다. HTML코드 Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 6 정답입니다. 틀렸습니다. 다음 문제 맞춘개수 0개 / 총 : 0점 현재 : 1번 mailto:skadldldl123@gmail.com 코드 설명 1. div태그 중 .quiz__wrap은 "시험 종류", "시험 문제", "문제 내용", "버튼" 전부다 가지는 div태그 입니다. 2. div태그 중 .quiz__title은 "시험종류"와 "시험회차"를 가지고 있습니다. 3. div태그 중 .quiz__question은 "시험 번호"와 "시험 문제"를 가지고 있습니다. ..

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 올렸던 CSS 애니메이션이 궁금해서 공부했습니다. HTML코드 div태그 6개를 만듭니다. 애니메이션에 들어가는 꽃잎 6개 입니다. CSS코드 body { background-color: #000; display: flex; align-items: center; justify-content: center; height: 100vh; } .watch__face { animation: spring 3s cubic-bezier(0.5, 0, 0.5, 1) alternate infinite; width: 125px; height: 125px; } .circle { width: 125px; height: 125px; border-radius: 50%..