Next.js 리엑트 홈페이지 강좌

게시글

반응형 웹에서 기본 구조

반응형 웹 기본 템플릿 :root { --main-color: #333; --nav-bg: #444; --dropdown-bg: #555; --text-color: #fff; --link-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.6; } a { text-decoration: none; color: inherit; } header { background: var(--main-color); color: var(--text-color); } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .site-logo { font-size: 20px; } .menu-toggle { display: none; font-size: 24px; background: none; border: none; color: var(--text-color); cursor: pointer; } nav.main-nav { display: flex; justify-content: center; background: var(--nav-bg); } .nav-item { position: relative; } .main-nav > .nav-item > a { display: block; padding: 15px 20px; color: var(--text-color); } .dropdown { display: none; position: absolute; background: var(--dropdown-bg); min-width: 120px; z-index: 10; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 10px; color: var(--text-color); } .layout { display: flex; gap: 20px; max-width: 1200px; margin: auto; padding: 20px; } aside.sidebar { width: 250px; } .sidebar ul { list-style: none; } .sidebar li { margin-bottom: 5px; } .sidebar a { display: block; padding: 10px; background: #eee; color: var(--link-color); } main.main-content { flex: 1; } footer.site-footer { background: #f0f0f0; text-align: center; padding: 20px; margin-top: 40px; font-size: 14px; color: #666; } /* 모바일 우선 스타일 */ @media (max-width: 768px) { .menu-toggle { display: block; } nav.main-nav { flex-direction: column; display: none; } nav.main-nav.show { display: flex; } .main-nav > .nav-item > a { padding: 12px 16px; border-top: 1px solid #555; } .dropdown { position: static; } .nav-item:hover .dropdown { display: none; } .nav-item .dropdown { display: none; flex-direction: column; } .nav-item.show .dropdown { display: flex; } .layout { flex-direction: column; } aside.sidebar { width: 100%; } .sidebar ul { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; } .sidebar li { margin-bottom: 0; } .sidebar a { white-space: nowrap; } } /* PC에서 우측 정렬되는 본문 내 텍스트 */ .main-content .page-message { text-align: left; margin-top: 20px; } 로고 ☰ 회사소개. 인사말 오시는길 제품소개. 제품A 제품B 고객센터 공지사항 자주묻는질문 회사소개 인사말 오시는길 안녕하세요 ⓒ 2025 나의 웹사이트. 모든 권리 보유. function toggleMenu() { document.getElementById("mainNav").classList.toggle("show"); } function toggleDropdown(event) { if (window.innerWidth

[ PHP 강좌 ] #1. 라라벨(Laravel) 기본 개념 및 구조 - YouTube

www.youtube.com

유튜브 채널 '코딩아비의 개발일지'의 PHP 강좌 첫 영상 '[ PHP 강좌 ] #1. 라라벨(Laravel) 기본 개념 및 구조'다. 여러 편으로 이어지는 재생목록의 1편으로, PHP 웹 프레임워크 라라벨을 처음 배우는 사람을 위한 입문 강의다. 1편에서는 라라벨이 어떤 프레임워크인지 기본 개념과 프로젝트 구조를 설명하며, 등록자 메모에 따르면 이 강좌 시리즈는 라라벨로 게시판을 만드는 과정으로 이어진다. PHP 기본 문법을 익힌 뒤 라라벨로 실제 웹 서비스나 게시판을 만들어 보고 싶은 백엔드 개발 입문자에게 유용하다.

챠트를 그릴수 있는 플러그인

www.chartjs.org

Chart.js는 웹 페이지에 차트를 그릴 수 있는 오픈소스 자바스크립트 차트 라이브러리입니다. 공식 사이트에서 라이브러리 소개와 문서, 예제를 제공하며 커뮤니티가 유지·관리하는 프로젝트입니다. 8가지 차트 유형을 지원하고 차트마다 애니메이션과 세부 옵션을 조정할 수 있습니다. HTML5 Canvas로 렌더링해 최신 브라우저에서 동작하고, 창 크기가 바뀌면 차트를 다시 그리는 반응형 기능과 필요한 모듈만 불러와 번들 크기를 줄이는 방법도 안내합니다. 대시보드나 통계 화면에 데이터 시각화 차트를 넣으려는 웹 개발자에게 유용합니다.

클래스101

class101.net

클래스101을 소개합니다. 클래스101은 다양한 강의를 수강할수 있는 사이트 입니다 클래스101의 장점은 다양한 강좌를 제공하는 것입니다 미술, 공예, 디지털 드로잉, 라이프 스타일, 요리 음료, 디자인 개발, 음악, 사진 영상, 커리어, 시그니처 다양한 강의들을 제공합니다. 관심 있는 분야가 있다면 신청하여 강좌를 들으수 있습니다. 클래스101는 홈페이지뿐 아니라 페이스북, 인스타그램, 유튜브등의 채널을 통해 고객들과 더 많이 소통하려 노력하고 있습니다. 다양한 강좌를 듣고 싶으시다면 클래스 101을 활용해 보시기 바랍니다. 자세한 정보를 원하신다면 https://class101.net 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.

게시글

웹URL 주소로 캡쳐 하는 프로그램 만들어 보도록 하겠습니다

웹URL 주소로 캡쳐 하는 프로그램 만들어 보도록 하겠습니다 html2canvas 플러그인을 통해서 웹페이지를 캡쳐할수 있습니다 하지만 자신의 홈페이지에서만 가능 하지 다른 URL주소의 내용은 캡쳐할수 없는 단점이 있습니다 해서 URL주소를 입력하면 해당 주소의 내용을 캡쳐후 이미지로 반환해주는 프로그램을 만들어 보려합니다 작동원리 작업전 준비 작업 1)PHP 홈페이지 2)서브서버로 사용할 윈도우 PC 3)공유기 포트포워드 설정 (메인서버에서 가상아이피를 사용하는 서브서버로 접속하기 위함) 4)서브서버에 파이썬 설치 5)서브서버에 파이썬 flask 설치 6)서브서버에 파이썬 selenium 설치 위 순서대로 진행을 하려합니다 핵심은 메인서버에서 서브서버의 특정 프로그램을 실행 시켜주는 것입니다 일반적으로 웹상에서 다른 PC의 프로그램을 컨트롤 하기가 어렵습니다 처음 개발단계에서 웹소켓을 통해 프로그램을 컨트롤 하려 했습니다 실재로 http로는 컨트롤까지 되었습니다 그러나 홈페이지가 https인 경우 ws가 아닌 wss 웹소켓만 사용해야 하는 문제가 있어서 php file_get_contes() 함수와 flask서버를 사용해 컨트롤 하는 방법을 채택하였습니다 처음 계획이 수정되어 편법을 사용한 것이 아닌가 생각되었지만 flask 를 사용해보니 서브서버가 안정적으로 작동하여 오히려 더 나은 방법이라 판단됩니다 유튜브주소 https://www.youtube.com/watch?v=aCWmZplpts0 https://www.youtube.com/watch?v=iE1wAFZmR-w

