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

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 슬라이드 효과 주기 - type 4 가로 무한 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } /* 이미지가 보이는 영역 */ .slider__img { ..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect04 슬라이드 이펙트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } /* 이미지가 보이는 영역 */ .slider__img { position: relative; width:..

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..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect02 슬라이드 이펙트 : 상하로 움직이기 1 2 3 4 5 getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 .slider__inner 는 전체 이미지를 감싸고 있는 부모박스 : 이미지가 움직이는 영역이에용 그리고이미지를 .slider__inner로 묶어주면서 display에 flex 설정해줘서 이미지를 옆으로 쭉 보이게 했어요 아래처럼용 이미지가 보이는 영역 을 설정해줬어요 width와 height를 설정하고 orv..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세로 전체 소스는 요기 body를 볼게요 ! Javascript slider Effect02 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 .slider__inner 는 전체 이미지를 감싸고 있는 부모박스 : 이미지가 움직이는 영역이에용 그리고이미지를 .slider__inner로 묶어주면서 display에 flex 설정해줘서 이미지를 옆으로 쭉 보이게 했어요 아래처럼용 이미지가 보이는 영역 을 설정해줬어요 width와 height를 설정하고 orver..

슬라이드 효과를 자동으로 나타내기 슬라이드 효과 주기 - type 1 나타내기 슬라이드 효과 주기 - type 2 가로 슬라이드 효과 주기 - type 3 세 전체 소스는 요기 body를 볼게요 ! getgrovy@gmail.com 위처럼 body영역엔 이미지만 넣어줬어요 ! css영역을 볼게요 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img{ width: 800px; height: 450px; position: relative; overflow: hidden; } .slider { position: absolute; left: 0; top..

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

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

추억점수 ! 문제보러가기 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["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)점입..

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

달리기 경주 ! 문제보러가기 문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 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..

이번생에 첨으로 일러스트 작업을 해봤어요 ! 수업시간에 일러스트로 작업을해봤어요 요렇게 두개의 이미지를 그려봤어요 ! 토끼 그림은 채색까지 완료했고 크리스마스의 악몽은 선을 따다가 수업종료... 나중에 완료해야겠쬬 .. ? 작업한 순서를 gif로 만들어봤어용 선만따다 수업시간이 끝나서 너무 아쉬워요 ... 담엔 더 빨리해야겠어요 !

퀴즈 사이트 만들기 ! ( 객관식유형 * 60문제 한번에 만들기+json형식 ) ver.3 어제 만든것에서 오늘은 좀더 소스를 다듬을거에요 사용자 이름 입력 받는것 & timer 스크립트를 변경했어요 전체 소스는 요기 주요 소스를 볼게요 ! 1. 객체지향 프로그램에서 데이터를 추상화하는 단위는? ... 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어는 이다. 객체지향언어 제출하기 수험자 : 전체 문제수 : 0문항 남은 문제수 : 0 점수 : 0 1 정보처리 & 웹디자인 기능사 정보처리기능사 2005년 2회 .... 정보처리기능사 2011년 5회 웹디자인기능사 2009년 5회 웹디자인기능사 2016년 4회 과목을 선택하세요. 시작하기 ..

퀴즈 사이트 만들기 ! ( 객관식유형 * 60문제 한번에 만들기+json형식 ) ver.2 어제 만든것에서 오늘은 좀더 소스를 다듬을거에요 오답처리 부분 & 라벨 처리 부분 & 사용자 이름 입력 받는것 & timer 스크립트를 변경했어요 전체 소스는 요기 주요 소스를 볼게요 ! 2020년 1회 정보처리기능사 기출문제 제출하기 수험자 : 황상연 전체 문제수 : 0문항 남은 문제수 : 0 정보처리 & 웹디자인 기능사 정보처리기능사 2005년 2회 .... 정보처리기능사 2011년 5회 웹디자인기능사 2009년 5회 ... 웹디자인기능사 2016년 4회 시작하기 위처럼 body영역엔 소스가 없고 스크립트에서 소스를 cbt_quiz, cbt_omr에 소스를 뿌려 주는건 ver1과 동일해요 모달창을 시작할때 실행..

퀴즈 사이트 만들기 ! ( 객관식유형 * 60문제 한번에 만들기+json형식 ) 이번엔 객관식 퀴즈 60문제가 있는 사이트를 만들어볼까해요 60문제와 omr 카드가 같이 나오게 만들어 봤어요 전체 소스는 요기 주요 소스를 볼게요 ! 2012년 2회 웹디자인기능사 기출문제 59분 10초 제출하기 수험자 : 전체문제수 : 남은문제수 : 위처럼 body영역엔 소스가 없고 스크립트에서 소스를 cbt_quiz, cbt_omr에 소스를 뿌려 줄거에요 데이터 불러오는 부분 //데이터 불러오기 const dataQuestion = () => { fetch("json/gineungsaWD2012_02.json") //이 json파일을 가져올거에요 .then(res => res.json()) //res.send()는 se..

가장가까운 같은글자 위치를 찾기! 문제보러가기 문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다. b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. a는 자신보다 두 칸 앞에 a가 있습니다. 이는 2로 표현합니다. n도 자신보다 두 칸 앞에 n이 있습니다. 이는 2로 표현합니다..

웹 디자인 기능사 시험 실기 연습을 해봤어요 ! 위와 같은 사이트를 만드는거에요 ! body에서는 구조만 잡아줬어요 1즐길거리 요금/무대혜택 참여프로그램 이용가이드 소통서비스 롯데월드 소식 그럴싸진관 미라클20220.09.3 이용요금조정피마클20220.09.3 드림스테이지 힘내미라클20220.09.3 드림 스테이지 햄내 소주한잔 미라클20220.09.3 더보기 특별한경험 연간회원안내 프리미엄투어 공연참여프로그램 단체프로그램 서울특별시 서초구 올릭픽로 240 호텔롯데 롯데월드 | 대표자 : 희석 사업자등록번호 : 219-85-00014 | 통신판매신고번호 | 송파 | 전화 : 1661-2000 COPYRIGHT 2022 LOTTEWORD.ALL.RIGHT RESERVED 요기는 css 에요 * { marg..

학원에서 시험 봤어요 같이 풀어봐요 ! 01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } while 문에 false가 있어서 실행되지 않아요 ! 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } a는 ++a b는 b++ c는 --c 이여서 b만 후치 연산자여서 result는 7 + 9 + 4 이후 연산이 끝나면 b값이 1증가하여 21이 나옵니다. 03. ..

크기가 작은 부분문자열 javascript 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다. 제한사항 1 ≤ p의 길이 ≤ 18 p의 길이 ≤ t의 길이 ≤ 10,000 t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다. 입출력 예 t p result "3141592" "271" 2 "..

마우스 위치에 따른 이미지 변경 위에서 mouseover & mouseout 이벤트가 발생할때 마다 img의 src 값을 변경 하였어요 ! 첫번째 문제라 난이도가 easy하네요 메뉴의 버튼을 클릭했을때 마다 슬라이드 토글 클릭해주세요 Javascript Typescript Node.js classList.toggle?? Element.classList classList는 DOMTokenList 객체로 element의 class 속성을 보여주고 & classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다. 그니까 우리가 코드를 작성할때 classList로 속성값을 추가하거나 값을 변경할수 있어요 ! Element.classList.toggle toggle은 동전의 앞면과..

String 사용 방법에 대해 알아볼게요 문자열 property length 문자열의 길이를 반환 합니다. 아래에서 선언한 str의 길이 42를 반환해요 ! const str = 'Life, the universe and everything. Answer:'; console.log(`${str} ${str.length}`); // Life, the universe and everything. Answer: 42 문자열 method 와 쓰이는 방식 1)charAt() 메서드 & for 문 & for in 문 charAt() 특정 문자의 위치를 반환 합니다. 또한 필요할땐 Object 형태 임시로 변경이 되어 사용이 가능해요 사용이 끝나면 String형태로 돌아오지만요 아래 for문과 for in 문을 보시..

지금까지 html로 만들어본 사이트를 종합해서 만들거에요 + 반응형 소스보기 위 이미지처럼 그동안 만들었던 css와 html을 이용해서 만들거에요 👇👇👇이전 포스팅 보러가기 👇👇👇 이미지텍스트유형 카드 유형 슬라이드 유형 이미지유형 푸터유형 meta데이터 이용하기 & 파비콘설정 & css 그룹화 & skip 이전 포스팅에서는 하지않은 설정을 했어요 웹표준을 최대한 지키려고 했습니다. meta 데이터를 적어 검색엔진에서 노출될때 화면에 노출될 설명을 설정하였고 파비콘도 같은 의미로 설정해줬어요 그리고 css를 그룹화 하여 html에서 css는 link만 모여요 소스가독성은 덤 ! skip태그를 설정하여 접근성이 떨어질경우 접근성을 향상시켰어요 ! 해더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로..

덧칠하기 문제설명 문제보러가기 어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다. 넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을 아끼려 합니다. 이를 위해 벽을 1미터 길이의 구역 n개로 나누고, 각 구역에 왼쪽부터 순서대로 1번부터 n번까지 번호를 붙였습니다. 그리고 페인트를 다시 칠해야 할 구역들을 정했습니다. 벽에 페인트를 칠하는 롤러의 길이는 m미터이고, 롤러로 벽에 페인트를 한 번 칠하는 규칙은 다음과 같..

카드 뭉치 문제설명 문제보러가기 제한사항 1 ≤ cards1의 길이, cards2의 길이 ≤ 10 1 ≤ cards1[i]의 길이, cards2[i]의 길이 ≤ 10 cards1과 cards2에는 서로 다른 단어만 존재합니다. 2 ≤ goal의 길이 ≤ cards1의 길이 + cards2의 길이 1 ≤ goal[i]의 길이 ≤ 10 goal의 원소는 cards1과 cards2의 원소들로만 이루어져 있습니다. cards1, cards2, goal의 문자열들은 모두 알파벳 소문자로만 이루어져 있습니다. 입출력 예 cards1 cards2 goal result ["i", "drink", "water"] ["want", "to"] ["i", "want", "to", "drink", "water"] "Yes" [..

퀴즈퀴즈 사이트 만들기 ! ( 객관식유형 * 6문제 한번에 만들기 ver.2 ) 이번엔 객관식 퀴즈 6문제가 있는 사이트를 만들어볼까해요 저번엔 각각 나오게 하였지만 이번엔 정답확인후 1문제씩 나오도록 할거에요 ! 전체 소스는 요기 객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요 정답입니다! 오답입니다! 점수 확인하기 다음 문제 getgrovy@gmail.com html은 에서 입력하기 때문에 위에처럼 간단한 해졌어요! 시험 정보 & 문제 & 보기 등등은 계속 반복되기때문에 에서 반복해 줄거에요 ! 그래서 아래처럼 값을 가진 quizInfo 배열 형태로 6문제를 만들었어요 ! const quizInfo = [ { infoType:"웹디자인기능사", infoTime:"2012년 2회", info..

document.querySelector 사용 방법에 대해 알아볼게요 그동안 document 객체를 가져올때 class만 가져왔는데 더 다양하게 사용이 가능해요 ! 1) Universal selector 범용 선택자는 *로 표시하며 이는 모든 타입의 모든 element를 매치합니다. 다음의 예제는 querySelector()를 사용해 document의 첫 번째 element를 가져오는 코드입니다. let element = document.querySelector('*'); 그리고 다음은 document의 모든 element를 가져오는 코드입니다. let elements = document.querySelectorAll('*'); 2) Type selector 노드이름으로 element를 찾기 위해서는 타..

퀴즈퀴즈 사이트 만들기 ! ( 객관식유형 * 6문제 한번에 만들기 ) 이번엔 객관식 퀴즈 6문제가 있는 사이트를 만들어볼까해요 전체 소스는 요기 객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요 위처럼 코딩을 해야했는데 6번 반복하기엔 너무 코드가 복잡해지죠 ? 그래서 아래처럼 값을 가진 quizInfo 배열에 obj형태로 6문제를 만들었어요 ! const quizInfo = [ { infoType:"웹디자인기능사", infoTime:"2012년 2회", infoNumber:"20120201", infoQuestion: "입체에 대한 설명으로 옳지 않은 것은?", infoChoice: { 1: "소극적 입체는 현실적 형, 확실히 지각되는 형을 말한다." , 2: "입체는 면이 이동한 자취이다."..

See the Pen Untitled by getgrovy (@getgrovy) on CodePen. code 펜으로 만들어 봤어요 ! html화면은 div * 6 개를 만들어줬고 css에 위에 만든 div 에 css를 넣어줬어요

학원에서 시험 봤어요 같이 풀어봐요 ! 01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } indexOf 를 써서 첫번째 a 값을 가져와서 1 indexOf 는 앞에서 부터 값을 체크해요 lastindexOf 를 써서 첫번째 a 값을 가져와서 3 lastindexOf 은 뒤에서 부터 a값을 체크 해요 includes()는 a값이 있으므로 true includes()는 값의 유무를 따져서 true..