반응형 Programing/HTML23 [jQuery] 슬라이더 배너 만드는 방법 구글에서 슬라이더 배너 플러그인을 찾아보면 셀수 없이 많은 소스들이 나온다. 하지만 정작 만들어 사용할 수 있는 사람은 소수인 것을 감안하면 만드는 법 하나정도는 정리해 둬도 괜찮다는 생각이 든다. 슬라이더 배너를 만들기 위해 아래 과정대로 작업을 진행하려고 한다. 1. HTML 및 Style 구조잡기2. 좌우버튼을 생성하여 배너 이동시키기 1. HTML 및 Style 구조 잡기 슬라이드 배너의 핵심은 주황, 노랑, 초록색 영역이다. HTML 삽입 미리보기할 수 없는 소스 초록색 영역은 들이 된다. 실제 노출될 배너들을 의미한다. 이미지들을 일렬로 나열하기 위해 float:left를 사용했고 넓이는 100px에 선을 1px씩 좌우로 넣어서 배너 하나당 넓이는 102px가 된다. 주황색 영역은 banner.. 2014. 3. 13. [CSS3] 배너에 그림자를 입히는 원리② ※ 발췌 : 따라하면서 배우는 HTML5 + CSS3 + jQuery + JavaScript 실무활용 14가지 - 위키북스 배너에 그림자를 입히기에 앞서서 rotate와 skew 에 대해서먼저 살펴보겠습니다. 1. rotaterotate는 지정한 각도만큼 회전시킵니다. 지정하는 값에 따라 기준축을 중심으로 회전합니다. 2014. 3. 7. [CSS3] 배너에 그림자를 입히는 원리① ※ 발췌 : 따라하면서 배우는 HTML5 + CSS3 + jQuery + JavaScript 실무활용 14가지 - 위키북스 배너에 그림자를 입히기에 앞서서 box-shadow에 대해서먼저 살펴보겠습니다. box-shadow properties 속성값 설명 h-shadow 그림자의 수평거리(입력한 만큼 떨어져 위치) 음수 양수 모두 가능 v-shadow 그림자의 수직거리(입력한 만큼 떨어져 위치) 음수 양수 모두 가능 blur 그림자의 경계의 흐림 정도 spread 그림자의 확장거리(그림자를 배너보다 크거나 작게 만든다)음수 양수 모두 가능 color 그림자의 색상(16진수 외에 rgba, hsla로도 가능-투명도 조절할 수 있음) inset 내부그림자(inner-shadow와 같음) 적용 ①수평거리 3p.. 2014. 3. 7. [CSS3] CSS 접두어의 종류 접두어는 CSS가 어떤 웹 브라우저에서도 호환될 수 있게 브라우저 업체별로 사용하는 일종의 약속된 문구입니다. 접두어의 종류 접두어 업체별 브라우저 -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o-, -xv- Opera Software -atsc- Advanced Television Standards Committee -wap- The WAP Forum -webkit- Safari, Chrome (and other Webkit-based browsers) -kthml- Konqueror browser -apple- Webkit supports properties using the –apple- p.. 2014. 3. 7. 이전 1 2 3 4 5 6 다음 반응형
