DOM 스크립트 소스-소스 코드 예제

분류없음 2015.02.22 17:17

DOM 스크립트-소스 코드 예제



에이콘풀판사 DOM 스크립트 요약본
http://channy.creation.net/project/domscripting/

  1. 간단히 살펴보는 자바스크립트 역사

  2. 자바 스크립트 문법 익히기

  3. 문서 객체 모델(DOM)이란?

    • Test: alert title 속성
  4. 자바스크립트로 만드는 온라인 사진첩

  5. 꼭 알아야 할 핵심 기본기

    • Example: 스크립트 분리로 팝업 창 만들기
  6. 사진첩 기능 개선하기

  7. 실행시에 마크업 코드 생성하기

    • Test: document.write inline
    • Test: document.write external
    • Test: alert innerHTML
    • Test: innerHTML 업데이트
    • Test: alert node info
    • Test: createElement
    • Test: createTextNode
    • Test: appendChild
    • Test: documentFragments
    • Test: documentFragments
  8. 의미가 살도록 컨텐츠 개선하기

  9. CSS와 DOM 연동하기

    • Example: 변경 CSS alert 보기
    • Itinerary: 테이블 띠무늬 만들기
    • Story: 첫 단락 스타일 입히기
  10. 애니메이션 슬라이드쇼 만들기

  11. 총정리편 (더블트랙 웹사이트)

  12. DOM 스크립트의 미래


저작자 표시
신고

설정

트랙백

댓글

CSS3 트랜지션 (transition) 효과

CSS/CSS3 2012.03.05 19:39

CSS3 트랜지션 (transition) 효과

트랜지션은화면의 변화나 움직을 보여주고 싶을때 쓸수있다.
사용방법은 다음과 같다

transition: property(변화시키고자 하는요소, 배경생 폰트컬러 등)
               duration(액션이 진행될 시간)
               timing-function(액션의 방법)
               delay(지연시간);

div{ transition: color 2.5s ease-in 0;}

위는 간단한예. 브라우저마다 -moz-,-webkit-,-o-를 붙여야된다(귀찮아서 생략).
물론 IE는 지원하지 않는다.

저작자 표시
신고

설정

트랙백

댓글

CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용

CSS/CSS3 2012.03.05 19:00

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값을  변형시킨다

  [s,0,0,0],
  [0,s,0,0],
  [0,0,s,0],
  [0,0,0,1]

3.회전: 순서대로 X,Y,Z축 회전 한에 대한 회전하려면 4개의 값은 알아야한다. 각도는 라디안이다

  [1,0,0,0],
  [0,cos(a), sin(-a), 0],
  [0,sin(a), cos( a), 0],
  [0,0,0,1]

  [cos( b), 0, sin(b),0],
  [0,1,0,0],
  [sin(-b), 0, cos(b), 0],
  [0,0,0,1]

  [cos(c), sin(-c), 0, 0],
  [sin(c), cos( c), 0, 0],
  [0,0,1,0],
  [0,0,0,1]


4. 이동 : 맨아래 행이다. 순서는 X,Y,Z

  [1,0,0,0],
  [0,1,0,0],
  [0,0,1,0],
  [tx,ty,tz,1]

이를 이용한 예제는 아래에서 보자. hrml은 아이디 #stage 의 div와  거기에 img 엘리먼트 5개가 전부다.
http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dgallery.html?iframe=true&width=850&height=626

div#stage{ -webkit-perspective: 600px; }

