로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법은 쿠기 그리고 로컬스토리지입니다. 이때 쿠키(Cookie)와 로컬스토리지(Local Storage)은 둘 다 다른 목적을 가지고 있기 때문에 무엇이 옮다고 하기는 애매한 부분이 있습니다. 각각의 쓰임새에 따라 적합한 방법을 선택해야 합니다. 하지만 그렇게 하기 위해서는 둘의 목적과 장단점, 그리고 명확한 차이를 알고 있어야 할 것 입니다. 아래는 이 둘을 사용할때 각각의 장점과 단점에 대하여 알아보도록 하겠습니다.! Cookie vs LocalStorage우선 쿠키는 서버측과 클라이언트측 양쪽에서 쿠...
만약 자신의 웹사이트에 유튜브 영상의 코드를 추가하여 보여주려고 한다면 해당 동영상 코드를 iframe 태그에 사용하는 것이 일반적입니다.그런데 만약 태그를 넣었음에도 정상 동작하지 않는 문제가 나타날 경우가 있는데요 나타나는 증상은 아래와 같습니다.! Youtube 영상 태그를 추가할 경우 발생 이슈iframe 태그와 다른 태그가 겹치는 부분에 있어 z-index의 css 속성이 적용되어 있음에도 z-index 값과 상관없이 iframe태그가 무조건 상위에 표시되어(우선되어) 나타나는 문제가 있습니다. 이와 같은 현상은 익스플로러(Internet Explorer, ...
사용자에게 권한을 주기위해 서버에서 쿠키 또는 세션값을 지정하여 클라이언트에 부여하게 됩니다. 물론 로그인등의 사용자 인증을 거친 뒤겠죠. 일정 시간이 지나고 쿠키만료에 의한 자동으로 세션을 파괴하여 사용자의 접근을 막기 위한 방법에 대하여 알아보겠습니다. php 언어를 사용한 예제입니다. 우선 간략한 프로세스를 보면 다음과 같을 것입니다.# 쿠키 세션 삭제(파괴) 프로세스1. 접속된 사용자의 쿠키 또는 세션 변수 확인2. 설정된 쿠키 시간의 만료 여부를 체크3. 쿠키 만료시 로그아웃 프로세스를 실행4. 3번에 위해 세션, 쿠키 모두 삭제됨# 쿠키 ...
textarea를 사용하여 내용을 보여주고 수정할 수는 없도록 하기위해 disabled 속성을 적용하게되면 익스플로러, ie에서 텍스트색상이 적용되지 않습니다. 태그에 브라우저가 가지는 기본 스타일 값이 우선되기 때문인데 단순 css만으로 해결되지 않으므로 다른 방법이 필요합니다.이를 해결하기 위해 가장 간편한 방법은 바로 disabled 속성을 다른 속성으로 변경하는 것입니다.물론 사용자가 작성이 불가능한 다른 속성을 이용해야겠죠. 사용자가 입력가능하게 하면 안되니까요. 그래서 사용할 속성이 readOnly 입니다.readOnly 속성은 사용자 입력이 불가능하면서 ...
입력 양식에서 동일한 그룹의 태그를 묶는 태그로 legend 태그와 fieldset 태그가 존재합니다. 이 둘의 차이점이라면 fieldset은 기능적인 측면에서 동일 그룹을 컨트롤할 수 있다는 부분이라면.... legend 태그는 시각적으로 어떤 그룹인지 나타낼 수 있습니다.<legend></legend>legend 태그를 입력양식의 상단에 입력해 주면 상단 좌측에 테두리에 텍스트가 표현됩니다. 실제로 보는게 이해가 빠르니 아래 소스코드와 실제 모습을 참고해주세요.Personal Infomation.Name : Phone : 방문자에게 직관적으로...
익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요?# IE에서 input 태그 스타일 변경하기 이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다.input::-ms-clear { } 그렇다면 만약 입력폼에서 실제로 어떻게 사용되는지 간단한 예제를 사용해보...
자바스크립트와 마찬가지로 클라이언트뿐 아니라 서버측에서 쿠키 설정 및 사용이 가능합니다. 아래는 php에서 쿠키를 사용하기 위해 설정 및 방법에 대하여 자세히 알아보겠습니다.# PHP에서 쿠키(cookie) 사용하는 방법먼저 아래는 쿠키를 설정하기 위해 필요한 설정 및 사용방법입니다. 참고로 클라이언트측과 서버측 모두 쿠키 사용을 설정할 수 있지만 쿠키의 값이 존재(저장)하는 곳은 클라이언트의 브라우저입니다. 즉, 쿠키가 서버와 클라이언트 각각 서로 다른 값들이 저장되는 것이 아니라는 점은 알아두세요. :)아래는 php를 사용하는 간단한 문법입니다. php에...
브라우저의 쿠키(cookie) 데이터저장소를 이용하면 최근에 본 페이지나 키워드등을 저장할 수 있습니다. 온라인쇼핑몰이라면 관심상품으로 등록할 수도 있을테고... 온라인 사전 사이트라면 기존에 검색했던 내용들을 저장할 수 있을 것입니다.# 자바스크립트에서 쿠키(cookie) 사용하는 방법아래는 자바스크립트에 수 많은 이들이 사용하는 쿠기를 저장하고 불러오는 setCookie(), getCookie() 사용자 함수입니다. 아래 코드를 사용해 간단하게 쿠키를 불러오거나 읽어올 수 있습니다. 간단한 cookie 사용법 및 문법은 아래와 같습니다.document....
웹페이지를 완료 후 마무리로 크로스 브라우징을 위해 익스플로러를 확인해보니 IE 8에서 수평 스크롤이 안 보이게 하는 overflow가 적용되지 않더군요...다른 브라우저들은 모두 문제 없이 잘 적용되었는데 말이죠.그래서 생각한 부분이 prefix나 핵을 사용하는 방법이었습니다. IE 8에서 overflow 값을 적용하기 위해 아래처럼 코드를 추가해봤습니다.-ms-overflow-x: hidden;*overflow-x: hidden;하지만 역시나 동작하지 않더군요.. 결국 핵, -ms- 사용만으로는 동작하지 않았습니다.! IE 8 해결 방법결국 ...
ul li 태그를 사용하다보면 익스플로러 8(이하 IE 8)에서 아래와 같은 문제가 나타나게 됩니다. 아래의 이미지를 봐주세요. 보시면 최신 브라우저에서는 이상없이 A와 같이 나오는데요 익스플로러 8 이하에서는 B처럼 레이아웃이 깨지는 현상이 발생합니다... 이럴때 어떻게 해결할 수 있는지 알아보겠습니다.ie 8 li 태그에 레이아웃 이슈 발생! 해결 가능한 방법첫번째... 먼저 왼쪽의 상자 무늬를 지워야겠죠. li태그의 display 속성이 inline-block 또는 block인경우 자동으로 list-style-type이 none으로 되지만 IE 8의 경우는 따로...