공부블로그

코딩테스트 주사위 게임 1 문제 설명 출력 예시 주사위를 두번 굴려 나온 수가 홀수냐에 따라 a,b의 계산법이 달라지는 문제입니다. let a = 3; let b = 5; var answer = 0; let method = 0; if(a % 2 == 1) method++; if(b % 2 == 1) method++; if(method == 2) answer = (a*a + b*b); if(method == 1) answer = 2*(a + b); if(method == 0) answer = Math.abs(a - b); //34 a와 b가 모두 홀수라면 a2 + b2 점을 얻습니다. a와 b 중 하나만 홀수라면 2 × (a + b) 점을 얻습니다. a와 b 모두 홀수가 아니라면 |a - b| 점을 얻습니..

코딩테스트 첫 번째로 나오는 음수 문제 설명 출력 예시 배열에서 처음 음수를 만나면 만난 인덱스를 출력하는 문제 입니다. 혹은 배열에 음수가 없으면 -1을 출력하면 됩니다. const num_list = [12, 4, 15, 46, 38, -2, 15]; var answer = -1; for(let i=0; i

코딩테스트 수 조작하기 2 문제 설명 출력 예시 현재 인덱스와 다음 인덱스의 차를 봐서 그에 맞는 숫자를 출력하는 문제 입니다. "w" : 수에 1을 더한다. "s" : 수에 1을 뺀다. "d" : 수에 10을 더한다. "a" : 수에 10을 뺀다. let numLog = [0, 1, 0, 10, 0, 1, 0, 10, 0, -1, -2, -1]; var answer = ''; numLog.forEach((e,i)=>{ if(numLog[i+1] - e == 1) answer+= "w"; if(numLog[i+1] - e == 10) answer+= "d"; if(numLog[i+1] - e == -1) answer+= "s"; if(numLog[i+1] - e == -10) answer+= "a"; }..

코딩테스트 접두사인지 확인하기 문제 설명 출력 예시 어떤 문자열에 대해서 접두사는 특정 인덱스까지의 문자열을 의미합니다. 예를 들어, "banana"의 모든 접두사는 "b", "ba", "ban", "bana", "banan", "banana"입니다. is_prefix 문자열이 my_string의 접두사인지 확인하는 문제입니다. 접두사가 맞다면 1을 출력하고, 아니면 0을 출력합니다. 접두사란? 낱말의 앞에 붙어서 의미를 첨가하여 다른 낱말을 이루는 말. 접사의 일종이다. let my_string = "banana"; let is_prefix = "ban"; let str = ''; var answer = 0; let str = ''; [...my_string].forEach(e=>{ str += e; ..

코딩테스트 콜라츠 수열 컨텐츠 문제 설명 출력 예시 콜라츠 문제란? 1을 제외한 아무 자연수나 생각한 다음 그게 홀수라면 3을 곱한 다음 1을 더하고, 짝수라면 2로 나눈다. 그렇게 나온 수를 다시 저 식에 집어 넣고 이하 반복, 이걸 계속하다 보면 1이 나온다는 것이다. 예를 들어 5에서 시작하면, 5는 홀수니까 3×5+1=16이 되고, 16은 짝수니까 16/2=8, 이후 4와 2를 거쳐 1에 도달하게 된다. https://namu.wiki/w/%EC%BD%9C%EB%9D%BC%EC%B8%A0%20%EC%B6%94%EC%B8%A1 콜라츠 추측 - 나무위키 만약 이 추측이 거짓이라면, 1로 가지 않는 반례가 존재한다는 것을 의미한다. 수학자들은 이런 대표적인 반례에 대해서 자기 자신으로 순환하는 루프가 ..

CSS nth에 대해 알아봅시다! CSS에서 nth는 특정 요소의 순서에 따라 스타일을 적용하는 데 사용되는 유용한 선택자입니다. nth 선택자는 nth-child(), nth-of-type(), nth-last-child(), nth-last-of-type()와 같은 다양한 유형이 있습니다. nth-child( n ) 선택자는 해당 요소의 부모 요소의 모든 자식 요소 중 n번째 요소에 대한 스타일을 적용합니다. n은 정수 값이며, 0 또는 음수 값을 사용할 수도 있습니다. 사과 바나나 딸기 오렌지 포도 li:nth-child(3) { color: red; } 위의 코드는 ul 요소의 모든 자식 li 요소 중에서 세 번째 li 요소에 대해 color: red 스타일을 적용합니다. 결과적으로 딸기라는 텍스..

VSCode

카드 타입 사이트 카드UI란, 카드 형식으로 된 UI 요소를 말하며, 대표적으로 SNS에서 사용되는 피드(FEED)나 쇼핑몰에서 사용되는 상품 목록 등에서 활용됩니다. 카드UI 사이트에서는 이러한 카드UI를 구현하는 방법과 관련된 디자인 가이드, 코드 및 라이브러리 등을 제공하여 웹 개발자나 디자이너들이 카드UI를 보다 쉽게 구현할 수 있도록 돕습니다. 피그마 제가 만들어볼 사이트를 피그마로 디자인 한 사진입니다. VSCode 어떤 간식을 먹어볼까요 어떤 간식이 야무지게 나를 만족시킬수 있을까요? 아무리 먹어도 질리지 않는 간식을 어떤 종류를 먹어야 자신을 만족시킬 수 있을까 하고 행복한 고민을 해보아요. 케이크는 어떠신가요? 케이크는 특별한 이벤트나 기념일을 축하하기 위해 자주 사용되는 디저트입니다. ..

grid CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다. CSS Grid 레이아웃은 Flexbox보다 더 복잡한 레이아웃을 구현할 수 있는 방법입니다. CSS Grid를 사용하면 2차원 레이아웃을 만들 수 있으며, Flexbox보다 더 다양한 배치와 정렬을 할 수 있습니다. CSS Grid 레이아웃에서 사용되는 주요 속성은 다음과 같습니다. display: grid: Grid 컨테이너를 정의합니다. grid-template-rows: Grid 컨테이너에서 각 행의 높이를 정의합니다. grid-template-columns: Grid 컨테이너에서 ..

문자 관련 스타일 여러가지 문자 관련 스타일이 어떤 종류가 있고 무엇인지 알아 봅시다. font-family 폰트 패밀리는 비슷한 디자인 요소를 공유하는 서체의 그룹을 말합니다. 이러한 공유된 디자인 요소는 굵기, 비율 및 문자형 등이 포함됩니다. 폰트 패밀리는 보통 Regular, Bold, Italic 및 Bold Italic 등 다양한 스타일의 서체를 포함합니다. 예를 들어, "Helvetica" 폰트 패밀리는 Regular, Bold, Italic 및 Bold Italic 스타일을 포함하며, 이러한 서체 스타일은 모두 비슷한 디자인 요소를 공유합니다. 폰트 패밀리는 웹사이트나 문서 등에서 일관된 서체 스타일을 유지하는 데 도움이 되며, 디자인적 통일성을 제공합니다. font-size, 단위의 고찰..

코딩테스트 문자열 겹쳐쓰기 문제 설명 출력 예시 뼈대 문자열 my_string과 그 사이를 끼워맞출 문자열 overwrite_string, my_string 문자열에 몇번째 글자부터 끼워맞춰야하는지 알려주는 정수 s 가 있습니다. my_string을 s번째 인덱스부터 overwrite_string문자열의 길이만큼 overwrite_string 문자열로 바꿔야합니다. let my_string = "He11oWor1d"; let overwrite_string = "lloWorl"; let s = 2; //"HelloWorld" 문제 예시가 이렇게 있으면 출력은 "HelloWorld" 이 되어야 합니다. my_string 의 문자열은 "He11oWor1d" 이므로 s번째 인덱스는 "He" 이후입니다. over..

패럴랙스 (parallax) 이펙트 ( 5 ) (scrollTop , offsetTop, innerHeight) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, 나는 시작한다..

패럴랙스 (parallax) 이펙트 ( 4 ) (gsap, scrollTop , offsetTop, innerHeight) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 텍스트 효과 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, ..

패럴랙스 (parallax) 이펙트 ( 3 ) (scrollTop , offsetTop, innerHeight) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 나타나기 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, 나는 시작한다...

패럴랙스 (parallax) 이펙트 ( 2 ) (제이쿼리, scrollTop , offsetTop) VSCode Javascript parallax Effect01 패럴랙스 이펙트 : 이질감 효과(3d효과) 1 2 3 4 5 6 7 01 Section1 행운의 여신은 용기 있는 자를 좋아한다. 02 Section2 꿈이 없다면 아무 일도 일어나지 않는다. 03 Section3 지나간 일로 미래를 설계할 수는 없다. 04 Section4 준비하지 않은 자는 기회가 와도 소용없다. 05 Section5 노력에 집착하라. 숙명적인 노력을. 06 Section6 내일이란 오늘의 다른 이름일 뿐 07 Section7 불가능한 일을 해보는 것은 신나는 일이다. 08 Section8 당신이 포기할 때, 나는 시작한다..

자바스크립트 마우스 이펙트 4 gsap을 이용하여 마우스위치에 따라 움직이는 화면을 만들었습니다. VSCode Javascript Mouse Effect04 마우스 이펙트 - 마우스 따라다니는 공, 마우스 위치에 따라 움직이는 화면 1 2 4 4 5 I never dreamed about success, I Workd for it 나는 결코 성공에 대해 꿈꾸지 않았다. 나를 꿈을 위해 행동했다. ehcjswo1@gmail.com 마우스를 움직일 때 이미지가 약간 커지도록 정의되어 있으며, 마우스 위치에 따라 이미지가 움직입니다. 또한 마우스 커서를 따라다니는 작은 흰색 동그라미가 있습니다. 이 페이지에는 GSAP 라이브러리도 사용되어 있습니다. script gsap 라이브러리를 로드합니다. 이 라이브러리..

포트폴리오 메인페이지 만들어보기 (GSAP, split) GSAP 라이브러리를 이용한 메인 페이지 일부분을 만들어봤습니다. VSCode KDH PORTFOLIO work about let's introduce frontend developer's all works of portfolio https://ehcjswo.github.io/web2023/ 헤더 영역에서는 position 속성으로 fixed를 사용하여 스크롤을 내려도 항상 상단에 위치하도록 설정하고 있습니다. 그리고 display 속성으로 flex를 설정하여 요소들을 수평 방향으로 배치하고 있습니다. 메인 영역에서는 display 속성으로 flex를 설정하여 요소들을 수평, 수직 방향으로 배치하고 있습니다. 그리고 .text__inner 클래스와..

게임 이펙트 만들기! ( 2 ) (jquery,gsap, 뮤직플레이어, 리스트) 뮤직 플레이어를 만들어 재생, 정지, 반복, 음악 리스트 버튼의 기능을 만들었습니다. VSCode GAME WORLD 현재 날짜, 시간출력 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 Music 노래 제목 노래 작가 이름 0:00 3:55 Music List 현재 OS정보 출력 이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다. 페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다. 뮤직 플..

정보처리기능사 대비 오답노트 01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. HTTP, TCP, UDP, FTP, ICMP, IP, ATM, TELNET 더보기 iICMP, IP 02. 다음이 설명하는 용어를 작성하시오. 이것은 네트워로 연결된 두 호스트 사이에서 연결할 수 있는지 점검하는 진단도구이다. 이 명령을 실행하면 ICMP Echo 반향 패킷을 이용하여 원격 IP 주소에 송신하고 ICMP 응답을 기다린다. 더보기 PING 03. 다음이 설명하는 용어를 작성하시오. Window 10의 pro 버전에서 지원하는 기능으로 128bit 키의 CBC 모드에서 AES 암호화 알고리즘을 이용하여 이동식 디스크와 시스템 드라이브 암호화를 지원한다. 더보기 비트로커 04. ..

자바스크립트 정보처리 대비 테스트 ( 9 ) 오답노트 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) } 더보기 결과: 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[i] < min) min = num[i]; } console.log(max, min); } 더보기 정답 : ..

