본문 바로가기

웹디자인9

DOM 스크립트 소스-소스 코드 예제 DOM 스크립트-소스 코드 예제 에이콘풀판사 DOM 스크립트 요약본 http://channy.creation.net/project/domscripting/ 간단히 살펴보는 자바스크립트 역사자바 스크립트 문법 익히기문서 객체 모델(DOM)이란? Test: alert title 속성 자바스크립트로 만드는 온라인 사진첩 Image Gallery 1: 자바 스크립트 없는 페이지Image Gallery 2: 사진 넣기Image Gallery 3: 사진 및 텍스트 넣기Image Gallery 4: 스타일 꼭 알아야 할 핵심 기본기 Example: 스크립트 분리로 팝업 창 만들기 사진첩 기능 개선하기 Image Gallery 1Image Gallery 2Image Gallery 3 실행시에 마크업 코드 생성하기 Te.. 2015. 2. 22.
CSS3 트랜지션 (transition) 효과 CSS3 트랜지션 (transition) 효과 트랜지션은화면의 변화나 움직을 보여주고 싶을때 쓸수있다. 사용방법은 다음과 같다 transition: property(변화시키고자 하는요소, 배경생 폰트컬러 등) duration(액션이 진행될 시간) timing-function(액션의 방법) delay(지연시간); div{ transition: color 2.5s ease-in 0;} 위는 간단한예. 브라우저마다 -moz-,-webkit-,-o-를 붙여야된다(귀찮아서 생략). 물론 IE는 지원하지 않는다. 2012. 3. 5.
CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 매트릭스를 이용해 3D변화는 무궁무진하다. 하지만 2D에 비해 좀 어여운게 사실. 삼각함수 회전 정도는 이해한다는 가정에 포스팅한다.매트릭스를 바로 체험 해볼수 있도록 링크를 걸어두었다. (웹킷기반 브라우저만 지원) http://sianasiatiger.cafe24.com/study/matrix3dexplorer/matrix3dexplorer.html 스크롤바를 조절하여 결과를 볼 수 있을 것이다. 이제 하나하나 살펴보자. 4열 은 투시도법이다. 그외 것은 아래설명 1. 디폴트 : 아무변화 없는 그대로다. 단위 행렬이다. [1,0,0,0], [0,1,0,0], [0,0,1,0], [0,0,0,1], 2. 크기변환 : 대각선의 S값을 변.. 2012. 3. 5.
CSS3 엘리먼트 변형 3D (Transform 3D) CSS3 엘리먼트 변형 3D (Transform 3D) 3D엘리먼트를 둘러보자 먼저 믿기지않을 정도의 예제를 보자. IE, 오페라는 지원하지 않는다. 변형을 이용한 CSS3만으로 만들어진 애니메이션 http://sianasiatiger.cafe24.com/study/css3butterfly/butterfly.html Function Description matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values translate3d(x,y,z) Defines a 3D translation translateX(x) Defines a 3D translation, using only .. 2012. 3. 5.
CSS3 엘리먼트 변형2D (transform) CSS3 엘리먼트 변형2D (transform) 엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다. 기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다. 각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조). 이 그림처럼 여러변형이 가능하다예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다. 소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자 http://sianasiat.. 2012. 3. 5.
CSS3 투명도(opacity) 그림자(shadow) 설정 CSS3 투명도(opacity) 그림자(shadow) 설정초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다 투명도(opacity) 투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다. box1 opctical 50% box2 opctical 30% 포지션은 겹치게 했다. div{ width:300px; height:150px; position:relative;} .box1{ left:100px; top:30px; background-color:#F00; opacity:.5; } .box2{ left:150px; top:-50px; backgr.. 2012. 3. 4.
CSS3 border-image 테두리 이미지 CSS3 border-image 테두리 이미지라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다. 일단 필요한 것은 정사각형 이미지 이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다 html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp h2{ width:200px; border-width:30px; -moz-border-image:url(../images/flower.jpg) 30 round; -webkit-border-image.. 2012. 3. 4.
CSS3 라운드박스 및 박스 속성 CSS3 라운드박스 및 박스 속성 CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다 박스 속성, 콘텐츠,마진,패딩,보더 레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다. 캡처한 그림과 같이 보더도 계산된다는것을 잊지말자. 아웃라인(outline)과 보더(border) 위와 같이 보더는 박스계산에 .. 2012. 3. 4.
CSS 선택자(selectors) - 조합 선택자 CSS 선택자(selectors) - 조합 선택자최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅 일단 예제 html을 올린다 CSS선택자 맛있는반찬 맛있게 먹어봅시다 으히히 매운꽃게탕 라면밥 카레라이스 그런데 달랑3개뿐 지금은 저녁인데ㅠㅠ 자손 선택자 A B 아주 잘 알고있는것 부모의 자손엘리먼트를 지정 div ul li{ color:#009;} 위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가 색깔이변한다 공통 선택자 A * B구애 받지않고 모든것. * 는 모든것을 의미한다. A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다. div * em{ color:#F00;} 캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째.. 2011. 12. 28.

티스토리툴바