Leeyanggoo

좋은 기회 평소 양동준님의 유튜브 채널을 봐왔고, 디스코드 채널에도 들어가 쏠쏠한 정보를 얻고 있었다. 구독도 하고 꾸준히 보는 몇 가지의 이유가 있다. 최근 개발 트렌드와 문화를 알아보기 위해서 최근에 프론트엔드 취업을 준비하시는 분들의 스펙을 알아보기 위해서 최소한 나도 취준하시는 분들의 스펙만큼은 준비해야 겠다는 다짐과 늘 긴장을 놓지 않기 위해 특히 세 번째가 가장 중요한 이유이자 목적인데, 나는 내가 너무 너무 너무나 게으른 사람인 걸 내가 잘 알고 있다. 그래서 늘 긴장하고 지금 일을 하고 있다는 사실에 감사함도 느끼면서 항상 배워야 한다는 태도를 갖추기 위해서다. 또한 올해 안에 최근 프론트엔드 취업을 준비하시는 분들의 스펙을 따라잡는 게 목표이기도 하다. 그러던 중 유데미에서 "주니어 개발..

피자 나눠 먹기 (1) 머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요. function solution(n) { var answer = Math.ceil(n/7); return answer; } 피자는 8조각이 국룰이란다... 머쓱아... 피자 나눠 먹기 (2) 머쓱이네 피자가게는 피자를 여섯 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 매개변수로 주어질 때, n명이 주문한 피자를 남기지 않고 모두 같은 수의 피자 조각을 먹어야 한다면 최소 몇 판을 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. f..

폰트 어썸(Font Awesome)이란? https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 폰트 어썸(Font Awesome)은 디자이너, 개발자, 콘텐츠 제작자를 위해 다양한 아이콘을 제공하는 라이브러리입니다. 폰트 어썸에서 제공하는 아이콘들은 벡터 형식으로 제공되어 고화질의 아이콘을 사용할 수 있습니다. 해당 라이브러리를 사용하게 되면 HTML 요소에 클래스를 추가하여 아이콘을 삽입할 수 있으며, 다양한 크기와 ..

컴포넌트 Component? 컴포넌트(Component)란 구성 요소 혹은 기계의 부품이라는 뜻입니다. 웹 페이지 혹은 애플리케이션은 프로필, 이름, 게시글, 댓글, 좋아요 버튼 등 다양한 요소로 구성되어 있습니다. 이러한 각 요소들을 컴포넌트라고 부르며 웹 페이지나 애플리케이션의 디자인 및 기능을 구성하는 기본 단위로 생각할 수 있습니다. 위의 사진처럼 컴포넌트는 사용자 인터페이스(UI)를 만드는 데 사용되며, 독립적이고 재사용 가능한 요소들입니다. 마치 레고 블록을 사용하여 다양한 구조물을 만드는 것과 비슷합니다. 각 블록은 독립적이지만 다른 블록과 결합해서 다양한 구조물을 만드는 것처럼, 웹 페이지나 애플리케이션 또한 컴포넌트를 조합하여 전체 기능을 구축합니다. Props(Properties)? P..

RAECT란 무엇일까? REACT는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다. REACT는 페이스북이 개발하고 유지 관리하는 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. REACT는 효율적으로 웹 페이지의 UI를 업데이트하고 관리하는 데 초점을 맞추고 있으며, 가상 DOM(Virtual DOM)과 같은 기술을 통해 높은 성능을 제공합니다. 1. 컴포넌트 기반 아키텍처: REACT는 재사용 가능한 UI 구성 요소인 컴포넌트를 사용하여 코드를 모듈화하고 개발 효율성을 높입니다. 2. 가상 DOM: 가상 DOM은 실제 DOM의 가벼운 사본으로, 변경 사항을 먼저 가상 DOM에 적용한 다음 실제 DOM에 필요한 최..

나머지 구하기 정수 num1, num2가 매개변수로 주어질 때, num1를 num2로 나눈 나머지를 return 하도록 solution 함수를 완성해주세요. // function solution(num1, num2) { // var answer = num1 % num2; // return answer; // } const solution = (num1, num2) => num1 % num2 중앙값 구하기 중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요. function solution(a..