웹디자인CSS 소스

wsss.tistory.com

CSS를 통한 디자인 소스가 제공되는 사이트 입니다. 단순 디자인을 넘어 애니매이션 소스도 같이 제공됩니다 예전에는 플래시로 애니매이션을 만들었다면 지금은 CSS, HTML5, 자바스크립트 등을 통해 애니매이션을 제작 하는 추세입니다 그런 면에서 볼때 아주 도움을 주는 사이트 입니다 아래는 실행 화면입니다 https://wsss.tistory.com/55

게시글

jquery에서 ajax(아작스)사용하는 방법

$.ajax ({ type: 'post', // POST 로 전송 async: false,//동기화 url: 'http://', // 호출 URL data: {'변수1':'값1','변수2':'값2'}, // 파라메터 정보 전달 success:function(data){ alert(data);//처리된 정보가져오는 부분 }, error:function(e) { // alert(e.responseText); } });

jquery

jqueryui.com

jquery을 소개합니다. jqueryui는 jquery의 API 뿐아니라 다양한 UI 데모와 소스를 제공해 쉽게 jquery를 사용할수 있게 만든 사이트 입니다. jquery의 장점은 UI이 데몬 소스를 제공한다는 것입니다. jquery를 처음 접하면 어떠한 프로그램인지, 뭘 할수 있는지 모르는 경우가 많습니다. 그러나 해당 사이트에서는 jquery 만들어진 UI이 데몬을 통해 직관적으로 기능을 파악할수가 있습니다. 예를 들어 Droppable 메뉴를 클릭하면 드래그 드롭 관련 UI이가 있어 직접 테스트를 해볼수 가 있습니다 UI이 하단에는 view source 소스보기가 있어 소스를 파악할수 있고 API documentation 버튼이 있어 API를 활용해 소스를 분석및 수정할수 있습니다. 메뉴구성은 Demos, Download, API Documentation, Themes, Development, Support등으로 구성되어 있어 다양한 서비스를 이용할 수 있습니다 jquery 관련 UI이가 궁금하시다면 jqueryui를 적극 활용해 보시기 바랍니다. 자세한 정보를 원하신다면 https://jqueryui.com 주소를 참고 하시면 더많은 정보를 확인 하실 수 있습니다.