img { -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 0.7s; 
	  -webkit-transform: matrix3d(0.7109, 0, -0.703279,
	                              0, 0, 1, 0, 0, 0.703279,
				      0, 0.7109, 0,
				      0, 0, 0, 1); 
	  -webkit-box-reflect:below 15px -webkit-gradient(linear,
                              left top, left bottom,
	                      from(transparent),
                              color-stop(0.7, transparent),
                              to(#ff0000)); 
     }
						  
img:hover { -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 0.7s; 
	    -webkit-transform: matrix3d(1, 0, 0, 0,
                                        0, 1, 0, 0,
                                        0, 0, 1, 0, 
                                        0, 0, 200, 1); 
          }


저작자 표시
신고

설정

트랙백

댓글

CSS3 엘리먼트 변형 3D (Transform 3D)

CSS/CSS3 2012.03.05 17:23

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 the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

3D를 생각하면 y축이 더해진것이다.
하나하나 설명하기보다 아래 데모로 테스트 해보는것이 이해하기쉬울것이다. 단 그전에
perspective를 알아야 한다 즉 원근법인데 아래 그림을 참조하자

perspective를 설정하여 두 엘리먼트 사이의 입체간격을 지정한다.perspective-orgin은 2D 변형에서 살펴본것과 같이 중심점이다. 중심점에서 얼마만큼 떨어지냐를 정한다. 값은 flat과 preserve-3d로 두가지가있다 flat은 부모공간과 평평하게 놓는것이고, preserve-3d는 3d에서 독립적인것이다

위의 것들을 일일이 예제로 들기보다 직접 이 툴로 어떤것들을 표현 할 수 있는지 확인 해보는것이 편할듯하다.
웹킷기반 브라우저로만 확인가능하다.
이 툴에서 안에 있는 태양그림을 포함하는 것이 #inner이고 바깥이 #outer이다 (그림을 클릭하면 된다)
http://sianasiatiger.cafe24.com/study/css3dexplorer/css3dexplorer.html

위와같이 만들어본 것 소스는 다음과 같다.

<div id="outer>
 <div id="inner">생략</div>
</div>
#inner{-webkit-transform: 
                   perspective(275)
                   translate3d(16px, 30px, 59px)
                   scale3d(1.35, 1.25, 1.5)
                   rotate3d(23, 18, 41, 21deg);
       -webkit-transform-origin: 50% 50% 50%;
       -webkit-transform-style: preserve-3d;
      }

더욱 많은 예제를 보고싶다면 여기로 http://ugpapa.tistory.com/271


저작자 표시
신고

설정

트랙백

댓글

CSS3 엘리먼트 변형2D (transform)

CSS/CSS3 2012.03.05 13:54

CSS3 엘리먼트 변형2D (transform)

엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다.
기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다.
각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조).

이 그림처럼 여러변형이 가능하다

예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다.
소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자
http://sianasiatiger.cafe24.com/study/css3matrix2d/matrix2dExplorer.html

<div></div>
<div id="scale">75%로 축소</div>
<div id="skew">가로 30도 세로 20도</div>
<div id="translate">호버시 가로10px ,세로 20px이동</div>
<div id="rotate">20도 회전</div>
<div id="matrix">sclaeX,skewX,skewY,sclaY, X이동, Y이동</div>
div{ float:left; width:140px; height:140px; 
     background-color:#666; margin:10px;
	 }
#scale{ -webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-o-transform: scale(.75) ;
        -ms-transform: scale(.75) ;
	transform: scale(.75) ;
	/*값은 %*/
	}
#skew{ 
       transform: skew(30deg,20deg) ;
	/*x,y시계방향으로 돌릴각도*/
	}
#translate:hover{
        transform: translate(10px,20px) ;
	/*x,y,이동할거리*/
	 }
#rotate{
        transform: rotate(20deg);
	/*시계방향 회전각도*/
	}
#matrix{	
        transform:matrix(0.5,0.5,0,1,100,0);
        /*세로크기, skewX,skewY,세로크기, 가로이동, 세로이동*/
        } 

결과는 아래그림과 같다.

직접 확인 하려면 여기 http://sianasiatiger.cafe24.com/study/css3-transfom2d.html

한가지 깜박했는데 transform-origin로 회전,움직임등의 중심점을 정할수 있다.모퉁이가 아니라 중심점에서 x,y이동임을 주의할것. 소스는 아래와 같으니 참고

div{transform-origin: 0, 30%;}


저작자 표시
신고

설정

트랙백

댓글

CSS3 투명도(opacity) 그림자(shadow) 설정

CSS/CSS3 2012.03.04 23:00

CSS3 투명도(opacity) 그림자(shadow) 설정

초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다

투명도(opacity)

투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다.

<div class="box1">box1 opctical 50%</div>
<div class="box2">box2 opctical 30%</div>

포지션은 겹치게 했다.

div{ width:300px; height:150px; position:relative;}
.box1{ left:100px; top:30px;
       background-color:#F00;
       opacity:.5;
     }
.box2{ left:150px; top:-50px;        
       background-color:#00F;        
       opacity:.3;
     }


