LogicalMaster

- 소스 - 결과화면

실행 결과 - 소스 이 모달창을 사용하기 위해서는 외부 JS, CSS 파일이 필요합니다. 파일을 첨부합니다.

이 글의 일부는 www.codingfactory.net/10319 jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드 .hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration [, easing ] [, complete ] ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫�� www.codingfactory.net 이곳에서 가져왔습니다. .hide() .hide()는 선택한 요소를 사라지게 합니다. - 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. - 문법 2 .hide( duration [, easing ] [, comple..

글의 내용 중 일부는 www.codingfactory.net/10676 jQuery / 맨 위로 부드럽게 이동하는 링크 만들기 사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 �� www.codingfactory.net 이곳을 참조했습니다. 사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를..

동적 페이지 새로고침 구현하기 - lomea.tistory.com/80 jQuery - 동적 페이지 새로고침 구현하기 안녕하세요. 이번에는 제이쿼리를 이용한 동적 페이지 새로고침을 구현 해 보도록 하겠습니다. 먼저 xampp 와 같은 서버 프로그램을 설치합니다. jQuery load 는 CORS 정책에 의거, 파일에서 구동할 수 lomea.tistory.com 안녕하세요. 이번에는 동적 페이지 이동 기능을 구현 해 봅시다. 먼저 xampp 프로그램을 설치해야 합니다. www.apachefriends.org/index.html XAMPP Installers and Downloads for Apache Friends What is XAMPP? XAMPP is the most popular PHP develo..

안녕하세요. 이번에는 제이쿼리를 이용한 동적 페이지 새로고침을 구현 해 보도록 하겠습니다. 먼저 xampp 와 같은 서버 프로그램을 설치합니다. jQuery load 는 CORS 정책에 의거, 파일에서 구동할 수 없으며 http://localhost 와 같은 호스팅이 있을경우에만 작동할 수 있습니다. 번역문 보기 : xampp 를 설치합니다. "xampp" 구글링 하면 나오니 참고 바랍니다. - 소스 function pageload(url) { // 페이지 로드 함수 $("#container").load(url); // url 을 입력하면 .load 함수를 이용하여 해당 페이지를 불러온다. } Hello World! 1번 페이지로 이동 2번 페이지로 이동 3번 페이지로 이동 - 결과화면 - 1번페이지 소..

뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 및 positon 속성 그리고 positon속성과 관련된 top, right, bottom, left, z-index 속성에 대해 알아보겠습니다. 대표적인 레이아웃 테크닉인 플로팅(Floating)과 포지셔닝(Positioning)을 알아보고, 모던 레이아웃인 플렉스박스(Flexbox)와 그리드(Grid) 레이아웃에 대해 알아보겠습니다. 먼저 플로팅 레이아웃에 대해 학습해 봅니다. - 일반적인 레이아웃 흐름(Normal Layout Flow) - 소스 html { font-size: 10px; } body { margin: 3rem; font: 1.4rem/1.5 Verdana, Arial, Sans-Serif; }..

- 소스 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; border:1px solid red; margin:30px; font-size:20px; width:300px; } WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ..

이 포스팅에서는 CSS3를 이용한 3D 이미지 플립 갤러리에 대해 알아봅니다. - 소스 * { box-sizing: border-box; } body { font-family: Avenir, Arial, sans-serif; margin: 2%; } div.flip-3d { perspective: 1200px; width: 28%; display: inline-block; margin: 2%; } div.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem; } div.flip-3d figure img { width: 100%; height: auto; } di..

글의 일부는 webclub.tistory.com/379?category=541913 CSS 핵 보다 나은 조건부 주석문(conditional comment) Better conditional classnames for hack-free CSS 조건부 주석문은 html 요소에 조건부 클래스 이름을 적용하면 CSS 수정과 IE의 특정 버전을 대상으로하는 데 도움이 되는 일반적인 방법입니다. 이것은 첫 번�� webclub.tistory.com 여기서 가져왔습니다. 조건부 주석문이란? 조건부 주석문은 html 요소에 조건부 클래스 이름을 적용하면 CSS 수정과 IE의 특정 버전을 대상으로하는 데 도움이 되는 일반적인 방법입니다. 이것은 첫 번째 폴 아일랜드 의해 설명되고 HTML5 보일러 플레이트에 의해 좀더..