P3P 및 Google의 쿠키

브라우저의 쿠키 기능이 꺼져 있다는 메시지가 표시되면 브라우저의 쿠키를 사용하도록 설정하지 않았기 때문일수 있다.

자사쿠키 : 검색주소창에 나열된 사이트 도메인에 의해 설정되는 쿠키

제 3자 쿠키 : 페이지에 삽입된 광고나 이미지 등의 항목이 포함된 다른 도메인 소스로부터 제공 되는 쿠키

펌 : http://prattler22.tistory.com/116

- jquery의 가장 강력한 부분은 HTML DOM을 마음대로 순회 탐색할 수 있다.(CSS 셀렉터 처럼)
ex) div p : div 요소의 자식으로 존재하는 모든 p요소

- selector 사용 예제
$("div p") or jQuery("div p")
$("#loginID") or jQuery("loginID")
$(".Columns") or jQuery(".Columns")
$("*") //모든 요소 선택

- 각각의 표현식은 각 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환
DOM요소를 직접 반환 해주는 것이 아니라 그의 Wrapper인 jQuery개체를 반환하므로
직접 DOM 요소를 제어 할때 보다 훨씬 편하고 쉽게 개체를 제어할수 있다.(이게 무슨말인가?)

- 고급 CSS 셀렉터도 지원 : 계층 셀렉터, 일반 셀렉터, 어트리뷰트 필터 셀렉터
계층 셀렉터
ex)
p > a : p요소 바로 아래 자식인 a 요소(하이퍼링크)와 일치된다.
div + p : div 요소의 바로 다음에 나오는 형제(하나) p요소와 일치
div ~ p : div 요소의 다음에 나오는 모든 형제 p 요소와 일치

어트리뷰트 필터 셀렉터(jquery 정규식 지원)
ex)
a[title] : title어트리뷰트를 갖는 하이퍼 링크와 일치
a[href^="mailto:"] : href값이 mailto로 시작하는 하이퍼 링크
a[href$=".pdf"] : pdf파일에 링크가 걸린 모든 하이퍼링크와 일치
a[href*="taeyo.net"] : taeyo.net이라는 값이 포함되어 있는 하이퍼 링크와 일치
input[type="text"] : text형식의 입력 컨트롤과 일치된다.

- $(document).ready()
jQuery가 제공하공하는 이벤트 메서드, 문서의 DOM요소들을 조작 가능한 시점이 되면 자동으로 호출이 되는
이벤트 메서드

http://happyjung.com/bbs/board.php?bo_table=lecture&wr_id=78&page=

해당 div style속성은 아래와 같이 되어있어야 한다.

style="position:absolute; display:none;"

.hide() 메서드

diplay 스타일 프로퍼티의 값을 display:inline에서 display:none으로 바꾼다.

none으로 변경되기 전의 display 프로퍼티 값(일반적으로 block또는 inline)을 기억한다.

.show() 메서드

display:none이 적용되기 전의 display값이 무엇이었든 숨김 바로 전의 상태로 복구한다.

프레임과 인라인 프레임

frame 요소는 한때 가장 많이 사용하던 HTML 요소 중 하나였지만 지금은 접근성과 사용성의 문제로 거의 사용하지 않습니다. 하지만 mash up 사이트를 위해 다른 사이트의 콘텐트를 포함할때 iframe(인라인 프레임)요소를 사용하기도 합니다.

frame 대신 iframe 요소를 사용하는 이유는 iframe요소가 하나의 마크업 문서의 일부로 포함되기 때문입니다. 반면 frame 요소는 완전히 다른 하나의 문서의 형태로 브라우저에 포함되고 또한 frame 요소 안에 있는 링크를 통해 새로운 페이지를 frame 내부로 불러올 수도 있습니다. 즉, iframe은 CSS를 통해 위치 등을 조절할 수 있지만 frame은 요소 자체의 여러가지 속성값을 사용해서 위치 등을 결정합니다.

-- 현재 페이지를 최상단에 유지함으로서 하이재킹을 방지하고 페이지가 항상 브라우저 자체에 있도록 만든다.

if(top.location != self.location) {

top.location.replace(self.location);

}

<캐스팅>

퍼시 : 박건형/마그리트 : 바다/쇼블랑 : 양준모

매월 행사처럼 있는 날이지만 너무 의식없이 보내는 것 같아 아까운 생각이 들어 이렇게 기록을 남기기로 결심했다.

스칼렛 핌퍼넬.. 지난번 지저스 크라이스 슈퍼스타를 보고 좀 후회가 많이 들어 캐스팅을 보고 보기로 결정했다. 뮤지컬이라는게 장소의 제약으로 스토리의 제약도 있다보니 작품성만으로 평가를 하기에는 녹록치가 않았던 것이다. 박건형은 잘 모르겠고...바다면 그래도 좀 보증이 되어있지 않을까 싶었다. 결론을 말하자면 10점 만점에 8점 정도

기억에 많이 남았던 부분은 화려한 무대의상과 바다와 떼창. 그리고 창의적인 무대연출이었다.