투명도 쓸때 생각할것

1. 투명도는 누적되어 나타난다. 첫번째 박스는 50% 두번째 박스는 30%이다.
2. 투명도는 자식 엘리먼트에도 역시 적용된다. 자식엘리먼트는 부모것을 그대로 받아들이지 다시 원래대로 돌릴 수 없다.

문제의 IE8이하 버전을 해결할 필터를 이용한 방법은 다음과 같다.

#IE{ background-color:#00F;
     filter: alpha(opacity=75); }

투명도로 0~100%를 나타낸다.

그림자(shadow)

텍스트 그림자 효과와 같다. 좀더 옵션이 있다. IE는 IE9부터 지원한다
값은 색깔 가로 옵셋, 세로 옵셋, 블루어 효과, 그리고 마지막 값은 안쪽으로 그림자 옵션이다(inset)

.box3{ background-color:#090;
       box-shadow:#000 15px 15px 10px;
	 }
.box4{ background-color:#090;
       box-shadow:#C00 15px 15px 30px
	   ,#000 10px 10px 3px;
	 }
.box5{ background-color:#090;
       box-shadow:#000 15px 15px 10px inset;
	 }   
결과는 여기서 확인 http://sianasiatiger.cafe24.com/study/css3-box_03.html
첫번째는 간단한 적용한것. 마지막은 안으로 한 것이다.
두번째와 같이 여러개를 줄수도 있다. 여기서 먼저 설정해준것이 맨위에 보인다.


저작자 표시
신고

설정

트랙백

댓글

CSS3 border-image 테두리 이미지

CSS/CSS3 2012.03.04 16:48

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:url(../images/flower.jpg) 30 round; 
border-image:url(../images/flower.jpg) 30 round;
}

결과이미지 여기서 주목할부분은 보더(border)의 이미지라는 점이다 따라서 보더와 관련한 CSS 속성을 정해주지 않으면 나타나지 않는다. 보더는 레이아웃, 박스 크기에 영향주므로 보더를 사용아 적절한지 심각히 고려해보고 border-image를 사용해야 할 것이다.


위에서 border-width:15px; 로 정해준것은 이미지를 좀더작개 하기위함이였다. 이미지 크기가 90px, 따라서 3으로 나누면 각변,모서리는 30px로 나올 것이다  이걸 반으로 나누어 15px로 잡았으니 1/2크기로 이미지가 나타나는 것이다.결과물은 세세하다.

각 요소 들을 살펴보면 처음에는 이미지 주소, 두번째는 마진 패딩과 같은  오른쪽 시계방향으로 이미지 옵셋을 결정한다. 마찬가지로 한번에 정하면 네 변모두 동일시 되며 각기 지정할 수도 있다.

마지막  옵션은 다음 세가지다.
1)stretch : 기본값으로 이미지가 박스의 너비나 높이에 맞게 이미지 스케일을 조정한다.


2)repeat : 말그대로 반복시킨다. (가로 세로 길이 무시)

3)round : 반복하지만 엘리먼트 가로세로에 정확하게 맞게 정한다.

적용 할 이미지의 가로,세로 가운데 반복되는 부분은 작을 수록 좋다. repeat의 경우는 정확히 맞지 않기에 문제가 있고, round,repeat의 경우는 이미지 크기가 따라 이미지 비율이 깨지기 때문이다.(확대해서 이미지를 관찰해보자). 그리고 역시 IE에서는 아예 지원하지 않는다.

저작자 표시
신고

설정

트랙백

댓글

CSS3 라운드박스 및 박스 속성

CSS/CSS3 2012.03.04 12:58

CSS3 라운드박스 및 박스 속성

CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다

박스 속성, 콘텐츠,마진,패딩,보더

레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다.

캡처한 그림과 같이 보더도 계산된다는것을 잊지말자.

아웃라인(outline)과 보더(border)

위와 같이 보더는 박스계산에 계산된다 하지만 아웃라인은 계산되지않는다 아웃라인은 이런점에서 계산하기에 좋지만 단점은 아웃라인이란 단어그대로 엘리먼트 전체를 감싸기만 하지, border-bottom 처럼 한쪽 면을 지정할 옵션이 없다는 것이 단점이다. 그리고 아웃라인은 보더화 함께 사용할시 보더 효과 다음에 나타난다.

