코딩공부

React란? React는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리입니다. React는 웹 애플리케이션 또는 모바일 앱을 개발하기 위한 도구로 사용됩니다. React는 커뮤니티에서 지속적으로 발전하고 있으며, 많은 회사와 개발자들이 사용하고 있습니다. React Native라는 도구를 사용하면 React를 기반으로 하는 모바일 애플리케이션도 개발할 수 있습니다. React 설치하기 Node.js 설치 https://nodejs.org/ko Node.js 설치: React는 Node.js 환경에서 동작하므로, Node.js를 먼저 설치해야 합니다. 노드는 자바스크립트 런타임으로, 리액트 앱을 실행하기 위해 필요한 도구들이 포함되어 있습니다. Node.js는 공식 홈페이지(https://node..

이번엔 닷 메뉴로 이동할 수 있는 패럴럭스 이펙트 입니다. HTML JavaScript Parallax Effect02 페럴렉스 이펙트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다. 02 section2 성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다. 03 section3 자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다. 04 section4 성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다. 05 section5 가장 어두운 밤이 지나면 해는 떠오..

리스트 버튼을 클릭하면 뮤직 리스트가 나오고 노래를 선택하면 해당 곡이 나옵니다. 뮤직 리스트 / 리스트 닫기버튼 //뮤직 리스트 버튼 musicListBtn.addEventListener("click", () => { musicList.classList.add("show"); }); //뮤직 리스트 닫기 버튼 musicListClose.addEventListener("click", () => { musicList.classList.remove("show"); }); 뮤직 리스트 버튼을 클릭하면 addEventListener를 통해 show 클래스를 추가하여 화면에 나타나게 하고 닫기를 누르면 show 클래스를 삭제하여 뮤직 리스트가 화면에서 사라지게 합니다. 뮤직 리스트 구현/ 리스트 음악 시간 불러오..

오늘 css부분을 하면서 기억이 잘 안나기도 하고 헷갈리고 이해하지 못한 부분도 있는거 같아 정리를 해보려고 합니다. 제가 이해가 부족한 display의 속성과 position의 속성에 대한 정리를 해보았습니다. display란? 요소를 어떻게 표시할 지 결정해주는 속성입니다. 주로 block, inline, inline-block을 사용합니다. block 지정이 되면 전 후 줄바꿈이 들어가 다른 요소들을 밀어내고 한 줄을 차지합니다. 대표적인 block 요소는 ,,~ 등이 있습니다. 기본적으로 대부분 요소에 들어가있는 속성이라고 이해하면 쉽습니다. inline 지정이 되면 한 줄에 다른 요소들과 나란히 배치됩니다. 대표적인 inline요소는 ,, 등이 있습니다. width값과 height값을 지정하지 ..

오늘은 카드를 두고 나와서 10분 거리 버스 정류장까지 가서 버스를 탈 뻔 했는데 버스가 생각보다 늦게오고 잽싸게 카드를 들고 나와서 다행히 편히 학원에 도착할 수 있었다. 오늘 오전 수업은 전에 했던 사이트 만들기에서 마무리 못지은 슬라이드 부분을 했다.|| 버튼을 누르면 정지 되고 ▷버튼을 누르면 슬라이드가 움직이는걸 자바스크립트가 아닌 swiper 라이브러리를 통해 구현하였다.script css도 가져왔는데 script에 연결된 https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js 에서 가져왔다. 너무 길어서 스킵.. 점심엔 나폴리탄이 먹고싶어서 짱구 나폴리탄을 사 먹었다. 사진 찍으려고 했는데 왔다갔다 정신 없어서 사진을 까먹었다😥 딱 기대한 나..

PHP 게시판에서 검색했을 경우의 페이지를 만들었습니다. 전체적인 구조는 board.php와 동일합니다. 게시글 검색 php 건의 게시물이 검색되었습니다. intro_text 밑에 검색된 글의 건 수를 구해주었습니다. 위에 isset을 올려줬기 때문에 totalCount의 값을 구할 수 있습니다. 는 php의 약식입니다. php로 테이블 만들기 게시판 웹 디자이너, 웹 퍼블리셔, 프론트 엔드 개발자를 위한 게시판입니다. 관련된 문의사항은 여기서 확인하세요! * 총 건의 게시물이 등록되어 있습니다. 게시판 검색 영역 제목 내용 등록자 검색 글쓰기 번호 제목 등록자 등록일 조회수

웹디자인 기능사를 대비한 슬라이드 유형 3가지를 만들어 보았습니다. HTML 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 CSS * { margin: 0; padding: 0; } #wrap { width: 1920px; height: 800px; margin: 0 auto; } .container { width: 1200px; margin: 0 auto; } #header { display: flex; height: 100px; } .logo { width: 30%; background-col..

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

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); } 정답 50,10 03. 다음의 결괏값을 작성하시오. { function func..