숨만쉬어도 귀여운타입:D

푸드 파이트 대회! 문제보러가기 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다. 이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 더 잘 먹을 수 있게 하려고 합니다. 이번 대회를 위해 수웅이는..

명예의 전당 (1) 문제보러가기 문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의 전당에서 내려오게 됩니다. 이 프로그램에서는 매일 "명예의 전당"의 최하위 점수를 발표합니다. 예를 들어, k =..

예전에 풀다 못푼 대충만든자판 을 풀어봤어용 ! 문제 설명 휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다. 예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가 할당되어 있다면 1번 키를 한 번 누르면 "A", 두 번 누르면 "B", 세 번 누르면 "C"가 되는 식입니다. 같은 규칙을 적용해 아무렇게나 만든 휴대폰 자판이 있습니다. 이 휴대폰 자판은 키의 개수가 1개부터 최대 100개까지 있을 수 있으며, 특정 키를 눌렀을 때 입력되는 문자들도 무작위로 배열되어 있습니다. 또, 같은 문자가 자판 전체에 여러 번 할당된 경우도 있고, 키 하..

추억점수 ! 문제보러가기 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입..

달리기 경주 ! 문제보러가기 문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 ..

입력받은 문자열 나누기 ! 문제 설명 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 so..

IntelliJ IDEA 환경설정 하기 1. IntelliJ IDEA 설치 인텔리제이를 만든 젯브레인의 제품을 전체를 관리해주는 데트크톱앱 다운 ! 모든제품군의 버전관리 & jvm옵션 등 조정할수있다고 하네용 https://www.jetbrains.com/ko-kr/toolbox-app/ JetBrains Toolbox App: 도구를 간편하게 관리 www.jetbrains.com 위사이트에서 다운로드 ! 실행하여 설치 한뒤 db를 이용하기위해 datagrip 설치 IntelliJ IDEA Community Edition을 받았어요 설치완료후 실행 ! 2. gradle 프로젝트 생성 & 스프링 설정 요기서 프로젝트 name과 groupId ArtifactId를 설정해요 Build system은 Gradl..