overflow-x, overflow-y

세로 계산은 컨텐츠의 내용을 다보여줄 길이를 반영한다.이때 overflow로 제어할수 있는건 알테고 CSS3부터는 x,y로 별도 지정이 가능해졌다.

예제를 보려면 여기로가보자
http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-y&preval=hidden

CSS3 라운드박스 border-radious

이미 CSS3초창기부터 잘알려져 있다. 근래의 대부분의 브라우저가 지원하지만 IE는 9부터 지원한다. 또한 브라우저마다 버전상 지원여부가 있기에 아직 약간의 모질라,웹킷 별도 지정을 필요로 한다고 본다.

아래 그림 버전까지는 모질라, 웹킷의 지정을 별로로 필요로한다

border-radious 지원 현황. 이브라우저는 별도 지정없이 바로 사용가능하다
<div id="RoundBox">THIS IS THE TEST</div>
위는 html 아래는 css코드
#RoundBox{ 
width:200px;
height:100px;
padding:15px;
background-color:#CCC;

-moz-border-radius: 21px; /*모질라*/
-webkit-border-radius: 21px; /*웹킷*/
/*IE9+,FF4+,chrome,Safari5,+opera*/
border-radius: 21px;
}

결과는 여기서 확인할 수있다 http://sianasiatiger.cafe24.com/study/css3-box.html
마지막으로 박스를 마음껏 만들어볼 수 있는 장소 http://www.cssportal.com/css3-rounded-corner

덧)CSS3 포스팅때 마다 느끼는거지만..IE는 정말 귀찮은존재다. 거의 사라지는 추세지만 IE6를 사용하는사람이이  더러있고...또 CSS3 "그나마" 마음놓고 사용할  IE9부터이다. IE6가 사라진 기간을 생각해보자 끔직하다...

저작자 표시
신고

설정

트랙백

댓글

CSS 선택자(selectors) - 조합 선택자

CSS 2011.12.28 21:26



CSS 선택자(selectors) - 조합 선택자

최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅

일단 예제 html을 올린다


 <h1>CSS선택자</h1>  
 <div> 
  <h2>맛있는반찬</h2> 
  <p>맛있게 먹어봅시다</p> 
  <p>으히히</p> 
 <ul>
  <li><em>매운</em>꽃게탕</li> 
  <li>라면<em>밥</em></li> 
  <li><em>카레</em>라이스</li> 
 </ul> 
  <p>그런데 달랑<strong>3개</strong>뿐</p> 
  <div><p>지금은 저녁인데ㅠㅠ</p></div> 
</div>


자손 선택자 A B

아주 잘 알고있는것 부모의 자손엘리먼트를 지정


div ul li{ color:#009;}

위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가  색깔이변한다

공통 선택자 A * B

구애 받지않고 모든것. * 는 모든것을 의미한다.  A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다.


div * em{ color:#F00;}

캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째로 적용된다

직계자식 선택자 A > B

B는 A의 직계자식이여야한다. 자손 선택자와 달리 명확함을 돋보이게한다 자손의 경우 div  p strong 으로 지정하거나 손자로 바로 div strong으로 적용가능하지만 직계자손은 div > p > strong  처럼 바로 부모 자식순서로  정확하게 있어야가능하다.


div > p > strong{color:#F00;}

좀더확실하게 보기위해 사용한다.


인접형제 선택자 A + B

A다음 오는 B엘리먼트라 생각하면된다


h2 + p{ font-size:13px;}

일반형제 선택자 A ~ B

A이후에 나오는 B엘리먼트들을 가르키는데 그 B엘리먼트가 같은 트리안에 포함될 때 까지 적용된다.

h2 ~ p{ color:#903;} 


자손 선택자를 빼고는 익스플로어6 에서 적용안된다.또한 일반형제 선택자는 익스플로어7이하로적용 안된다.
앞으로 설명할 여러선택자들 그리고 더욱이 CSS3로 넘어가면 지원이 미흡한데 그의 해결 방안은  http://code.google.com/p/ie7-js/ 의 스크립트를 이용 방안이 있는데 따로 설명예정.

마지막으로 위의 예제를 적용한것은 아래참조

http://sianasiatiger.cafe24.com/study/CSS_seletor.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바