1. 탭 탭메뉴만들기 완성화면 HTML <div class="tab-wrapper"> <ul class="tab-menu"> <li><a href="#tabs-1" class="active">리미</a></li> <li><a href="#tabs-2">감자</a></li> <li><a href="#tabs-3">치킨</a></li> </ul> <div class="tab-content"> <div id="tabs-1" class="active"> <h2>리미</h2> <p>I like 치킨 (치킨시켜) Everybody likes 치킨 (치킨시켜) Let`s eat 치킨 (치킨시켜) 양념 치킨 후라이드 치킨 치킨 치킨 (치킨시켜) (치킨시켜) x2 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 … 더 읽기
1. 스크롤 효과를 만들어보자 1.1. 1단계-섹션1 1.1.1. 좌우이동 – css 메서드 활용 예제 미리보기 Note: 이 코드는 잠재적인 버그가 있다. 작성후 어떤 버그가 발생할수 있을지 예상해보자 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/jq-01.css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="js/jq-01.js" defer></script> </head> <body> <section class="section1"> <h2>section1</h2> … 더 읽기
jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다. 💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행 💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 … 더 읽기
예제 미리보기 HTML <!DOCTYPE html> <html> <head> <title>Carousel with Tabs and Lightbox</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" /> <link rel="stylesheet" href="css.css" /> </head> <body> <div class="tabs"> <div class="tab-button-outer"> <div id="tab1" class="tab-button active">Tab 1</div> <div id="tab2" class="tab-button">Tab 2</div> <div id="tab3" class="tab-button">Tab 3</div> </div> <div id="content1" class="tab-content active carousel"> <div class="popup-outer"><a href="http://qwerew.cafe24.com/images/1.jpg" class="popup">클릭</a><img … 더 읽기
1. 개요 2. 응용예제 3. 각 페이지별 이동버튼 추가 1. 개요 적응형(adaptive) 란 매체별 페이지를 별도로 제작하는 기술이다. 자바스크립트를 사용하여 사용자 접속 환경을 체크후 원하는 페이지로 리디렉션 한다. 2. 응용예제 예제 미리보기 HTML root/index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>PC</title> </head> <body> <h1>PC전용페이지</h1> <div class="pc">PC</div> <div class="mobile">Mobile</div> … 더 읽기
1. 웹 접근성 교안 Info: 📜 기준 가이드라인 국제 — WCAG 2.2 (W3C, 2023.10 권고). 4대 원칙 POUR (Perceivable / Operable / Understandable / Robust) 와 새로 추가된 9개 기준 (Focus Not Obscured, Focus Appearance, Dragging Movements, Target Size 등). 한국 — KWCAG 2.2 (한국지능정보사회진흥원, 2022.12 개정). WCAG 2.1 을 기반으로 한국 환경에 맞춰 24개 … 더 읽기
1. 탑버튼 페이지 상단으로 이동하는 탑버튼을 만들어보자 1.1. 제이쿼리 완성화면 지시문 탑버튼을 만들어보자 HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> </head> <body> <div class="dummy"> <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore … 더 읽기
롤링 슬라이드 배너를 구현해보자 HTML <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> </head> <h1>롤링 슬라이드 배너 만들기</h1> <div id="banner_wrap"> <div id="frame"> <ul id="banner"> <li> <a href="#"><img src="roll/1.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/2.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/3.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/4.png" alt="사진1" /></a> </li> <li> <a href="#"><img src="roll/5.png" alt="사진1" /></a> … 더 읽기
미리보기 HTML “`html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2단계 메가메뉴</title> <link rel="stylesheet" href="menu.css"> </head> <body> <nav class="nav"> <ul class="menu"> <li class="item"> <a href="#" class="link">카테고리1</a> <div class="mega"> <div class="row"> <div class="col"> <h3>서브1-1</h3> <ul> <li><a href="#">항목1</a></li> <li><a href="#">항목2</a></li> <li><a href="#">항목3</a></li> </ul> </div> <div class="col"> <h3>서브1-2</h3> <ul> <li><a href="#">항목1</a></li> <li><a href="#">항목2</a></li> <li><a … 더 읽기