직접 Cookie 의 httpOnly 와 secure 속성을 만들어가면서 어떤 차이점이 있는지 알아보았다. 소개 httpOnly - JavaScript 로 쿠키에 접근할 수 없으며, 브라우저의 통신이 일어날 때만 쿠키를 전달 secure - HTTPS 가 아닌 다른 프로토콜을 통해 쿠키를 전달하는 것을 방지 테스트 "teams_test" 라는 이름으로 httpOnly 와 secure 속성을 가진 쿠키를 사용했을 때와 안했을 때를 관찰하고, 그 차이점을 알아보는 것이 목적이다. SSL 인증서를 사용할 수 있는 환경에서 진행했으며, "test" Endpoint (일반 사용자 호스트) → "hack" Endpoint (공격자 호스트) 로 호출하면서 서로 다른 호스트라고 가정하고 실제로는 같은 호스트에서 진행하..

Clearfix 는 CSS에서 부모 요소가 자식 요소의 float로 인해 제대로 높이를 계산하지 못하는 문제를 해결하기 위해 사용되는 기법이다. float 속성을 설정한 요소가 있을 때, 부모 요소는 해당 자식의 요소의 높이를 인식하지 못하게 되는 경우가 있는데 이를 해결하기 위해 사용된다. 이유CSS에서 float 속성을 사용하면 문서에서 떠있는 상태가 된다. 즉, 부모 요소는 자식 요소의 float 상태를 무시하면서 자식 요소가 차지하는 높이를 계산하지 않게 된다. 내용 내용예를 들면, 위 HTML에서 .container 는 자식 요소들의 float 를 인식하지 못하므로 높이가 0이 된다. 따라서 .container 의 배경색이나 테두리 등이 제대로 표시되지 않을 수 있다. 해결방법은 굉장..

소개오픈 그래프(Open Graph) 메타 태그는 웹 페이지의 콘텐츠를 소셜 미디어나 메신저에서 공유할 때 어떻게 표시될지를 제어하기 위해 사용되는 HTML 태그이다. 원래 페이스북에서 개발한 프로토콜이지만, 현재 다양한 플랫폼에서 이를 지원한다. 이 태그를 통해 웹 페이지의 제목, 설명, 이미지, URL 등을 명확하게 지정함으로써 각 플랫폼에서 오픈 그래프 정보를 읽어 사용자가 콘텐츠를 공유할 때 깔끔한 정보로 보여줄 수 있게 해준다. 카카오톡이나 SNS 등에서 특정 링크를 붙여놓으면 알아서 만들어주는 기능을 볼 수 있을텐데 그 역할을 하는 것이 이것이다. 오픈 그래프 메타 태그는 태그로 작성하고, 주로 태그 안에 포함된다. 예를 들면 아래와 같이 작성할 수 있다.주요 태그og:title - 공유 ..

window는 viewport 라고 생각하면 되고, document 는 말 그대로 해당 문서의 사이즈 window의 height, scrollTop, document의 height 등을 간만에 찾게 되면서 헷갈려서 작성 ※출처: http://www.wisdomjobs.com/e-university/j-query-tutorial-524/dimensions-2458/finding-the-dimensions-of-the-window-and-document-14762.html

jQuery 를 사용하면서 each 메소드를 사용하는 경우가 있는데 일반적으로 쓰이는 break 나 continue 같은 키워드를 사용해야할 때가 있다. 보통 알고 있는 방식으로 break 와 continue 를 쓰면 오류가 나면서 동작이 되지 않고, 그렇다고 그냥 return 을 쓰면 안 된다. 결론적으로 return true; 를 하면 continue 이고, return false; 를 하면 break 의 역할을 하게 된다. jQuery 레퍼런스의 jQuery.each() 페이지(http://api.jquery.com/jquery.each/)를 보면 알겠지만 다음과 같은 문장이 있다. We can break the $.each() loop at a particular iteration by makin..