목록전체 글 (89)
Leeyanggoo
[오답노트] 눈을 뜨십시오 휴-먼
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 ..
[JS] 자바스크립트 뮤직 플레이어 Music Player 만들기!! <Audio> Method() / Event / Property
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..
[PHP] 게시판2 -> 사용자마다 접근할 수 있는 게시글 경로 설정하기
게시글 보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 게시판입니다. 관련 문의사항은 여기서 확인하세요! connect와 session을 include 하여 로그인한 사용자의 데이터와 게시판에 등록된 글의 정보를 불러옵니다. 외에 head, skip, header 등 페이지에 공통적으로 적용되는 HTML 코드를 저장하여 불러옵니다. php 이전에 미리 만들어놓았던 html 파일에서는 게시글의 틀을 잡는 부분들을 table 태그로 만들었습니다. 이제는 각각 데이터를 불러와서 모양을 만들어야 하기에 주석 처리를 한 모양입니다.
[JS] 운영체제(OS) / 현재 시간 출력하기!! jQuery로 드래그 효과 만들기!!
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 =..
[CSS] 메인 사이트 디자인 시안 만들기
개발자도구로 페이지 전체 스캔하기!! 스캔하려는 페이지에서 F12(우클릭 '검사')를 누른다 Ctrl + Shift + P로 실행 명령어 창을 켠다. '스크린샷(screenshot)'이라고 치게 되면 나오는 "원본 크기 스크린샷 캡처(Capture full size screenshot)"를 누른다. 웹 페이지의 전체 스크린샷이 png로 저장됩니다!! 외에도 특정 영역만 포함하는 스크린샷 등 다양한 옵션이 있으니 유용하게 쓰자!! 피그마를 이용해 시안을 만들자!! 원본 크기 스크린샷 캡처(Capture full size screenshot)로 모은 이미지들을 피그마에서 한데 불러냅니다. 자신이 만들고자 하는 페이지에서 참고하면 좋을 소스들을 잘라서 이어붙입니다. 더보기 참고 : 피그마(Figma)는 너비 ..
[JS] 자바스크립트 문자열 객체 메서드 알아보기!!
문자열 객체? 문자열 객체는 자바스크립트 자료형 중 원시 유형의 하나로 문자열을 다루기 위한 기본 자료형입니다. 문자열 객체는 연속된 유니코드 문자들의 시퀀스를 표현하며, 다양한 문자열 조작 메서드를 제공합니다. 이 메서드들을 사용하여 문자열의 길이를 구하거나, 부분 문자열을 추출하고, 문자열을 검색, 대체, 병합 및 분할하는 등의 작업을 수행할 수 있습니다. 문자열 객체는 원시 문자열과 관련하여 불변성을 가지며, 메서드를 사용하여 새로운 문자열을 생성하더라도 원본 문자열은 변하지 않습니다. 01. at() "문자열".at(인덱스) 인덱스(index)를 받아, 문자열에서 해당 인덱스의 문자를 반환합니다. 음수 인덱스를 사용하면 문자열의 뒤에서부터 위치를 계산합니다. 인덱스가 범위를 벗어날 경우 'unde..
[JS] 자바스크립트 패럴랙스 이펙트 Skrollr!! (feat. doge)
패럴랙스(Parallax)는 무엇인고? 패럴랙스(Parallax)는 물체의 위치나 각도에 따라 관찰하는 시각적인 변화를 말합니다. 이는 눈이 물체를 볼 때, 눈의 위치나 시선이 바뀌면 물체의 위치나 모양이 바뀌어 보이는 것을 의미합니다. 이 패럴랙스 효과를 웹 디자인에서 스크롤과 함께 사용하는 걸 '패럴랙스 스크롤링'이라고 합니다. 패럴랙스 스크롤링은 사용자가 스크롤링할 때 레이어들이 다른 속도로 움직이는 효과를 주어 페이지가 동적이고 입체감 있는 느낌을 줍니다. 일반적으로 CSS와 Javascript를 이용하여 구현하며, Javascript에서는 스크롤의 위치에 따라 레이어를 이동시키는 코드를 작성합니다. 코드를 작성해봅시다 HTML Are You Crazy? We must go to Mars CSS ..
[PHP] 게시판1 -> 회원가입 로그인 기능 만들기!!
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에서 ..
[JS] 자바스크립트 패럴랙스 이펙트 1 !! Parallax Effect 1!!
패럴랙스(Parallax)는 무엇인고? 패럴랙스(Parallax)는 물체의 위치나 각도에 따라 관찰하는 시각적인 변화를 말합니다. 이는 눈이 물체를 볼 때, 눈의 위치나 시선이 바뀌면 물체의 위치나 모양이 바뀌어 보이는 것을 의미합니다. 이 패럴랙스 효과를 웹 디자인에서 스크롤과 함께 사용하는 걸 '패럴랙스 스크롤링'이라고 합니다. 패럴랙스 스크롤링은 사용자가 스크롤링할 때 레이어들이 다른 속도로 움직이는 효과를 주어 페이지가 동적이고 입체감 있는 느낌을 줍니다. 일반적으로 CSS와 Javascript를 이용하여 구현하며, Javascript에서는 스크롤의 위치에 따라 레이어를 이동시키는 코드를 작성합니다. 코드를 작성해봅시다 HTML Javascript Parallax Effect07 패럴럭스 이펙트 ..