게임 이펙트 만들기! (뮤직 플레이 기능) 작은 음악 재생기를 만들어 봤습니다! script const allMusic = [ { name : "1. Here it Comes", artist : "TrackTribe", img : "musicView01", audio : "music_audio01" },{ name : "2. Here it Comes", artist : "TrackTribe", img : "musicView02", audio : "music_audio02" },{ name : "3. Here it Comes", artist : "TrackTribe", img : "musicView03", audio : "music_audio03" },{ name : "4. Here it Comes", a..

게임 이펙트 만들기! (jquery, 드래그 이벤트) jquery를 이용한 드래그 이벤트 입니다. VSCode GAME WORLD 현재 날짜, 시간출력 asdf 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 OS정보 출력 이 코드에서는 jQuery, jQuery UI 및 GSAP 라이브러리를 사용하여 웹 페이지를 조작합니다. 페이지에는 네 개의 아이콘이 있으며, 각각을 드래그할 수 있습니다. 드래그하는 동안, 해당 폴더의 색상에 따라 header의 색상이 변경됩니다. 아이콘을 클릭하면 정보가 footer에 표시됩니다. 아이콘을 드래그한 후에는 시간이 표시됩니다. script //폴더 드래그, 헤더색 바꾸기 $(".icon1").draggable({ //특정 범위 안에서 드래그로 못빠져나가게 하기 con..

자바스크립트 문자열 메서드에 대해 알아봅시다! at(), charAt(), charCodeAt(), charPointAt(), concat(), localeCompare(), normalize(), padEnd(), padStart(), repeat() 01. at( ) "문자열".at(검색값) 메서드는 지정한 숫자(index)를 받아, 문자열에서 해당 되는 인덱스의 요소를 반환합니다. 대소문자를 구별을 안합니다. { "javascript reference".at(0); //j "javascript reference".at(1); //a "javascript reference".at(2); //v "javascript reference".at(-1); //e "javascript reference".at..

자바스크립트 테스트 ( 7 ) 오답노트 정보처리기사, SQL, 정보처리기능사 오답노트입니다. 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) } 정답: 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]; } console.log(max,..

패럴랙스 Skrollr 라이브러리를 이용하여 사이트 만들기! 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다. [ Skrollr 를 이용하여 만든 사이트 입니다. ] Skrollr란? Skrollr는 웹 개발에서 사용되는 JavaScript 라이브러리 중 하나입니다. 이 라이브러리는 사용자가 웹페이지를 스크롤할 때 요소들의 애니메이션을 제어하는 것을 가능하게 합니다. 스크롤에 따라 요소들의 위치, 크기, 회전, 투명도 등을 변경하거나 CSS 클래스를 추가/제거하여 요소의 스타일을 변경할 수 있습니다. 이를 통해 사용자에게 더욱 동적이고 인터랙티브한 경험을 제공할 수 있습니다. Skrollr는 다양한 브라우저와 기기에서 호환되며, 다양한 프레임워크와 라이브러..

https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea... github.com 깃허브 내가 넣어놨던 파일들을 어떻게 불러야 하는지 모를때 우선 깃허브 홈페이지에 접속하시고 로그인 해주세요. 우측상단에 프로필을 눌러서 들어가 주세요. Repositories(저장소란 뜻) Repositories 를 누르면 내가 저장한 VSC..