서른에 접어 뭔가를 새롭게 시작한다는 건 마냥 설레이는 일만은 아니다. 겨울잠을 자던 뇌를 깨워 배움에 전념하다 보면 뇌도 몸도 벌벌 떨리는 게 느껴질 정도이기 때문에. 늦깍이에 시작한 코딩을 지금까지 무사히 하고 있는 건 여러 Captin이 있었기에 가능했음이 떠올라 소개해보고자 한다. 1. 생활코딩 https://www.opentutorials.org/ opentutorials.org GIT 모듈내 토픽 갯수 42 봤어요 1,229 www.opentutorials.org 코딩에 입문하기 전 학원에서 꼭 보고 오라 했던 생활코딩의 강의. 처음엔 너무 안정적이고 나긋한 목소리에 졸음을 몇 번이나 참았던 기억이 난다. 그래도 알려주는 방식이 거의 유치원 애기들 상대하는 정도라 그런지 아무런 지식이 없던 내..

늘어나라 조회수

두 수의 나눗셈 정수 num1과 num2가 매개변수로 주어질 때, num1을 num2로 나눈 값에 1,000을 곱한 후 정수 부분을 return 하도록 soltuion 함수를 완성해주세요. function solution(num1, num2) { var answer = Math.trunc(1000 * num1 / num2); return answer; } 여기서 Math.floor()가 아닌 Math.trunc()를 쓰는 이유는 다음과 같다. Math.floor()는 "내림" 함수이기 때문에 만약 소수점이 있는 음수가 나온 경우 예상한 값과 다르게 출력될 수도 있다. -8.1234라는 값이 있다고 할 때 Math.floor는 -9를 출력하지만, Math.trunc() 함수는 소수점 이하를 모두 "제거"하..

두 수의 합 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. function solution(num1, num2) { var answer = num1 + num2; return answer; } 두 수의 차 정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 return하도록 soltuion 함수를 완성해주세요. const solution = (num1, num2) => num1 - num2; 두 수의 곱 정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성해주세요. const solution = (num1, num2) => num1 * ..

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 = 1, sum = 0 + 1 = 1 (i % 4 == 1) i = 2, sum = 1 * 2 = 2 (i % 4 == 2) i = 3, sum = 2 (i % 4 == 3, 조건에 해당하지 않음) i = 4, sum = 2 - 4 = -2 (i % 4 == 0) i = 5, sum = -2 + 5 = 3 (i % 4 == 1) i = 6, sum = 3 * 6 = 18 (i % 4 == 2) i ..

HTML MUSIC PLAYER 노래 제목 가수 이름 music__wrap은 만들고자 하는 플레이어의 영역이며, 자식 요소로 기능 및 디자인 요소를 하나씩 추가해나갑니다. music__header부터 control의 title까지는 플레이어 정보 및 노래 정보를 나타내는 부분입니다. 하단의 progress부터 control까지가 주로 자바스크립트로 제어할 부분입니다. 곡의 현재 진행, 전체 길이, 버튼의 동작을 담당합니다. Javascript 선택자 const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArt..

총 페이지 개수 구하기

게시글 보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 게시판입니다. 관련 문의사항은 여기서 확인하세요! connect와 session을 include 하여 로그인한 사용자의 데이터와 게시판에 등록된 글의 정보를 불러옵니다. 외에 head, skip, header 등 페이지에 공통적으로 적용되는 HTML 코드를 저장하여 불러옵니다. php 이전에 미리 만들어놓았던 html 파일에서는 게시글의 틀을 잡는 부분들을 table 태그로 만들었습니다. 이제는 각각 데이터를 불러와서 모양을 만들어야 하기에 주석 처리를 한 모양입니다.