오답문제 풀이를 해볼게요 ! 01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } i값 sum값 1 __ 1 2 __ 2 3 __ 2 4 __ -2 5 __ 3 6 __ 18 7 __ 18 8 __ 10 9 __ 19 10 __ 190 02. 다음의 결괏값을 작성하시오. { 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[..

JAVASCRIPT로 music player를 만들어볼게요 ! 게임효과 -1 (Jquery , gsap) 전체소스보러가기 이전소스도 참조해 주세요 ! 오늘은 뮤직플레이어 기능을 추가 할거에요 재생, 정지, 다음곡, 이전곡, 진행바(duration)기능, 시간계산 요런 기능들을 추가했어요 먼저 HTML부분을 볼게요 ! Music 노래 제목 노래 작가 이름 0 1 구조는 요렇게 잡았구요 재생관련 아이콘들은 svg파일을 이용해서 이미지를 넣어줬어요 ! 스크립트 부분 볼게요 ! // control-play let musicIndex =1; //현재 음악 인덱스 // 음악재생 const loadMusic=(num)=>{ musicName.innerText = allMusic[num-1].name; //뮤직 이름 ..

JAVASCRIPT로 GAME 효과를 줘볼게요 ! 먼저 HTML부분을 볼게요 ! grovy game word 뮤직듣기 뮤직듣기 뮤직듣기 뮤직듣기 JQUERY와 GSAP 스크립트를 이용하려고 하단에 추가했구요 GAME느낌을 내기위해 SVG 파일을 백그라운드에 넣었어요 ! 스크립트 부분 볼게요 ! 자바스크립트 부분을 볼게요 ! 1. 온로드시 마우스 이미지를 변경하여 따라다니게 했어요 ! window.onload = function(){ window.addEventListener("mousemove",e=>{ gsap.to(".cursor", { duration : 0.1, left : e.pageX-5, top : e.pageY-10 }); }); } 2. 시간을 우측상단에서 매초 바뀌게끔 했습니다. fun..

at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 객체들을 알아볼게요 ! at() at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. const array1 = [5, 12, 8, 130, 44]; let index = 2; console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`); // Expected output: "Using a..

오답풀이를 해볼게요 ! 자바스크립트 문제 01. 다음의 결괏값을 작성하시오. { 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) } 2 -1 3 15 9 16 128 119 129 답은 129 나와요 마지막에 안더해줘서 틀림 ㅜㅠ 02. 다음의 결괏값을 작성하시오. { 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]; ..

패럴랙스효과주기 skrollr.js 을 이용한 iframe의 width값이 작아 잘안나와요 ㅜ 느낌만 봐주세요 ! skrollr.js 란? skrollr은 JavaScript 라이브러리로, 스크롤 이벤트를 이용하여 웹사이트에 다양한 애니메이션을 적용할 수 있습니다. 보다 쉽게 css 애니매이션효과를 쉽게 줄수있어요 공식홈페이지를 가시면 좀더 다양한 예제와 설명을 볼수 있어요 ! https://prinzhorn.github.io/skrollr/ skrollr - parallax scrolling for the masses all numeric properties width, height, padding, font-size, z-index, blah blah blah prinzhorn.github.io 전체..

https://www.hellomonday.com/ Hello Monday Hello Monday is a creative studio in New York, Copenhagen, and Aarhus that handcrafts digital (and magical) products, brands, and experiences. www.hellomonday.com 마우스 커스가 돋보이는 사이트 ! https://wantedfornothing.com/ Wanted For Nothing | Top Rated Web Design Agency Los Angeles Wanted for Nothing is a Los Angeles based tactical design agency that focuses on UX..

웹디 실기 연습사이트를 만들어 봤어요 ! 캡쳐 이미지와 같은 느낌으로 만들었구요 iframe으로 가져오니 화면이 짤리네요 ㅜㅜㅜ 전체소스 보기는 요기루 오느른 스크립트만 보구 갈게용 $(function(){ let currentIndex = 0; $(".sliderWrap").append($(".slider").first().clone(true)); setInterval(function(){ currentIndex++; $(".sliderWrap").animate({marginLeft:-100*currentIndex + "%"},600); if(currentIndex == 3){ setTimeout(function(){ $(".sliderWrap").animate({marginLeft:0},0); cur..

2023웹디 기능사 실기문제를 만들어볼거에요 사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~' 요렇게 만들어졌구요 요 레이아웃을 보구 만들었어요 html부분 강원천문대 강원천문대 천문대 소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 천문과학교육관 시설 소개 영상강의실로 놀러오세요! 천문과학교육관 이용 안내 어린이를 위한 천문 과학관! 별을 보는 고요한 정상 강원천문대로 놀러오세요! 공지사항 | 갤러리 강원천문대 2023년 휴관일 안내2023.05.11 강원천문대 2023년 온라인 예매2023.05.10 강원천문대 휴관일 및 이벤트 안내2023.05.09 강원천문대 휴관일 안내2023.05.08 강원천문대..

2023웹디 기능사 실기문제를 만들어볼거에요 사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~' 요렇게 만들어졌구요 요 레이아웃을 보구 만들었어요 html부분 산업대학교 대학소개 총장인사말 학교소개 홍보관 캠퍼스안내 입학안내 수시모집 정시모집 편입학 재외국인 정보서비스 정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 미래를 이끄는 열정 산업대학교 미래를 이끄는 열정 산업대학교 미래를 이끄는 열정 산업대학교 공지사항 2023년 신입생 모집중2023.05.01 융합전공멘토링 학생 모집2023.05.02 학과 및 학년 별 참여2023.05.03 졸업생 취업박람회2023.05.04 우리학교풍경 산업대학교 2023 체육대전 바로가기 개인정보처리방침 정보 공개 홈페이지 운영지침 15073..

프론트 앤드 개발자 ? 정확히 무슨 작업을 하는지 알아봐용 프론트엔드 개발자의 업무는 대체로 다음과 같습니다. 프론트엔드 개발자(Frontend Developer)는 웹사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 합니다. 프론트엔드 개발자는 사용자가 웹 페이지나 앱을 사용할 때 보게 되는 모든 것을 디자인하고 개발합니다. 이는 HTML, CSS, JavaScript를 사용하여 구현합니다. 웹 사이트 또는 앱의 UI 디자인 구현 디자인을 시안으로 받아 UI 디자인을 HTML/CSS/JavaScript 등의 프로그래밍 언어로 구현합니다. 웹 사이트 또는 앱의 사용자 경험(UX) 개선 사용자 경험을 개선하기 위해 UI를 개선하거나 기능을 추가합니다. 반응형 웹 디자인 구현 모바일, 태블릿, 데스크..

웹디기능사 실기 연습을 해볼게요 ! https://getgrovy.github.io/web2023/webd/index.html 웹디자인기능사 실기 레이아웃 getgrovy.github.io 요기에 들어가시면 유형별로 작업해둔걸 볼수 있어요 ! https://github.com/getGrovy/web2023 에는 소스있으니 참조 부탁드려요 !

2015년 7월 19일 필기 기출문제입니다. 5. NICS 표색계에 대한 설명으로 옳은 것은? ①기본 6색 중 흰색과 검정은 포함되지 않는다. ②20% 흰색도와 30%의 유채색도를 표시하고 90%는 노랑색도를 지닌 백색이다. ③색상환은 노랑(Y), 빨강(R), 파랑(B), 초록(G)으로 구분되어 있다. ④색자각 양의 합은 100 이며, 이것은 명도, 채도, 색상의 합이다. 오스트발트 표색계와 관련된 내용 10. 빛이 눈의 망막 위에서 해석되는 과정에서 혼색효과가 가져다주는 가법혼색으로 점표파 화가들이 많이 사용 하였고, 디더링의 혼색원리이기도 한 혼합방법을 무엇이라 하는가? ①감색혼합 ②중간혼합 ③회전혼합 ④병치혼합 병치혼합은 선이나 점이 조밀하게 교차·나열되었을 때 마치 인접한 색과 혼합된 것처럼 보이..

많이는 봤지만 정확히는 몰랐던 차이 절대 길이 단위 절대 길이 단위는 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주된다. (ex. px, pt, cm, mm 등) 예를들어 10px이라는 값을 입력한다고 했을때 10px은 주변의 어떠한 요소와도 상관없이 고정된 값을 가진다. 절대 길이 단위는 예로 든 단위 외에도 단위가 더 있지만 실질적으로는 px, pt 정도만 사용된다. 사실 절대 길이 단위는 그냥 10px 찍으면 10px짜리 무언가가 되기 때문에 어떻게 보면 너무나 당연한 개념이다. 사실 우리가 정확히 의미를 잘 모르고 쓰는 단위는 상대 길이 단위일 확률이 높다. em과 rem 상대 길이 단위 em과 rem은 글꼴의 크기를 나타낼때 사용하는 단위이다. 상위요소의 글꼴 크기에 em은 비례해서 크..

문자 관련 스타일 정리 13가지 정도 스타일을 정리해볼까해요 ! font-familly 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 (' ')따옴표로 감싸고 여러 개의 글꼴을 (,)쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. ex) font-family: '돋움', Arial; font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위는 다음과 같은 것들이있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. ex) font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위입니다. ex) font-size: ..

grid 요소 ? grid layout은 요소들이 포함된 큰박스에 grid 를 선언 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것! HTML 삽입 미리보기할 수 없는 소스 위와 같이 적용할수있다~ grid 요소 grid-template-areas: "header header" "nav nav" "aside section" "footer footer" ; //구성 grid-template-columns: 30% 70% ; //columns 사이즈 grid-template-rows: 50px 50px 78px 50px ; // rows 사이즈

flex 요소 ? flex layout은 요소들이 포함된 큰박스에 flex를 선언 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것! HTML 삽입 미리보기할 수 없는 소스 참고사항 ! flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없습니다. display: flex; flex-wrap: wrap; // flex 타입으로 설정하며 유연하게 레이아웃설정

CSS의 선택자(Selector)를 알아봐요 안에 기입해야해 ! 1. 전체 선택자 (Universal Selector) 문서 내의 모든 요소를 선택합니다. 사용 방법: * { } 2. 요소 선택자 (Type Selector) 특정 요소의 태그 이름을 사용해 선택합니다. 사용 방법: h1 { color : blue } 3. 클래스 선택자 (Class Selector) 특정 클래스 속성을 가진 요소를 선택합니다. 사용 방법: .container {color : red} 4.. 아이디 선택자 (ID Selector) 특정 아이디 속성을 가진 요소를 선택합니다. id요소는 중복불가 & 유일해 ! 사용 방법: #id {color : red} 5. 속성 선택자 (Attribute Selector) 특정 속성을 가진..

만다리나덕 노마드 백팩 리뷰 해볼게용 ! 노트북을 17인치로 바꾸고나서 기존에 쓰던 가방에 노트북이 들어가지 않아 새로운 가방을 찾다 옛날에 살까 말까 고민했던 만다리나덕 노마드 백팩을 충동구매했어요 사진보구 갈게용 ! 가방은 17인치 그램같은 경우 조금 빡빡하게 들어가요 , 오른쪽 위 사진 참조 ! 16인치 노트북들은 여유있게 들어갈듯 싶어요 ! 앞&옆에 있는 포켓에는 지갑 & 텀블러넣기가 편하고 위 사진의 빨간색 부분으로 가방 밑부분을 고정시킬수 있어 무거운 짐을 넣어도 바닥이 울퉁불퉁하게 나오지 않아좋아용 자꾸 보다 보니 가방이 내눈에 쉽게 질리지 않아 잘산거 같아요 ㅎㅎ .. 가격은 요정두구 면세점+쿠폰 이면 더 싸게 살수있어용 ... !