LogicalMaster

안녕하세요. 이번에는 제이쿼리를 이용한 동적 페이지 새로고침을 구현 해 보도록 하겠습니다. 먼저 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 보일러 플레이트에 의해 좀더..

글의 일부는 webclub.tistory.com/608?category=724656 #1 HTML 이란 무엇인가? HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사�� webclub.tistory.com 이곳을 참조했습니다. - HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있..

일부 글은 webclub.tistory.com/627?category=690155 #11 CSS Gradients, box-shadow CSS3 의 그레디언트, 박스 그림자에 대한 속성에 대해 알아봅니다. CSS 그레디언트(Gradients) 그레디언트는 한 색에서 다른 색으로 연결되는 중간 단계를 그라데이션이라고 하며, 종류에는 선형(linea webclub.tistory.com 이곳을 참조했습니다. - 그레디언트란 그레디언트는 한 색에서 다른 색으로 연결되는 중간 단계를 그라데이션이라고 하며, 종류에는 선형(linear), 원형(radial) 그레디언트가 있습니다. - 선형(Linear) 그레디언트 선형 그레디언트는 그레디언트 라인(gradient line)이라는, 각각의 점이 다른 컬러값을 갖는 하..

글의 일부는 webclub.tistory.com/625 #9 CSS 애니메이션(Animation), 키프레임(keyframes) CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임�� webclub.tistory.com 여기서 가져왔습니다. - animation-timing-function 애니메이션의 키프레임 사이의 재생 속도를 조절하는 속성으로 재생하는 동안 단계별 재생 속도를 설정합니다. 예를 들어 animation-timing-function:ease-in-out; 속성은 시작 부분의 재생 속도를 점점 빠르게 하고, 마지막 부분의 재생 속도를 점점 느리게 ..

글의 일부는 webclub.tistory.com/625 #9 CSS 애니메이션(Animation), 키프레임(keyframes) CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임�� webclub.tistory.com 여기서 가져왔습니다. - animation-delay animation-delay 속성은 애니메이션 시작을 지연할 시간을 설정하는 것으로 다음과 같은 값을 사용할 수 있습니다. 0 : 속성을 적용하자마자 애니메이션을 시작한다(기본값). now :속성을 적용하자마자 애니메이션을 시작한다. 0으로 설정한 것과 같다. iOS2.0부터 사용할 수 있다. ..

글의 일부는 webclub.tistory.com/625 여기서 가져왔습니다. CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다. 그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다. 애니메이션 장점 CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. ..