HTML HMM GAME WORLD Play Music Play Music Play Music Play Music Play Music Play Music ".cursor"는 마우스 커서를 의미합니다. "#header"는 상단에 고정되며, ".time"은 '현재 시간'을 입력받습니다. ".icon__box"는 화면에 출력할 아이콘 모음입니다. "#footer"는 하단에 고정되며, ".info"에 현재 사용자에게 운영체제(OS) 정보 및 브라우저 크기를 입력받습니다. CSS https://github.com/leeyanggoo/web2023/tree/main/Javascript/game/css new Date() 함수와 userAgent 속성을 알고 계신가요? Javascript window.onload =..

개발자도구로 페이지 전체 스캔하기!! 스캔하려는 페이지에서 F12(우클릭 '검사')를 누른다 Ctrl + Shift + P로 실행 명령어 창을 켠다. '스크린샷(screenshot)'이라고 치게 되면 나오는 "원본 크기 스크린샷 캡처(Capture full size screenshot)"를 누른다. 웹 페이지의 전체 스크린샷이 png로 저장됩니다!! 외에도 특정 영역만 포함하는 스크린샷 등 다양한 옵션이 있으니 유용하게 쓰자!! 피그마를 이용해 시안을 만들자!! 원본 크기 스크린샷 캡처(Capture full size screenshot)로 모은 이미지들을 피그마에서 한데 불러냅니다. 자신이 만들고자 하는 페이지에서 참고하면 좋을 소스들을 잘라서 이어붙입니다. 더보기 참고 : 피그마(Figma)는 너비 ..

문자열 객체? 문자열 객체는 자바스크립트 자료형 중 원시 유형의 하나로 문자열을 다루기 위한 기본 자료형입니다. 문자열 객체는 연속된 유니코드 문자들의 시퀀스를 표현하며, 다양한 문자열 조작 메서드를 제공합니다. 이 메서드들을 사용하여 문자열의 길이를 구하거나, 부분 문자열을 추출하고, 문자열을 검색, 대체, 병합 및 분할하는 등의 작업을 수행할 수 있습니다. 문자열 객체는 원시 문자열과 관련하여 불변성을 가지며, 메서드를 사용하여 새로운 문자열을 생성하더라도 원본 문자열은 변하지 않습니다. 01. at() "문자열".at(인덱스) 인덱스(index)를 받아, 문자열에서 해당 인덱스의 문자를 반환합니다. 음수 인덱스를 사용하면 문자열의 뒤에서부터 위치를 계산합니다. 인덱스가 범위를 벗어날 경우 'unde..

패럴랙스(Parallax)는 무엇인고? 패럴랙스(Parallax)는 물체의 위치나 각도에 따라 관찰하는 시각적인 변화를 말합니다. 이는 눈이 물체를 볼 때, 눈의 위치나 시선이 바뀌면 물체의 위치나 모양이 바뀌어 보이는 것을 의미합니다. 이 패럴랙스 효과를 웹 디자인에서 스크롤과 함께 사용하는 걸 '패럴랙스 스크롤링'이라고 합니다. 패럴랙스 스크롤링은 사용자가 스크롤링할 때 레이어들이 다른 속도로 움직이는 효과를 주어 페이지가 동적이고 입체감 있는 느낌을 줍니다. 일반적으로 CSS와 Javascript를 이용하여 구현하며, Javascript에서는 스크롤의 위치에 따라 레이어를 이동시키는 코드를 작성합니다. 코드를 작성해봅시다 HTML Are You Crazy? We must go to Mars CSS ..

by 생활코딩 opentutorials.org PHP란? PHP는 서버 측 스크립팅 언어이며, HTML, CSS, JavaScript와 함께 사용되며, 사용자 입력을 처리하고 데이터베이스와 상호 작용하는 데에도 자주 사용됩니다. MySQL 데이터베이스와 상호 작용하여 동적 웹 페이지를 생성하는 데 주로 사용됩니다. MySQLi는 PHP에서 MySQL 데이터베이스와 상호 작용하는 데 사용되는 확장 라이브러리입니다. PHP와 MySQLi를 연동하기 위해서는 먼저 PHP에서 MySQLi 확장을 활성화해야 합니다. 이를 위해서는 php.ini 파일에서 mysqli 확장을 활성화하거나, PHP 코드에서 mysqli_connect() 함수를 사용하여 연결할 수 있습니다. connect.php 위 코드는 PHP에서 ..

