코딩해보자 :9156 프로그래머스 | Lv.1 수박수박수박수박수박수? 프로그래머스 코딩테스트 연습 문제지 코딩 영역 Lv.1 성명 수험 번호 - 수박수박수박수박수박수? 04. 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. * n은 길이 10,000이하인 자연수입니다. ex) n=3 => return = "수박수", n=4 => return = "수박수박" function solution(n) { var answer = ''; for(i=1; i "수박".repeat(n).slice(0,n); 다른 풀이 제일 깔끔한 풀이법이네요. 2022. 11. 1. 프로그래머스 | Lv.1 평균 구하기 프로그래머스 코딩테스트 연습 문제지 코딩 영역 Lv.1 성명 수험 번호 - 평균 구하기 03. 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. * arr은 길이 1 이상, 100 이하인 배열이며, arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. ex) arr = [1, 2, 3, 4] => return = 2.5 function solution(arr) { var answer = 0; let sum=0; for(let i=0; i a + b) / array.length; } 다른 풀이 reduce 메서드를 이용한 풀이입니다. 2022. 11. 1. 프로그래머스 | Lv.1 약수의 합 프로그래머스 코딩테스트 연습 문제지 코딩 영역 Lv.1 성명 수험 번호 - 약수의 합 02. 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. * n은 0 이상 3000이하인 정수입니다. ex) 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. function solution(n) { let answer = 0; for(let i = 1; i 2022. 11. 1. 프로그래머스 | Lv.1 짝수와 홀수 프로그래머스 코딩테스트 연습 문제지 코딩 영역 Lv.1 성명 수험 번호 - 짝수와 홀수 01. 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. * 제한 조건 : num은 int 범위의 정수이며, 0은 짝수입니다. function solution(num) { var answer = ''; if(num % 2 == 0){ answer = "Even"; } else { answer = "Odd"; } return answer; } 나의 풀이 %(나머지값)를 활용하여 2로 나눴을 때 나머지 값이 없으면 짝수, 있으면 홀수를 출력합니다. function evenOrOdd(num) { return num % 2 ? "Odd" : "Even".. 2022. 11. 1. EFFECT | GAME | 뮤직 플레이어 코딩하기 gameEffect | 👾뚠뚠 뮤직 플레이어 만들기👾 1. 사이트 구조 살펴보기 HTML 살펴보기 *** Music Player +++ A Year Ago NETFFEX 0:00 4:00 뮤직 리스트 CSS 살펴보기 3. script 살펴보기 🎧 선택자 만들기 🎧 음악 재생하기 🎧 버튼을 클릭했을 때 🎧 오디오가 끝났을 경우 🎧 진행바 설정하기 🎧 뮤직 리스트 설정하기 🎧 볼륨 조절 추가하기 원본 소스 보기 실제 사이트 보기 2022. 10. 17. EFFECT | SEARCH | sort( ), reverse( )를 이용하여 정렬하기 searchEffect | sort(), reverse()를 이용하여 정렬하기 오늘의 목표 💡 여러 정렬 구현하기(오름차순, 내림차순, 알파벳순, ...) 💡 랜덤 정렬하기 💡 카테고리별 정렬하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순(a~z) 알파벳순(z~a) 랜덤 정렬하기 카테고리별 정렬하기 animation background border column flex font grid inset line list margin mask max min offset outline overflow overscroll .. 2022. 10. 17. EFFECT | SEARCH | filter()를 이용하여 속성의 중요도 보여주기 searchEffect | filter()를 이용하여 속성의 중요도 보여주기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 중요도에 따라 리스트 나타내기 오늘의 미션 👉🏻 난이도 1개 이상, 2개 이상,... 버튼 구현하기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 난이도.. 2022. 10. 17. EFFECT | SLIDER | 버튼과 닷버튼 형식의 이미지 슬라이드 sliderEffect | 버튼과 닷버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 HTML 살펴보기 화면 아래 닷버튼이 추가되었습니다. prev next CSS 살펴보기 닷버튼 디자인이 추가되었습니다. 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | currentIndex 값에 1.. 2022. 10. 17. EFFECT | PARALLAX | 리빌 효과 parallaxEffect | 리빌(Reveal) 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 이미지와 글씨에 리빌 효과 주기 1. 사이트 구조 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느냐가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야.. 2022. 10. 17. EFFECT | PARALLAX | 텍스트 효과 parallaxEffect | 텍스트 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 글씨가 한글자씩 나타나는 효과주기 1. 사이트 구조 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느냐가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있어서는 안된다. 반드시 실천하여야 한다. 0.. 2022. 10. 17. EFFECT | MOUSE | 텍스트 효과 mouseEffect | 텍스트 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 글자가 접혀서 움직이는 듯한 효과주기 👉🏻 글자에 마우스 커서를 올리면 커서가 확대되면서 글자 반전 효과주기 1. 사이트 구조 살펴보기 HTML 살펴보기 글자를 왼쪽과 오른쪽 부분으로 나눠 구조를 짜주었습니다. Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 살펴보기 shew 속성과 overflow 속성을 사용하여 글자가 접혀서 나오는 듯한 효과를 주었습니다. 2. script 살펴보기 📌 글씨의 움직임과 cursor 설정하기 마우스 커서의 pageX, pageY을 구하고 window.innerWidth의 절반 값을 빼서 텍스트가 이미지.. 2022. 9. 30. SEARCH | 검색 유형04 searchEffect | find()를 이용하여 속성 설명 나타내기 오늘의 목표 💡 스크립트를 통해 속성 리스트를 나타내기 💡 데이터를 입력하고 리스트와 비교하여 설명 출력하기 오늘의 미션 👉🏻 속성 버튼을 클릭했을 때도 설명 출력되도록 만들기 1. 사이트 구조 살펴보기 HTML 살펴보기 속성 목록은 자바스크립트로 표현해주기 위해 비워두었습니다. find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다. !!! CSS 속성 갯수 : 2. script 살펴보기 📌 속성 리스트 만들고 출력하기 속성 리스트는 cssProperty 내 배열 속 객체로 만들어주었고 map을 활용하여 출력해주었습니다. 📌 속성을 검색했을때 설명 출력하기 addEven.. 2022. 9. 29. EFFECT | MOUSE | 이미지 기울기 / 글자 반전 효과 주기 mouseEffect | 기울기 효과 / 글씨 반전 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 이미지가 기울어지는 효과주기 👉🏻 마우스 커서와 글/이미지가 만나는 부분은 반전효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. 📌 will-change 요소에 적용할 변화의 종류를 미리 브라우저에게 알려주는 역할을 함으로써, 실제 요소가 변하기 전에 미리 브라우저를 그에 맞게 최적화시키는 속성입니다. - will-change 적용시 원래보다 더 오랜 시간 최적화를 유지해야하기 때문에 스크립트를 통해 변화 전후에 활성/비활성을 설정해주는 것이 좋습니.. 2022. 9. 28. CSS | ANIMATION | 마우스를 따라 움직이는 눈 마우스를 따라 움직이는 눈동자 애니메이션👀 마우스와 키보드에 따라 눈동자가 움직이도록 애니메이션을 만들어봅시다 ~! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 요리조리 #2. CSS(SCSS) 코드를 확인해보자 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-sty.. 2022. 9. 26. CSS | ANIMATION | 빙빙 돌아가는 로딩 만들기 2022. 9. 26. EFFECT | MOUSE | 마우스 커서 움직임 반대로 이미지 움직이기 mouseEffect | 이미지 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 이미지가 반대로 움직이는 효과주기 👉🏻 마우스 커서 디자인이 이미지 안에서만 따라다니도록 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 + object-fit: cover; background-size: cover;와 같은 역할을 하는 속성으로 배경이 아닌 이미지에 사용할때 쓰이는 속성입니다. HTML 살펴보기 영화 '쥬토피아'에 나오는 명언을 넣어주었습니다. Don't beat yourself up. Don't need to run so fast. Sometimes we coma last but we did our best. 자신을 자책하지마, 너무 서두르지 않아도 돼. 마지막으로 들어왔더라도 최선을 다했으면 .. 2022. 9. 23. EFFECT | MOUSE | 배경 조명 효과주기 mouseEffect | 배경 조명 효과 오늘의 목표 👉🏻 마우스 커서 움직임에 따라 배경 사진에 조명을 비추는 느낌으로 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 span으로 감싼 글자는 키워드로 색깔을 다르게 주었습니다. cursor 디자인도 따로 조명을 비추는 듯한 느낌으로 디자인 했습니다. HTML 살펴보기 영화 '니모를 찾아서'에 나오는 명언을 넣어주었습니다. The best moment suddenly comes. 최고의 순간은 갑자기 찾아오는 거야. 2. script 살펴보기 📌 cursor에 움직임에 따라 배경이 컬러로 보일 수 있는 이유 cursor 자체에 background-image를 넣고 위치와 크기를 맞춰준 다음 fix시켜 마우스의 움직임에 따라 보일 수 있도록 설정해주었.. 2022. 9. 22. CSS | ANIMATION | 늘어났다 줄어났다 반복하는 정육면체 쫘아아악 늘어나는 정육면체 🎲 정육면체가 위아래로 늘었다 줄었다 반복하는 애니메이션을 만들어봅시다요 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 정육면체 면 6개를 만들어줍니다. 코딩하자:9 #2. CSS(SCSS) 코드를 확인해보자 body { background-color: #333; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3.. 2022. 9. 22. CSS | ANIMATION | 위아래로 움직이는 글자 효과 만들기 글자가 올라왔다 내려갔다 반복하는 효과 ⇡⇣ 글자가 '점핑저점핑'하는 효과를 만들어봅시다 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 글자마다 span으로 감싸서 만들어줍니다. I ' m G y u p p #2. CSS(SCSS) 코드를 확인해보자 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, black 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: .. 2022. 9. 22. CSS | ANIMATION | 입체감 있는 마우스 오버효과 입체감 있는 카드 마우스 오버효과🖱 마우스를 올리고 내릴때마다 입체감 있게 돌아가는 마우스 오버 효과 적용 방법을 배워봅시다 ~ See the Pen MouseHoverEffect by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 Right Mouse Hover Effect 마우스 내리면 Left #2. CSS(SCSS) 코드를 확인해보자 body { font-family: 'LocusSangsang'; background-image: linear-gradient(135deg, #191970 0%, .. 2022. 9. 20. EFFECT | PARALLAX | 스크롤에 따라 이질감 나타내기 parallaxEffect | 이질감 효과 오늘의 목표 👉🏻 스크롤을 내렸을때 사진은 위로, 글씨는 옆으로 이동시켜 이질감 효과 나타내보기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다. 06 section6 마음만을 가지고 있.. 2022. 9. 20. CSS | ANIMATION | 울렁울렁 웨이브 만들기 울렁울렁 웨이브 애니메이션 만들기 ➰ 원 형태의 여러 점에 스핀 효과와 스케일 효과를 적용하여 웨이브처럼 보이게 만들어 보았습니다. 이번엔 Pug와 SCSS를 활용해서 만들었으니 참고해주세요 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML(Pug) 코드를 확인해보자 div.circle-wrap - for (var x =1; x 2022. 9. 19. STEP | VSCode | SCSS 설치 및 실행방법 ⚙️ STEP | VSCode | SCSS 설치 및 실행방법 VSCode에서 SCSS를 설치하는 방법부터 실행하는 방법까지 알아봅시다. * SCSS CSS Preprocessor(전처리 프로그램) 중 하나로 CSS와 유사하지만 좀 더 다양한 기능으로 편리하게 사용할 수 있게 해주는 프로그램입니다. 당연히 CSS가 아닌 전처리 프로그램이기에 웹에서 직접 작동하지는 않으며, 작동할 수 있도록 CSS로 컴파일 후 작동할 수 있게 됩니다. 1 우선 Extension에서 Live Cass Compiler를 설치해줍니다. 2 설정에서 json 검색하고 User Settings 파일을 열어줍니다. 3 아래 표시된 부분을 추가시켜 줍니다. map 파일이 필요하신 분들은 "liveSassCompile.settings.g.. 2022. 9. 19. EFFECT | MOUSE | 마우스 따라다니기(GSAP) mouseEffect | 마우스 따라다니기(GSAP) 오늘의 목표 👉🏻 GSAP를 활용해 더 부드럽게 마우스 효과 설정하기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 Success isn't permanent, and failure isn't fatal. 성공은 영원하지 않고, 실패는 치명적이지 않다. 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. EFFECT | MOUSE | 마우스 따라다니기 mouseEffect | 마우스 따라다니기 오늘의 목표 👉🏻 마우스 커서 대신 css로 디자인한 모양이 마우스를 따라다니도록 설정하기 👉🏻 강조하고 싶은 글자에 커서를 가져갔을 떄 다양한 효과주기 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 You can't be more than others if you do like others 남과 같이 해서는 남 이상이 될 수 없다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px 2. script 살펴보기 원본 소스 보기 실제 사이트 보기 2022. 9. 19. EFFECT | PARALLAX | 스크롤에 따라 이미지 서서히 나타내기 Parallax Scroll 효과 오늘의 목표 👉🏻 스크롤을 내리면 차례대로 내용이 나타나도록 설정하기 👉🏻 나타날때 효과 설정하기 (rotate, skew, cubic-bezier, ...) 1. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 01 section1 우선 무엇이 되고자 하는가를 자신에게 말하라 그리고 해야 할일을 하라. 02 section2 이미 끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지 못한 것을 후회하라. 03 section3 문제는 목적지에 얼마나 빨리 가느내가 아니라 그 목적지가 어디냐는 것이다. 04 section4 도저히 손댈 수가 없는 곤란에 부딪혔다면 과감하게 그 속으로 뛰어들라. 05 section5 당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대.. 2022. 9. 19. SLIDER | 이미지 슬라이더 | 버튼 형식의 이미지 슬라이드 sliderEffect | 버튼 형식의 이미지 슬라이드 오늘의 목표 ❔problem 첫번째 이미지에서 이전 버튼을 누르면 마지막 사진으로 넘어가야 하며, 마지막 이미지에서 다음 버튼을 누르면 첫번째 사진으로 넘어가야 합니다. ❗️solve if문을 활용하는 방법과 if문 없이 해결하는 방법이 있으며, 오늘 보여드릴 방법은 if문 없이 해결하는 방법입니다. 1. 사이트 구조 살펴보기 CSS 살펴보기 이미지를 좌우로 이동할 수 있는 버튼 부분이 추가되었습니다. HTML 살펴보기 마찬가지로 양쪽 버튼이 추가되었습니다. prev next 2. script 살펴보기 이미지가 움직이는 영역 | 매개변수 num을 활용하여 이미지의 가로값만큼 x축으로 이동할 수 있도록 설정해줍니다. ⇢ next 버튼 설정 | curr.. 2022. 9. 19. SITE | 모든 유형을 합쳐서 SITE를 완성해보자 :9 사이트 제작부터 반응형 적용까지 해보자:9 지금까지 배운 헤더, 배너, 슬라이드, ... 등의 타입들을 조합하여 반응형 사이트를 만들어봅시다. ✔︎ 결과 확인하기 전체 소스 보기 실제 사이트 보기 #header 💡 햄버거 메뉴를 사용해주었습니다. 화면 크기 1300px부터는 헤더 메뉴를 보이지 않게 처리하고 햄버거 메뉴로 대신하게 만들었습니다. * 햄버거 메뉴 : 주로 앱 상단 모퉁이에 위치하며, 메뉴를 토글하거나 네비게이션 바의 역할을 합니다. ⚠ 햄버거 메뉴를 열었을 때 스크롤이 생기는 현상을 막아주었습니다. script로 햄버거 메뉴를 클릭했을 때, body에 class="fixed"를 추가시켜 해결해주었습니다. ⚠ 햄버거 메뉴를 열어놓은 상태에서 화면크기를 최대로 키웠다가 다시 줄였을 때 메뉴가 .. 2022. 9. 15. MYSQL MYSQL v1.0 💡 MYSQL MYSQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MYSQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MYSQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스로 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, cafe24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. 💡 MYSQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP의 약어이자 솔루션 스택이다. http://www.mwmp.info/en/downloads/ 💡 MYS.. 2022. 9. 15. 웹디자인기능사 | 실기 | 쿡킷 🍪 웹디자인기능사 실기 | 쿡킷 사이트 만들기 1. 웹디자인기능사 실기 요령 ckick 시험장마다 Emmet이 안되는 곳이 있을 수 있음 👉🏻 드림위버 자동 완성 기능 활용하기 모든 css, js는 링크로 달기 (시험조건) 👉🏻 항상 링크를 걸었으면 사이트에 연동되는지 확인하고 넘어가기 style에 쓸때 복사/붙여넣기 습관 들이기 👉🏻 쓰면서 하다가 오류가 생기면 발견하기 어려움 2. 사이트 구조 살펴보기 CSS 살펴보기 HTML 살펴보기 Cookit 소개 sub-menu1 sub-menu1 sub-menu1 sub-menu1 Cookit 메뉴 sub-menu2 sub-menu2 sub-menu2 sub-menu2 리뷰 sub-menu3 sub-menu3 sub-menu3 sub-menu3 이벤트 sub-m.. 2022. 9. 14. 이전 1 2 3 4 5 6 다음