인터넷을 뒤져보니 2억원이 든 의상이었다고 한다. 나는 서민이기에 3층 A석에서 보았는데 LG 아트센터 구조가 어디서건 무대를 가깝고 크게 볼수 있어서 먼거리였음에도 문제없이 작품을 즐길수 있었다. 화려한 무대도 오히려 한눈에 들어와서 사실 더 좋았던것 같다. 무대 연출도 장미정원, 궁전, 집, 프랑스, 바다 위의 배 등 다양한 씬들을 생동감 넘치게 표현해서 이점이 정말 주목할 만했다. 정말 이러고 싶지 않은데... 정말 지저스 크라이스트 슈퍼스타와 너무 비교된다; 

역시 외국연출...나는 사대주의는 아니다.

작품을 보자 먼저 '스칼렛 핌퍼넬'이란 무엇일까? 

18세기 프랑스 혁명 당시 단두대의 이슬로 사라져가는 수많은 죄없는 사람들을 구하기 위해 '퍼시'는 스칼렛 핌퍼넬이 되고 프랑스의 로베스 피에르는 쇼블랑에게 스칼렛 핌퍼넬을 잡으라 명한다. 퍼시와 결혼한 마가렛은 쇼블랑과 전 연인사이여서 삼각관계를 이루게 된다. 모 자세한 이야기는 아래를 참고하시고..

뮤지컬은 스토리 면에서는 어쩔수가 없는것 같다;; 

마지막으로 몇자 더 적자면.. OST가 마치 레미제라블의 그것 처럼 굉장히 웅장하다. 정말 퍼시 친구들과 떼창을 하는 장면들에서는 가슴이 벅차오른다. 나 역시 혁명의 시대에 와있는 듯한 기분이 든다. 

굉장히 투자가 많이 된 작품이고 스케일도 큰 편인데 엔터테인한 장면들이 많이 등장한다. 너무 많이 등장해서 오히려 작품을 좀더 가볍게 보이도록 한것같다.

문화적 소견이 없는 나같은 문화 문외한이 작품을 평가하자니 이거 참 보통 어려운일이 아니다.

모든 평가는 각자의 주관에 맡기고 그냥 얘는 이렇게 생각했구나 정도로 받아들이시면 될듯.

location.reload();        //새로고침

top.document.프레임이름.location!.reload();        //프레임 새로고침

top.document.location!.reload();            //프레임 전체 새로고침

opener.location!.reload();                    //부모창 새로 고침

자바로 자동 새로고침

<script type="text/javascript">

setTimeout("history.go(0);", 10);

</script>

펌 : http://blog.naver.com/xers1?Redirect=Log&logNo=140148442821

1. JQuery checkbox 컨트롤

1) checkbox checked 여부

id 인 경우 : $('input:checkbox [ id="checkbox_id" ]').is(":checked") == true;

name인 경우 : $('input:checkbox [ name="checkbox_name"]').is(":checked") == true;

2) checkbox 전체 갯수 : $('input:checkbox [ name="checkbox_name"]').length

3) checkbox 선택된 갯수 : $('input:checkbox [ name="checkbox_name"]:checked').length

4) checkbox 전체 순회 하며 checked 처리

$('input:checkbox [ name="checkbox_name"]').each(function() {

this.checked = true;

// if ( $(this).is(":checked") ) {

// 처리로직;

// }

});

5) checkbox value 값 가져오기

$('input:checkbox [ id="checkbox_id" ]').val();

6) checkbox checked 처리하기

$('input:checkbox [ id="checkbox_id"]').attr("checked", true);

2. JQuery radio 버튼 컨트롤

1) 선택된 라디오 버튼 값 가져오기

$('input:radio[name="certWay"]').val();

$(':radio[name="radio"]:checked').val();

3. JQuery select box 컨트롤

1) selelct box 내용 가져오기

$('#select_box > option:selected').val();

2) 값 설정

$('#select_box > option[value=지정값]').attr('selected', 'true');

3) select disabled

$('#select_box').attr('disabled', 'true');

태그명 : DOCument TYPE Declaration - 현재의 문서가 어떤 형식에 맞추어 제작되었는지를 설명.

보통 HTML 제작도구에서는 새 HTML 문서를 만들때 자동으로 이 태그를 문서 상단에 만들어 주며, 실제 반드시 쓰지 않아도 큰 문제는 없는 태그입니다. 하지만 이 태그를 선언해줌으로써 브라우저가 좀 더 빠르고 정확하게 문서를 분석하여 표현해주며, 제작도구에서도 이 선언에 따라 문서에 제약을 걸어 정확한 표현을 해줄 수 있도록 해줍니다.

예1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

이렇게 선언된 DOCTYPE은 이 문서가 HTML 4.0을 따르고 Transitional 방식에 따라 영문으로 제작되었다는 것과 http://www.23.org/TR/html4/loose.dtd 라는 Document Type Definition(DTD) 정의를 참조한다는 것을 알려줍니다.