패럴랙스(Parallax)는 무엇인고? 패럴랙스(Parallax)는 물체의 위치나 각도에 따라 관찰하는 시각적인 변화를 말합니다. 이는 눈이 물체를 볼 때, 눈의 위치나 시선이 바뀌면 물체의 위치나 모양이 바뀌어 보이는 것을 의미합니다. 이 패럴랙스 효과를 웹 디자인에서 스크롤과 함께 사용하는 걸 '패럴랙스 스크롤링'이라고 합니다. 패럴랙스 스크롤링은 사용자가 스크롤링할 때 레이어들이 다른 속도로 움직이는 효과를 주어 페이지가 동적이고 입체감 있는 느낌을 줍니다. 일반적으로 CSS와 Javascript를 이용하여 구현하며, Javascript에서는 스크롤의 위치에 따라 레이어를 이동시키는 코드를 작성합니다. 코드를 작성해봅시다 HTML Javascript Parallax Effect07 패럴럭스 이펙트 ..

* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; align-items: center; justify-content: center; display: flex; } .opacity { animation: opacity 2s ease-in-out; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #result { width: 50%; } .quote { color: #fff; font-size: 2rem; margin: 1rem 0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;..

* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; align-items: center; justify-content: center; display: flex; } .opacity { animation: opacity 2s ease-in-out; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #result { width: 50%; } .quote { color: #fff; font-size: 2rem; margin: 1rem 0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;..

#header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px rgba(0,0,0,0.5); } .slider__img { position: relative; width: 100%; height: 100%; overflow: hidden; ..

#header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 ..

cloneNode()와 appendChild() 알고 가자! #header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } ...

cloneNode()와 appendChild() 알고 가자! #header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } ...

다양한 스크립트를 활용해보자!! /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */ /* display: flex; flex-wrap: wrap; */ width: 100%; height: 520px; } .slider { /* 개별적인 이미지 */ position..

다양한 스크립트를 활용해보자!! /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */ display: flex; flex-wrap: wrap; width: 4000px; height: 520px; } .slider { /* 개별적인 이미지 */ position: re..

opacity와 transition을 알아보자!! opacity 속성은 요소의 투명도를 지정하는 데 사용됩니다. 이 속성은 0~1 사이의 값을 가질 수 있으며, 0에 가까울수록 요소가 투명해지고, 1에 가까울수록 불투명해집니다. opacity 속성은 다양한 요소에 적용될 수 있으며, 텍스트, 이미지, 배경 등에도 적용할 수 있습니다. transition 속성은 요소의 애니메이션 효과의 지속 시간을 정하는 데 사용됩니다. 이 속성을 사용하면 요소의 상태가 변할 때 부드러운 애니메이션 효과를 적용할 수 있습니다. transition 속성은 다양한 속성에 적용될 수 있으며, 이동, 회전, 크기 변경 등 다양한 애니메이션을 구현할 수 있습니다. 즉, opacity와 transition 속성을 이용하면 마치 레이..

2011년 07월 31일 3. 다음 중 제어장치에서 명령어의 실행 사이클에 해당하지 않는 것은? 1.인출 주기(fetch cycle) 2.직접 주기(direct cycle) 3.간접 주기(indirect cycle) 4.실행 주기(execute cycle) 정답 : 2 제어장치의 명령어 실행 사이클은 기계주기(Machine Cycle)라 하며, 다음과 같다. 인출사이클(Fetch Cycle) - 중앙처리장치가 기억장치에서 다음에 실행할 명령을 가져오는 주기) 명령사이클(Instruction Cycle) - 기억장치의 번지를 확인하여 명령을 읽어 낼 때까지의 단계 실행사이클(Execution Cycle) - 명령에 따라 필요한 신호를 만들어 결과를 얻을 때까지의 단계 인출 - 간접 - 실행 - 인터럽트 4..