UI 컴포넌트

색채심리학

작성자:

색채심리학 1. 색채와 감정효과 인간은 색의 지각과 함께 다양한 감정들을 느낀다. 톤에 따라 각각 색이 갖는 감정효과를 따라 배색을 한다. (1) 온도감 색에 영향을 받으며 장파장은 따뜻한, 단파장은 차가운 느낌 적용 : 상점가의 디스플레이, 계절, 환경 (2) 중량감 명도의 영향을 받으며 고명도는 가벼운, 저명도는 무거운 느낌을 줌 적용 : 작업현장의 공구, 승용차, 공장 등 (3) … 더 읽기

activeMenu

작성자:

1. 메뉴활성화 1.1. 단계1-상단메뉴 1.1.1. 스티키 예제 [미리보기](https://qwerewqwerew.github.io/source/jq/9) HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <meta property="og:title" content="발전하는 신입 퍼블리셔 망고의 포트폴리오입니다" /> <meta property="og:url" content="http://www.mango.dothome.co.kr" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="망고의 포트폴리오" /> <meta property="og:description" content="오늘보다는 내일 더 성장하는 것이 … 더 읽기

slide

작성자:

1. 기본 슬라이드 1.1. fadeInOut 1.1.1. 메서드 활용 1.1.2. 클래스 활용 1.2. 이동 2. 인디케이터가 있는 슬라이드 1. 기본 슬라이드 1.1. fadeInOut 1.1.1. 메서드 활용 예제 미리보기 리소스 이미지 http://qwerew.cafe24.com/images/1.jpg http://qwerew.cafe24.com/images/2.jpg http://qwerew.cafe24.com/images/3.jpg http://qwerew.cafe24.com/images/4.jpg http://qwerew.cafe24.com/images/5.jpg http://qwerew.cafe24.com/images/6.jpg http://qwerew.cafe24.com/images/7.jpg http://qwerew.cafe24.com/images/8.jpg http://qwerew.cafe24.com/images/9.jpg http://qwerew.cafe24.com/images/10.jpg HTML <body> <div id="content"> <h3>Simple Crossfade Waterfalls Slideshow</h3> <ul id="crossfade"> <li> <a href="#"><img src="http://qwerew.cafe24.com/images/1.jpg" alt="" /></a> … 더 읽기

tab

작성자:

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 반은 양념 치킨 반은 후라이드 치킨 무는 많이 줘요 아줌마 부위는 … 더 읽기

scrollEffect

작성자:

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> … 더 읽기

ajax

작성자:

jQuery load()는 특정 URL의 리소스를 요청하고, 응답을 HTML로 변환하여 지정된 DOM 요소에 로드합니다. 💡 ajax (Asynchronous JavaScript and XML) (에이싱크러너스 자바스크립트 앤 xml) 비동기 방식의 자바스크립트와 xml 동기방식: 서버에 신호를 보냈을때 응답이 돌아와야 다음 동작을 수행 비동기방식: 신호를 보냈을때 응답여부와 상관없이 다음 동작 실행 💡Ajax(Asynchronous Javascript and XML)는 클라이언트 가 비동기방식으로 자바스크립트를 이용하여 > 화면 … 더 읽기

tabSlide

작성자:

예제 미리보기 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 … 더 읽기

adaption

작성자:

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> … 더 읽기

게슈탈트이론

작성자:

게슈탈트(Gestalt) 이론이란? 막스 베르트하이머(Max Wertheimer)의 이론으로, 우리의 뇌는 구성요소들을 개별적으로 보기에 앞서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다는 이론입니다. 우리의 뇌는 구성요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴 형태적 차이를 먼저 파악하려는 습성을 지녔다 4가지 원칙 유사성의 원리 근접성의 원리 연속성의 원리 공통영역의 원리 유사성의 원리 색, 모양, 크기가 유사한 요소들을 하나의 … 더 읽기

topBtn

작성자:

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 … 더 읽기