html/css/js로 설문조사지를 구현하기위한 배경지식

##<meta name=""content="">라는 형식으로 검색엔진에 대한 정보,저작권,사이트에 대한 정보를 찾아 볼 수 있다.##

​

자,그렇다면 name의 속성을 알아보도록 하자.

​

1.keyword:문서에 대한 핵심 키워드를 작성 함

2.description:문서에 대한 설명

3.author:저자 이름

4.generator:그 문서를 생성하기 위해 사용한 소프트웨어

5.application-name:문서를 표현하기위한 에플리케이션 이름

​

그리고 html5에서는 <meta charset="UTF-8">을 사용 하는 습관을 드리도록 하자.

​

##link태그란 외부의 문서와 연결 시켜주는 태그 인데 link태그도 속성을 지닌다.

그 속성에 대해 알아보자.##

​

<link rel="" type="" href="url">의 형식인데

rel값에

​

stylesheet가 들어가면 스타일 시트를 연결하고 alternet는 문서의 대안버전으로 연결 하며 author는 저작자,help는 도움말, license는 저작권 정보를 각각 의미한다.또한 search 는 검색엔진으로 연결할때 쓰인다.

 

그리고 type값에

css의 경우에는 text/css

javascript 의 경우에는 text/javascript

xml의 경우에는 application/xml 로 쓰인다.

+ media는 연결문서가 표시 될 장치 또는 미디어 유형이다.

​

##제이쿼리 사용하는 법##

<button id="start_ajax">서버와 통신시작</button>

를 사용하면 된다. (3.3.1 버전이고 버전을 바꾸고 싶다면 숫자를 바꾸도록 하자.)

​

​

##AJAX (Asynchronous javascript and xml) -비동기적 통신##

ajax란, 비동기적인 통신을 하는것인데 사용자가 새로고침을 하지않아도 자동으로 통신을 해 주는 것이다.

네이버 메일을 대표적인 예로 들 수있다.(삭제를 하면 메일리스트 부분만 수정이 된다.)

$("#start").click(function(){ $.ajax({ type:"POST", url:"./book.jsp", data : {name : "doneHJ"}, dataType : "xml", success: function(xml){ console.log(xml); }, error: function(xhr, status, error) { alert(error); } }); });

위의 소스코드는 jQuery의 Ajax 옵션이다.

<button id="start">서버와 통신시작</button>

결국 start 버튼을 누르면 post 방식으로 서버와 통신을 하게된다.

​

##html 의 div와 span 태그에 대해서 (class 속성)##

일단,div는 블록태그이며 span은 인라인태그라는 사실을 기억하도록하자.

class 속성은 id태그와 같이 모든요소에 사용이 가능하다. 하지만 둘의 차이점이 존재하는데 그 차이는

name은 한번만 선언이 가능해서 조금 더 특별하게 지어져야 한다는 것이고, class는 여러번 선언이 가능하므로 조금 더 범용적으로 지을수 있다는 것이다.

​

##css태그##

filter태그 :흐림정도를 조절 할 수 있다.

border-radius:요소의 테두리를 둥글둥글하게 만들어 준다.

+색상을 지정한뒤에 %를 지정 해 주면 무지개 같은 도형을 만들수 있다.

< ex코드 >

background: -ms-linear-gradient(left, rgba(27,148,222,1) 0%, rgba(211,139,39,1) 25%, rgba(174,41,149,1) 50%, rgba(211,139,39,1) 75%, rgba(27,148,222,1) 100%);

text-align 태그:텍스트의 정렬방향을 결정한다.

line-height태그:줄 높이를 지정한다.

opasity태그:요소를 불투명하게 해준다.

font-weight태그:폰트의 가중치나 굵기를 조정한다.

font-family태그:글꼴을 정한다.

cursor태그:마우스 커서가 요소위에 있을 때 표시 할 마우스 커서를 지정합니다.

display태그: 요소의 렌더링 박스유형 지정

 

##javascript 함수(settimeout(),setinterval())##

일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용한다.이 함수를 사용할 때에는 남아있는 시간을 해제/삭제하는 clearTimeout() 함수를 사용해야 메모리 누수의 피해를 방지 할 수 있다.

이 함수는 아래의 4가지 경우에 가장 많이 사용되곤 한다.

---

i. 접속 후 몇 초 후에 팝업 또는 배너창 띄우기

ii. 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션 실행

iii. 검색창 또는 일부 섹션 몇 초 뒤에 사라질 경우

iv. 방문자 접속 후 20-30초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울 경우

---

<이 함수의 실행예제>

setTimeout(function() { console.log('Works!' }, 3000); // &nbsp;3초 후 함수가 실행됨

-> 3초의 딜레이를 가짐

​

​

일정시간마다 반복 실행을 할때에는Setintervel() 함수를 사용한다.

---

i. 갤러리 형식의 뷰를 만들어 이미지를 정해진 시간 간격으로 바꾸어 적용하는 경우(Carousel Gallery)

ii. 일정 시간 간격으로 배너광고를 바꾸면서 보여줄 경우

iii. 일정 주기로 계속해서 서버와 통신이 필요한 경우

---

Setinterval()함수를 사용 할 때는 ! clearInterval을 사용하여 타이머를 중지 시킬 수 있다.

​

두 함수의 대표적인 실행예제를 함께 살펴보도록 하자.

@test.html

<h2>clearInterval() 함수로 setInterval() 중지하기</h2> <button onclick="startAlert();">setInterval()</button> <button onclick="stopAlert();">clearInterval()</button>

@test.js

startAlert = function() { playAlert = setInterval(function() { alert('http://webisfree.com'); }, 3000); }; stopAlert = function() { clearInterval(playAlert); };

이번 포스트를 통해 제이쿼리와 ajax에 대해 조금 더 배우고 싶다는 생각을 했다.

자바스크립트 너무 재밌당 !!!