Javascript vs jQuery

5개의 이미지가 있다. 이 이미지들이 차례로 왼쪽에서 오른쪽 방향으로 움직인다. 화면에 보이는 하나의 이미지가 오른쪽으로 서서히 이동하고 동시에 다음 이미지가 앞의 이미지를 따라 나타난다. 이 과정이 반복되며 마지막 이미지가 슬라이드 되면 다음 이미지는 첫 번 째 이미지가 된다.  이것을 보통 슬라이드라고 한다. 웹 페이지에서 이와 같은 슬라이드 효과를 만들려면 javascript를 사용해야 한다. 여기서는 아래 제시된 […]

Share the joy
  •  
  •  
  •  
  •  

HTML 5 기본 페이지 구성 코드

다음 코드는 html 5로 구성한 초간단 페이지 코드이다.

이 문서는 상당부분 http://www.sitepoint.com/a-basic-html5-template/ 의 설명에 기초하고 http://www.w3schools.com/의 여러 문서들을 참조하여  작성하였음을 미리 밝힌다.  html 5는 이전 버전인 xhtml이나 HTML 4와는 기본적인 개념에서는 같지만 상당한 변화가 이루어졌다. 그 변화가 무엇인지 기본적으로 살펴보기로 하자.   doctype html에서 doctype은 Tag는 아니며 웹 문서가 어떤 버전의 html을 사용하고 있는지를 브라우저에게 알려주기 […]

Share the joy
  •  
  •  
  •  
  •  

HTML이란?

1. HTML이란? HTML이란 Hyper Text Markup Language 또는 Hypertext Markup Language의 약자이다. 즉 Hypertext를 만드는 Markup Language이다. Hypertext는 웹을 말한다. Hypertext란 컴퓨터 디스플레이 같은 전자기기에서 다른 text로 접근하게 해주는 링크(link)를 가진 text이다. 이 말은 그냥 텍스트가 아니라 마우스 클릭이나 키 조작과 같은 동작으로 다른 텍스트로 이동하는 텍스트라는 뜻이다. Hypertext는 web을 구성하는 내용물 자체를 의미한다. 오늘 날 […]

Share the joy
  •  
  •  
  •  
  •  

JavaScript Fade In/Out 전환효과

이 글은 JavaScript와 CSS opacity 속성을 활용하여 Fade In/Out 효과와 함께 이미지를 전환하는 예제이다. 이 예제를 보기 전에 먼저 이 사이트의 아래 다른 글을 보면 도움이 될 것이다. css opacity(불투명도) DIV 슬라이더(javascript) 이 글에서는 먼저 순수 JavaScript를 활용해서 Fade In/Out 예제를 만들어보고 마지막에 jQuery를 활용하는 방법을 알아보기로 하자. jQuery와 같은 휼륭한 코드 절감 방법이 있음에도 […]

Share the joy
  •  
  •  
  •  
  •  

css opacity(불투명도)

opacity는 HTML 구성요소의 불투명도를 지정하는 css 속성이다. 버전 : CSS3를 지원하는 모든 브라우저에서 사용 가능(일부 브라우저 낮은 버전에서는 verder prefix 필요) 용법 : opacity: n; n=0~1(값이 낮을수록 불투명도가 낮아짐, 즉 투명도가 높아짐. 소숫점 사용 가능, 예 0.1=10%) 1. opacity 예제 (기본값 opacity: 1) (opacity: 0.5) 2. opacity 미지원 브라우저에서 사용 * 지원여부 확인 : http://caniuse.com/css-opacity  

  […]

Share the joy
  •  
  •  
  •  
  •  

JavaScript란 무엇인가?

1. 웹 사이트를 멋지게 동작하게 하는 방법 오늘날의 웹 사이트는 사용자가 마우스 포인터를 움직이거나 휠을 돌려 스크롤에 변화를 주기만 해도 다양한 동작과 내용을 보여준다.  슬라이드 애니메이션이 그렇고, 마우스를 올리면 툭 튀오나오는 도움말이나 페이지를 이동하지 않고도 다른 내용을 화면에 불러다 보는 기능들은 이제 웹 페이지의 기본적인 기능으로 여겨진다. 이렇게 당연시 하게된 기능들은 어떻게 해서 가능한 것일까? 2000년 […]

Share the joy
  •  
  •  
  •  
  •