물론 이 DOCTYPE 태그를 무시하고 선언하지 않아도 되지만 XHTML과 같은 정확하게 XML 구문으로 작성되어야 하는 HTML 문서에서는 반드시 선언을 하여야 합니다. 그렇지 않으면 브라우저가 XHTML로 문서를 인식하지 않으므로 XML 구문에 어긋나는 점이 있더라도 브라우저는 무시할 수 있습니다.

예2)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">

위의 선언은 문서를 XHTML1.0을 따르고 Strict 방식에 따라 영문으로 제작되었다는 것과http://www.w3.org/TR/xhtml/DTD/xhtml-Strict.dtd라는 DTD정의를 참조한다는 것을 알려줍니다. 

예3)
<!DOCTYPE ①최상위엘리먼트네임 ②(국제적,공용||내부적,제한용) "③(ISO공인인증기관 || ISO비공인인증기관)//④기관명//⑤DTD type //⑥인코딩언어(ISO)" "⑦DTD 주소">

DOCTYPE을 선언하기 위해 위 1~7번 항목에 대해 설명해보겠습니다.


① 최상위엘리먼트네임(RootElementName)
html이나 xhtml의 가장 최상위는 무조건 <html>태그 이기 때문에 html로 작성합니다. 하지만 예외적으로 내부용일경우에는 다른 코드가 삽입될수도 있지만. 여기에서는 국제적인 코드를 생각해서 html이 삽입됩니다.

② 국제적,공용|| 내부적,제한용 (PUBLIC || SYSTEM)
이 문서가 국제적으로 쓰이는 문서인지. 내부적으로 쓰이는 문서인지를 설정합니다. 내부적일 경우에는 DTD든 최상위엘리먼트든 작성자 마음대로 작성하거나 지정할수 있습니다.

③ ISO공인인증기관|| ISO비공인인증기관 (Inernational Organization for Standardization || not Inernational Organization for Standardization )
본 문서가 어디에서 만든 DTD를 사용하는가에 대한 내용입니다. 공인인증기관일경우 " + " 모양을 비공인인증기관일경우엔 " - ' 를 사용합니다. W3C는 비공인인증기관이므로 " - " 값이 들어갑니다.

④ 기관명(Organization)
DTD를 작성한 기관명입니다.

⑤ DTD TYPE 
DTD가 어떤 타입으로 작성되어있는가에 대한 내용으로 3가지로 분류하게 됩니다.
DTD XHTML (version) Strict => 권장 표준 안
DTD XHTML (version) Transitional => Strict 보단 완화된 표준안
DTD XHTML (version) Frameset => 프레임을 나눌경우 프레임페이지에 사용

⑥ 인코딩언어
xml:lang일때 같이 ISO에서 인증한 언어코드로 문서를 출력합니다.
(모든 html DTD는 영문이기 때문에 EN이 거의 기본화 되어있습니다. / 실제로 DTD는 한글로 작성할수도 있습니다. 물론 선언은 영문으로 해야 하지만요.0

⑦ DTD경로 (DTD URL)
실제로 이 문서를 파싱할(유효한지 하지 않은지 판단) DTD를 지정합니다.

예4)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- 위의 예는 가장 표준이 되는 DTD입니다.
- 확장된 어트리뷰트를 허용하지 않습니다.
- 배경색 , 글자색등의 일정한 조건에 따른 어트리뷰트(bgcolor 라던가 font태그의 color속성)을 인정하지 않습니다.

Strict는 문서에 확장된 속성을 제공하지 않고 제약을 걸어둔다는 뜻인데, 이것은 모바일기기나 장애인을 위한 브라우저등 모든 브라우저에서 사용가능한 최소한의 태그만을 사용한다는 것입니다. 그래서 최소한의 태그만을 유지하고 화면상의 표현을 하기 위해서는 CSS가 더욱더 필요하게 됩니다. CSS는 모든 브라우져 표준이지만 이 CSS를 해석하여 화면상에 표현하는 것은 또 브라우저마다 다릅니다. 하지만, 표준을 사용함으로써 폭넓게 호환성을 지니게 됩니다.

예5)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">

- 일반적으로 가장 많이 쓰이는 DTD입니다.
- 확장된 어트리뷰트를 호환합니다.
- 각 브라우져에 따른 DTD를 호환합니다.
- Strict보다 로딩속도는 느립니다.
- Strict보다 표준안에 가깝지는 않습니다.

Transitional은 현재 일반적으로 가장 많이 쓰이는 제약 사항이고, 여러 가지 내장된 태그를 거의 대부분 사용할 수 있습니다. Transitional로 하면 로딩속도는 저하되지만 그만큼 표현성이나 작업하는데에 따른 태그의 활용성은 넓게 됩니다. Transitional로 코딩된 문서중 일부는 다른 브라우저에서 읽지 못할 수 있습니다.

예6)

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">

- 프레임셋을 만들때 사용하는 DTD입니다.
- 확장 및 프레임에 사용가능한 모든 내용을 포함합니다.
- html 4.01 Frameset.dtd 와 동일합니다.

Frameset은 프레임을 나누고 프레임에 따른 이름 및 설정을 지정하는 태그들을 저장한것입니다. html4.01버젼과 동일한 DTD를 가지고 있습니다.