CATEGORIES
웹에서 데이터를 저장하는 방법 중 서버가 아닌 클라이언트에서 가능한 방법을 알아보려고 합니다.웹사이트의 정보를 저장하기 위해서 반드시 서버가 필요한 것은 아닙니다. 사용 목적에 따라 클라이언트 저장소 역시 좋은 역할을 할 수 있습니다. 일반적으로 클라이언트 저장소를 생각하면 가장 먼저 쿠기 저장소를 떠올리겠지만 html5에는 좀 더 효과적인 클라이언트 저장 공간을 제공하는데 어떤 것이 있는지 알아보면 다음과 같죠.! localStorage, sessionStorage API 알아보기html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공합니다. 둘 다 저장 공간으로 사용할 수 있는데 이 둘의 가장 큰 차이점이라면 저장소로서의 기능은 대부
Last Modified : 2019-08-06 00:05:00
브라우저의 쿠키(cookie) 데이터저장소를 이용하면 최근에 본 페이지나 키워드등을 저장할 수 있습니다. 온라인쇼핑몰이라면 관심상품으로 등록할 수도 있을테고... 온라인 사전 사이트라면 기존에 검색했던 내용들을 저장할 수 있을 것입니다.# 자바스크립트에서 쿠키(cookie) 사용하는 방법아래는 자바스크립트에 수 많은 이들이 사용하는 쿠기를 저장하고 불러오는 setCookie(), getCookie() 사용자 함수입니다. 아래 코드를 사용해 간단하게 쿠키를 불러오거나 읽어올 수 있습니다. 간단한 cookie 사용법 및 문법은 아래와 같습니다.document.cookie = "쿠키이름=쿠키값"Ex) document. cookie = "test=abcde";이를 함수로 만든 자세한 코드와 사용방법 및 예제는 아
Last Modified : 2021-02-02 15:59:23
자바스크립트와 마찬가지로 클라이언트뿐 아니라 서버측에서 쿠키 설정 및 사용이 가능합니다. 아래는 php에서 쿠키를 사용하기 위해 설정 및 방법에 대하여 자세히 알아보겠습니다.# PHP에서 쿠키(cookie) 사용하는 방법먼저 아래는 쿠키를 설정하기 위해 필요한 설정 및 사용방법입니다. 참고로 클라이언트측과 서버측 모두 쿠키 사용을 설정할 수 있지만 쿠키의 값이 존재(저장)하는 곳은 클라이언트의 브라우저입니다. 즉, 쿠키가 서버와 클라이언트 각각 서로 다른 값들이 저장되는 것이 아니라는 점은 알아두세요. :)아래는 php를 사용하는 간단한 문법입니다. php에서는 setcookie()를 사용하여 쿠키를 사용할 수 있죠. setcookie (쿠키명, 쿠키값, 만료시간, 경로, 도메인, 보안, httponly);
Last Modified : 2020-03-24 11:07:46자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.i. #id를 a 태그 링크로 사용(Anchor 사용방법)ii. focus() 이벤트를 사용하는 방법은iii. scrollIntoView() 메소드를 사용하는 방법은# 자바스크립트 원하는 위치로 스크롤 이동하는 방법만약 아래와 같은 input 태그가 존재하는 경우를 예로 들어보겠습니다.<input type="text" id="nickname" />i. 하이퍼링크에 #id를 사용하기만약 입력폼이 아래와 같이 nickname 이라는 id 속성을 갖는다면 다음과
Last Modified : 2019-08-12 22:18:45
자바스크립트를 사용해 팝업창을 띄우는 방법은 그다지 어렵지 않습니다. window 객체의 open() 메소드를 사용하여 원하는 팝업을 한개 또는 다수 띄울 수 있죠. 하지만 만약 오늘 하루... 24시간 동안 팝업을 띄우지 않을 경우에는 어떻게 해야할까요? 아래는 24시간 동안 팝업을 띄우지 않는 방법에 대하여 알아보고 이를 사용한 예제소스를 함께 확인해보도록 하겠습니다.# 24시간동안만 띄우는 팝업창 구현하기먼저 팝업창을 구현할 경우 팝업창을 '닫기' 또는 '하루만 열기' 등의 다음과 같은 버튼들이 존재합니다. 일반적으로 아래 세가지 버튼이 가장 많이 사용되고있죠.1. 페이지 메인 콘텐츠로 이동하는 링크 주소2. 현재 팝업의 닫기 버튼3. '하루동안 열지 않기' 버튼3번의 '하루동안 열지 않기' 버튼은 매
Last Modified : 2018-10-25 15:58:24
자바스크립트를 사용하여 팝업창을 띄우는 경우 IE 익스플로러에서 스크롤바가 없는 경우 어떻게해야하는지 알아봅니다.# IE 팝업창에 스크롤바가 없는 경우 해결하기자바스크립트를 사용하여 팝업창을 띄우는 경우 아래와 같이 open()을 사용합니다.window.open();이때 다른 브라우저와 달리 IE에서 스크롤바가 안나타날 수 있는데 그 이유는 익스플로러에서는 스크롤바가 필요한 경우 기본값이 아닌 옵션 설정을 필요로하기 때문입니다.그럼 어떻게해야할까요? IE에서 스크롤바를 위해 팝업창을 띄우는 옵션에 아래의 옵션을 추가해야 합니다.scrollbars=yes위 scrollbars의 값 yes대신에 1을 사용하여도 결과는 같습니다. 이를 적용하면 아래와 같이 사용할 수 있을 것입니다.@ 기존window.open(t
Last Modified : 2018-06-17 22:04:36익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요?# IE에서 input 태그 스타일 변경하기 이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다.input::-ms-clear { } 그렇다면 만약 입력폼에서 실제로 어떻게 사용되는지 간단한 예제를 사용해보겠습니다.! IE에 적용하는 input 태그 스타일 예제보기만약 아래와 같이 검색어를 입력받는 폼이 있는 경우 아래와 같이 사용합니다.<span
Last Modified : 2017-12-25 04:12:13
리눅스에서 변경된 파일이나 디렉토리를 찾을 때 날짜나 시간을 기준으로 이 후에 변경된 것들을 찾는 방법에 대하여 알아봅니다. 어떻게 하면 원하는 날짜 이후의 파일이나 디렉토리를 찾을 수 있을까요?! 날짜 기준 파일 찾기는 언제 왜 필요한가?가장 먼저 서버에 문제가 생겼을 경우 어떤 파일을 수정해서 문제가 생겼는지도 확인해야 할 수 있겠습니다. 설정 파일을 수정하거나 아니면 서버의 특정 파일을 수정해서 에러가 발생했을 수도 있기 때문에 문제가 발생한 시점 이 후의 변경사항을 체크해야 하죠.# 리눅스 특정일 기준 변경 및 추가된 파일, 디렉토리 찾는 방법만약 2019-03-14일 이 후에 변경된... 즉 새로 생성되거나 업데이트 된 파일 디렉토리를 찾는다면? 이 경우에 아래와 같이 입력하면 설정된 날짜 이 후에
Last Modified : 2019-08-06 21:59:45동적인 화면을 구성하기 위해서는 브라우저의 크기와 현재값을 알아둘 필요가 있습니다. 현재의 디바이스가 가지는 최대 width 너비의 크기등을 말이죠. 얻을 수 있는 값들 중 크기 순으로 정렬하자면 아래와 같습니다clientHeight > offsetHeight > scrollHeight위 순서대로의 크기를 가집니다. 좀 더 자세하게 알아보도록하겠습니다.1. clientheight이 값은 스크롤바의 공간을 제외한 부분입니다.2. offsetHeight스크롤바가 나타나는 부분까지의 길이입니다.3. scrollHeight는 스크롤이 안 보이는 영역까지의 길이입니다.<script type="text/javascript">document.body.offsetHeight;</script>현재 화면에서 실제로 사용가능한
Last Modified : 2015-11-15 22:58:10로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법은 쿠기 그리고 로컬스토리지입니다. 이때 쿠키(Cookie)와 로컬스토리지(Local Storage)은 둘 다 다른 목적을 가지고 있기 때문에 무엇이 옮다고 하기는 애매한 부분이 있습니다. 각각의 쓰임새에 따라 적합한 방법을 선택해야 합니다. 하지만 그렇게 하기 위해서는 둘의 목적과 장단점, 그리고 명확한 차이를 알고 있어야 할 것 입니다. 아래는 이 둘을 사용할때 각각의 장점과 단점에 대하여 알아보도록 하겠습니다.! Cookie vs LocalStorage우선 쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재합니다. 이와 달리 localStorage는 로컬 환경에서만 컨트롤되죠. 이런 이유로 저장된 쿠키 데이터의 쓰임이 양쪽
Last Modified : 2019-08-12 22:18:31
Adobe Premiere(프리미어)를 사용하여 오디오 녹음 방법... 더빙 방법을 알아보려고 합니다. 시작에 앞서 어떻게하면 녹음이 가능한지 몇 단계로 나누어 살펴보면 알아보면 다음의 과정과 같습니다.1. 오디오 하드웨어 설정하기2. 설정 완료 후 녹음될 음량 크기를 설정3. 사용할 오디오 트랙을 선택4. 녹음 시작5. 녹음 종료 및 녹음된 소리를 확인위와 같이 5단계로 나뉘어집니다. 그럼 하나씩 확인해보겠습니다.# 프리미어에서 녹음하는 방법아래는 각각의 단계를 설명한 세부 내용입니다. 아래의 과정을 수행합니다.1. 오디오 하드웨어 설정하기먼저 오디오 하드웨어가 설정되어야 녹음 버튼이 활성화됩니다. 하드웨어 설정은 상단 메뉴 중 '편집 > 환경설정 > 오디오 하드웨어(H)'에 위치하고 있습니다.클릭하면 '
Last Modified : 2019-01-30 00:19:55
웹사이트에는 다양한 정보를 한께번에 전달하기 위해 수 많은 입력폼이 존재할 수 있다. 예를 들어 회원가입 페이지만 하더라도 개인정보 및 동의 등등 입력해야하는 필드 수만 상당하다. 이런 경우 만약 이 폼들을 그룹화한다면 더욱 편리하게 관리할 수 있을 것이다. 이에 html에는 fieldset이라는 태그가 존재하며 이 태그를 사용할 경우 다수의 입력폼들을 그룹화하여 관리 및 콘트롤할 수 있다. 그럼 아래에서 좀 더 자세한 내용을 확인해보자.! fieldset 태그 알아보기fieldset 태그는 아래와 같은 몇 개의 속성들을 지정하여 사용할 수 있으며 각각의 속성들의 특징은 다음과 같다. 아래처럼 이 태그에 사용가능한 태그는 매우 한정적이다.disabled - 해당하는 그룹을 모두 disable 할 수 있음fo
Last Modified : 2016-07-01 12:23:29
만약 자신의 웹사이트에 유튜브 영상의 코드를 추가하여 보여주려고 한다면 해당 동영상 코드를 iframe 태그에 사용하는 것이 일반적입니다.그런데 만약 태그를 넣었음에도 정상 동작하지 않는 문제가 나타날 경우가 있는데요 나타나는 증상은 아래와 같습니다.! Youtube 영상 태그를 추가할 경우 발생 이슈iframe 태그와 다른 태그가 겹치는 부분에 있어 z-index의 css 속성이 적용되어 있음에도 z-index 값과 상관없이 iframe태그가 무조건 상위에 표시되어(우선되어) 나타나는 문제가 있습니다. 이와 같은 현상은 익스플로러(Internet Explorer, IE)에서 발견되며 다른 브라우저는 이런 현상이 나타나지 않을 수 있는데요 해결방법을 알아봅니다.# 유튜브 영상에서 z-index 정상 동작하지
Last Modified : 2020-12-03 14:23:10
윈도우즈 커맨드 라인 명령어 start에 대하여 알아봅니다.# command start 명령어 알아보기윈도우즈에서 cmd를 누르고 start라는 명령어를 입력하면 또 다른 새로운 창이 나타나게됩니다. start 키워드는 커맨드라인의 예약어로 새로운 창을 띄울 경우 사용합니다.start// 새로운 window 창에 cmd를 실행함이처럼 새로운 창을 띄울 수 있는데 주로 새로운 커맨드라인 창을 띄우고 다른 명령어(command) 또는 배치파일 등을 실행하는 데 사용합니다.이렇게 다른 작업을 하기 위해 새로운 창을 띄워두면 현재 작업과 구분되어 매우 편리합니다.! start 옵션사항 알아보기statt는 아래와 같은 옵션사항을 설정할 수 있습니다.@ 실행 후 바로 종료 할 경우만약 새 창을 띄우고 완료시 창을 닫으
Last Modified : 2020-03-30 09:59:28자바스크립트의 객체(Object)에 사용할 수 있는 entries() 메소드에 대하여 알아봅니다.# 자바스크립트 Object의 entries() 메소드는?자바스크립트은 여러 타입이 있는데요 그 중에 객체 타입은 배열처럼 여러 개의 값을 가지고 있습니다. 만약 객체가 어떤 값들을 가지고 있는지 모두 확인할 수 있을까요?이 경우 Object에 entries()를 사용하면 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환하여 줍니다. 그렇기 때문에 어떤 프로퍼티와 값으로 이루어졌는지 한 눈에 확인할 수 있겠죠.- 모든 프로퍼티와 값을 배열로 반환함프로퍼티뿐 아니라 가지고 있는 값도 모두 배열 형태로 변환하여 반환하게 됩니다. 그럼 간단한 예제를 만들어보고 알아보겠습니다.! Object entr
Last Modified : 2019-08-01 08:15:50인터넷 익스플로러 핵이란?인터넷 익스플로러(이하 익스 또는 IE)의 CSS 핵(CSS hack)이란 브라우저마다 달리 적용되는 스타일을 통일할 수 있도록 익스에만 스타일을 적용할 수 있게 하는 스타일 지정 방법을 의미합니다... 물론 익스 뿐만 아니라 거의 모든 브라우저들에 개별적으로 적용 가능한 핵이 존재합니다... 하지만 익스는 약간 특별하죠...익스가 특별한 이유...최근의 익스플로러의 경우는 그런 것은 아니지만 예전의 버전들... 특히 익스 8(IE 8) 이하에서는 익스에서만 스타일이 지정되지 않거나 다른 속성 명령어를 사용해야 스타일이 적용되는 경우가 많습니다... 그래서 상대적으로 익스 핵이 많이 쓰이는 이유입니다... 또한 다른 브라우저는 업데이트가 간편하고 대부분 자동으로 되는 반면 버젼별로
Last Modified : 2016-04-01 19:44:04IE 구버전(IE 8 이하) 에서는 label 태그가 정상적으로 동작하지 않는다. 그렇기 때문에 라디오 또는 체크박스등에 사용된 input 태그가 정상적으로 동작하지 않는데 이를 수정하기 위해서는 아래와 같은 스크립트를 추가해야한다.아래는 jQuery 제이쿼리를 사용한 방법으로 아래 코드를 IE 구버전에서 추가시키도록 한다.// For support IE 8, label tag$(function() { $("label").on('click', function(){ if ($(this).attr("for") != "") { $(this).siblings('input').removeClass('checked') .end().addClass('checked');
Last Modified : 2016-04-01 18:22:06
포토샵을 사용하여 사진이나 일러스트 작업물에 불투명(또는 반투명) 효과를 구현하고자 합니다. 어떻게 하면 되는지 아래에서 간단하게 알아봅니다.# 포토샵 불투명, 반투명 효과 만들기, gradient아래 예제는 최근 포스팅한 글에 사용한 실제 이미지 작업의 결과입니다. 모바일앱의 스크린샷을 사용하기에는 너무 길어서 어떻게 할까 고민하다가 길이를 줄이면서 동시에 반투명 및 물결 생략 표시를 추가하였습니다.그렇다면 순서대로 어떻게 진행하였는지 하나씩 알아봅니다.하나. 레이어 하나 만들기먼저 원본 이미지에 추가할 새로운 레이어를 하나 만듭니다. 이 레이어에는 그라디언트, 불투명 효과와 물결 생략 이미지를 적용할 계획입니다.둘. 불투명 효과에 필요한 그라디언트 도구를 선택하기이제 포토샵 툴 메뉴에서 Gradient
Last Modified : 2020-12-20 14:10:29textarea를 사용하여 내용을 보여주고 수정할 수는 없도록 하기위해 disabled 속성을 적용하게되면 익스플로러, ie에서 텍스트색상이 적용되지 않습니다. 태그에 브라우저가 가지는 기본 스타일 값이 우선되기 때문인데 단순 css만으로 해결되지 않으므로 다른 방법이 필요합니다.이를 해결하기 위해 가장 간편한 방법은 바로 disabled 속성을 다른 속성으로 변경하는 것입니다.물론 사용자가 작성이 불가능한 다른 속성을 이용해야겠죠. 사용자가 입력가능하게 하면 안되니까요. 그래서 사용할 속성이 readOnly 입니다.readOnly 속성은 사용자 입력이 불가능하면서 텍스트 색은 그대로 보여주게됩니다. 예를들어...<textarea disabled>blah blah ...</textarea>위 코드는 익스플로
Last Modified : 2015-11-04 08:36:37
안녕하세요! 오늘은 사이트 주소... URL 주소에 대해 어떤 방법의 주소를 지정하는 것이 자신의 블로그 또는 웹사이트의 검색순위및 검색엔진최적화(이하 SEO)에 도움이 될지 함께 생각해보고 합니다^^[ 1 ] 자주 사용되는 주소의 형태; 어떤 컨텐츠가 등록되어 가지게 되는 URL의 형태는 아래처럼 4가지로 구분할 수 있습니다.i. http://webisfree.com/?listno=176ii. http://webisfree.com/blog/?titlequery=검색엔진최적화-SEO-성공적인-URL-방법iii. http://webisfree.com/blog/seo-successful-url-ways또는 http://webisfree.com/blog/seo-successful-url-ways.phpiv. ht
Last Modified : 2015-11-06 10:33:06
웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 이동하는 방법은 몇 가지가 존재합니다. 위 방법을 알아보기에 앞서 예전 또는 기존의 방법들을 먼저 알아봅니다.1. 태그에 id를 추가하여 url에 # 기호를 사용하는 방법; 엘리먼트에 id값을 추가한 뒤 url에 #(hash) 기호를 사용하면 해당 위치로 바로 이동이 가능합니다. 다만 부드럽게(smooth) 이동하려면 추가로 css를 사용하여야 합니다.2. 해당 엘리먼트의 스크롤 위치를 구한 후 해당 위치로 이동시키는 방법이 방법은 scrollIntoView() 이 전에 가장 많이 사용된 방법입니다. scro
Last Modified : 2021-08-19 10:31:01embed 태그를 사용하여 유투브(Youtube) 영상을 콘텐츠에 삽입하는 경우 IE 8 에서 정상적으로 동작하지 않을 수 있다. 이 경우 어떻게 해야 정상적으로 IE 8 구버전에서 플레이가 가능한지 알아보고자 한다.먼저 embed 태그가 IE 8 에서 지원하지 않는 것 같다... 이를 해결하기 위해 아래와 같이 해당 태그를 다른 태그로 변경하면서 테스트를 실시하였다. 실시 환경은 Windows 7 IE 8 브라우저이다.1. object 태그2. video 태그3. iframe 태그위와 같이 세 가지 태그를 모두 사용하여 IE 8 에서 테스트한 결과는 다음과 같다.우선 1번과 2번 object와 video 태그는 IE 8 에서 아무것도 나오지 않았다. 마지막으로 iframe으로 변경한 결과? 정상적으로 IE
Last Modified : 2016-04-04 20:18:17css를 사용하여 배경, background에 gradient(그라데이션) 효과를 줄 수 있습니다. gradient는 2개 이상의 색이 서서히 적용되어 있는 상태의 모습을 가지게됩니다. 그럼 아래는 css를 사용한 그라데이션(gradient)효과를 적용하는 방법을 알아보고 이 효과를 사용하여 텍스트 그라디언트 효과를 적용하는 방법입니다.# backround에 gradient 적용하는 방법먼저 background에 linear gradient를 적용하는 방법을 알아봅니다. linear는 한 방향으로 스무스(Smooth)하게 색이 다른색으로 변하며 적용되는 css효과입니다. 이때 CSS에 적용방법은 아래와 같이 사용합니다.background: linear-gradient { 방향, 색상1, 색상2 ...}더 자
Last Modified : 2018-11-23 18:35:40얼마 전 캔버스(canvas)를 사용하여 원을 그리는 방법을 알아보았습니다. 이번에는 원이 아닌 캔버스에 곡선을 그리는 방법에 대하여도 알아보려고 합니다. 어떻게 하면 부드러운 곡선을 그릴 수 있을까요?# 캔버스(canvas)에 원을 그리는 방법canvas 요소에 원을 그리는 방법은 크게 세 가지를 사용할 수 있습니다. 구분해보면...1. arc() // 원을 그리거나 곡선을 그릴 수 있음2. arcTo() // 커브를 그리는 데 사용 가능3. benzierCurveTo() // 베지에 커브를 사용하여 부드럽게 연결arc()는 원을 그리는 방법으로 이미 알아보았죠? 하지만 arc()를 사용할 때 원을 전체를 그리는 것이 아니라 일부까지만 연결한다면? 이 경우 곡선을 그릴 수 있습니다.arc()를
Last Modified : 2020-08-10 23:38:30
사용자에게 권한을 주기위해 서버에서 쿠키 또는 세션값을 지정하여 클라이언트에 부여하게 됩니다. 물론 로그인등의 사용자 인증을 거친 뒤겠죠. 일정 시간이 지나고 쿠키만료에 의한 자동으로 세션을 파괴하여 사용자의 접근을 막기 위한 방법에 대하여 알아보겠습니다. php 언어를 사용한 예제입니다. 우선 간략한 프로세스를 보면 다음과 같을 것입니다.# 쿠키 세션 삭제(파괴) 프로세스1. 접속된 사용자의 쿠키 또는 세션 변수 확인2. 설정된 쿠키 시간의 만료 여부를 체크3. 쿠키 만료시 로그아웃 프로세스를 실행4. 3번에 위해 세션, 쿠키 모두 삭제됨# 쿠키 만료, 세션 파괴 예제소스 보기if (!isset($_COOKIE['name'])) { unset($_SESSION['name']); }위 코드는 설정된 쿠키
Last Modified : 2021-02-02 11:24:02
VueJS의 입력폼엔 사용되는 v-model에는 modifier(수식어)가 사용될 수 있습니다. 사용 가능한 수식어는 아래와 같습니다.v-model.lazyv-model.numberv-model.trim위 수식어를 v-model 프로퍼티와 함께 사용하면 좀 더 편리한 기능을 간단하게 제공합니다. 그럼 위 수식어 들을 하나씩 알아봅니다.! v-model.lazy입력된 값이 바로 data에 반영되지 않고 엔터를 누르거나 포커스가 벗어나는 등의 이벤트가 발생할 경우에만 값이 반영되어 나타납니다. lazy는 debounce와는 다르니 참고하세요.! v-model.number 알아보기input 폼을 사용하여 입력값을 받는 경우 숫자 또는 문자 무엇을 입력해도 타입이 문자로 나타나게됩니다. 이 경우 타입을 number
Last Modified : 2019-01-22 10:56:58
div 태그에 height가 100% 적용된 경우 안에 있는 요소의 margin-bottom이 반영이 안되는 문제가 IE(익스플로러)에서만 발생하였습니다. 이 문제를 해결할 수 있는 방법이 무엇이 있는지 알아봤으며 그 방법에 대한 내용입니다.# div태그에 padding-bottom 속성 추가- 해결안됨; 내부 태그에 margin-bottom을 빼고 div에 padding-bottom을 추가하였습니다. 하지만 똑같이 height: 100%에 적용되지 않았습니다.# 내부 태그에 : 또는 :: 선택자를 사용해 margin과 동일한 크기의 여백을 만드는 방법- 해결안됨; 이 역시 height: 100%에 적용되지 않았습니다.해결 가능할 것으로 예상되었던 위 2가지 방법이 모두 적용되지 않았습니다. 검색해 보니 특
Last Modified : 2016-01-21 00:43:44우리는 쿠키에 대하여 잘 알고있다. 일반적으로 쿠키(cookie)라 함은 저장소의 한 형태로 필요한 몇가지 정보들을 정해진 유효기간까지 사용할 수 있도록 해주는 아주 편리한 기능이다. 이 쿠키에 대하여 혼동되는 부분이 하나 있는데 바로 서버측이나 아니면 클라이언트측이냐 하는 것이다...이런 문제는 서버측 언어와 클라이언트 언어 둘 다 쿠키 사용과 관련된 API를 가지고 있기 때문이다. 그렇기 때문에 우리는 쿠키선언을 어디에서 해야할 지 혼동할 수 있다. 게다가 둘 다 해야하는지 아니면 한 쪽만 해야하는지 혼동할 수 있는 부분이 충분하다.!! 쿠키는 클라이언트에 저장된다.한가지 매우 확실한 사실이 있다면 그것은 바로 쿠키의 저장 위치이다. 쿠키는 항상 클라이언트측에 저장된다는 사실이다. 결국 용어에 따른 혼동
Last Modified : 2017-09-21 00:09:29입력 양식에서 동일한 그룹의 태그를 묶는 태그로 legend 태그와 fieldset 태그가 존재합니다. 이 둘의 차이점이라면 fieldset은 기능적인 측면에서 동일 그룹을 컨트롤할 수 있다는 부분이라면.... legend 태그는 시각적으로 어떤 그룹인지 나타낼 수 있습니다.<legend></legend>legend 태그를 입력양식의 상단에 입력해 주면 상단 좌측에 테두리에 텍스트가 표현됩니다. 실제로 보는게 이해가 빠르니 아래 소스코드와 실제 모습을 참고해주세요.Personal Infomation.Name : Phone : 방문자에게 직관적으로 보여줄 수 있다는 장점이 있습니다. 소스코드는 아래와 같습니다.# fieldset 그리고 legend 태그 예제보기위 코드의 소스는 아래와 같습니다.<fieldse
Last Modified : 2015-09-24 14:40:04
VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.# Vue에서 sync 수식어를 사용하여 컴포넌트 데이터 전달먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해 부모에서 자식으로 또는 자식에서 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.! sync 양방향 바인딩과 다른 방법의 차이점은?부모와 자식 사이의 데이터를 전달하는 방법은 여러가지가 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 값을 변경하기 위해 sitename 이름의 props에 추가로 updateSitename 이벤트를 props로 전달하는 방법도 있습니다. 여러
Last Modified : 2022-02-04 16:29:34ul li 태그를 사용하다보면 익스플로러 8(이하 IE 8)에서 아래와 같은 문제가 나타나게 됩니다. 아래의 이미지를 봐주세요. 보시면 최신 브라우저에서는 이상없이 A와 같이 나오는데요 익스플로러 8 이하에서는 B처럼 레이아웃이 깨지는 현상이 발생합니다... 이럴때 어떻게 해결할 수 있는지 알아보겠습니다.ie 8 li 태그에 레이아웃 이슈 발생! 해결 가능한 방법첫번째... 먼저 왼쪽의 상자 무늬를 지워야겠죠. li태그의 display 속성이 inline-block 또는 block인경우 자동으로 list-style-type이 none으로 되지만 IE 8의 경우는 따로 속성 값을 지정해 주어야합니다.두번째... 위의 A의 코드는 display 속성값으로 inline-block을 가지고 있습니다. 하지만 IE
Last Modified : 2015-11-15 13:13:00HTML5를 사용하여 드래그앤 드랍을 사용한 UI를 구현할 경우 모든 브라우저(크롬, 파이어폭스 등등)에서는 잘 동작하지만 IE에서 동작안하는 경우가 있어 알아보았습니다. 이때 IE(Internet Explorer)에서 나타날 수 있는 문제와 해결방법을 알아봅니다.# IE에서 나타날 수 있는 문제먼저 event객체의dataTransfer를 사용하는 경우 setData() 메소드에서 에러가 나타날 수 있습니다. 다른 브라우저는 안나타나지만 말이죠. 해당하는 이슈를 알아보면...function ondragstart() { event.dataTransfer.setData(format, data);}위와 같이 ondragstart()라는 함수가 있는경우 setData() 메소드 수행시 에러가 발생합니다. 이때 I
Last Modified : 2018-04-06 04:13:33웹페이지를 완료 후 마무리로 크로스 브라우징을 위해 익스플로러를 확인해보니 IE 8에서 수평 스크롤이 안 보이게 하는 overflow가 적용되지 않더군요...다른 브라우저들은 모두 문제 없이 잘 적용되었는데 말이죠.그래서 생각한 부분이 prefix나 핵을 사용하는 방법이었습니다. IE 8에서 overflow 값을 적용하기 위해 아래처럼 코드를 추가해봤습니다.-ms-overflow-x: hidden;*overflow-x: hidden;하지만 역시나 동작하지 않더군요.. 결국 핵, -ms- 사용만으로는 동작하지 않았습니다.! IE 8 해결 방법결국 해결한 방법은 position 속성을 추가하는 방법입니다. position의 기본값인 static을 relatvie로 변경 후 사용하면 잘 적용됩니다.positio
Last Modified : 2019-08-21 11:39:31meta태그의 viewport에 사용되는 속성 중 shrink-to-fit에 대하여 알아봅니다. 반응형웹 구현에 필요한 viewport 설정시 추가되는 속성으로 아래처럼 사용됩니다.<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">! Apple Developer 페이지의 Safari 9.0 업데이트 내용ttps://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW36내용을 보면 아이폰의 모바일 환경에서 웹페이지
Last Modified : None
자바스크립트를 사용할 경우 로컬 저장소로 localStorage, sessionStorage 그리고 쿠키(cookie)를 생각할 수 있습니다. 오늘은 쿠키를 더 쉽고 간단하게 사용할 수 있는 자바스크립트 코드와 이를 사용하여 간단하게 쿠키 사용 예제를 알아보겠습니다. 먼저 Cookie는 언제 왜 사용할까요?# Cookie 쿠키를 사용하는 이유는?HTML5 이후 많은 분들이 여러 저장소가 사용되지만 기존에 사용되던 Cookie도 많이 사용됩니다. 특히 저장할 데이터의 크기가 작고 간단하면서도 만료가 필요한 경우(시간이 지나면 폐기)가 더욱 그렇습니다. 쉽게 사용할 수 있고 만료될 시간을 적용하기가 매우 간단하기 때문이죠.! 더 쉽게 사용하기 위한 스크립트 작성하기, CookieTimer아래의 CookieTim
Last Modified : 2020-05-31 06:41:40웹퍼블리셔를 구인, 구직하는 과정에서 필요한 스킬과 스펙은 어떤 것들이 있을지 알아보고자 합니다.먼저 간단하게 웹퍼블리셔가 하는 일을 알아보면 퍼블리셔(Web publisher)는 웹사이트의 앞단, Front 영역을 맞아 개발하는 직군으로 UI개발자라고도 불립니다. 코더 및 개발자와는 다르게 분류되는데 일반적으로 개발자라고 단순하게 부르면 Back단, 서버 쪽 개발직군을 의미하지만 퍼블리셔는 사용자에게 가장 근접한 앞단을 개발하게됩니다.이런 이유로 사용자 인터페이스, 기획 및 시나리오, 웹디자인과 친숙한 경우 상대적으로 이점이 많아 웹기획자 또는 웹디자이너에서 퍼블리셔로 이동하는 사례 역시 많습니다.# 웹퍼블리셔의 기술적인 요건웹퍼블리셔의 Key는 얼마나 디자인 된 시안을 동일하게 구현하느냐입니다. 하지만
Last Modified : 2017-09-21 00:16:23
동영상 편집의 인기툴 Adobe Premiere의 단축키 정보입니다. 어떤 단축키가 있고 어떻게 사용하는지 알아보세요.# Adobe Premiere 단축키 모음각각의 기능별로 분류하여 정리한 내용입니다.@ 파일 및 프로젝트 관련새로운 시퀀스 만들기 - Ctrl + N프로젝트 열기 - Ctrl + O저장하기 - Ctrl + S닫기 - Ctrl + W가져오기 - Ctrl + I찾기 - Ctrl + F그룹 설정 - Ctrl + G그룹 해제 - Ctrl + Shift + G스냅 - S확대 - +축소 - -재생하기(미리보기) - Space현재 클립 재생하기(미리보기) - Shift + K셔플, 재생하며 이동(왼쪽 방향) - J셔플 정지 - K셔플, 재생하며 이동(오른쪽 방향) - L트랙 이전 편집으로 이동하기 - S
Last Modified : 2019-01-30 00:20:06시맨틱(Semantic)이란 ’의미있는’이란 사전적 의미를 가지고 있습니다. 결국 의미가 있는 요소를 시맨틱 요소라고 할 수 있는데요... 기존의 시맨틱 요소는 아래를 보시면...<form><input><textarea>이와 같이 어떤 기능을 가지고 있는데 의미를 알 수 있는 요소를 말합니다. 이와 달리 div나 span 요소들은 그 의미를 알 수가 없죠... 결국 시맨틱 요소가 많아지는 것은 좀 더 의미가 담긴... 이해하기 쉬운 웹 페이지 빌드가 가능하다는 뜻입니다... HTML5에서는 아래와 같은 새로운 시맨틱 요소를 제공합니다.<header><nav><section><article><aside><footer><time><mark><summary><figure><figcapture><abbr><var>
Last Modified : 2020-03-19 15:54:43ie 8(익스플로러 8) 이하에서 색상(칼라)이 적용이 안되는 문제가 발생해 이유를 알아봤더니 칼라를 지정하는 속성 값 때문이더군요. 배경 또는 폰트 색상을 지정하기 위해 보통 아래의 방법을 사용합니다. 그런데 4번째 방법인 rgba값은 IE8 이하에서 적용이 안되기때문에 다른 방법을 사용해야 합니다. 아래 예제를 참고하세요. Example <style>color: #fff; 또는 #ffffff; // 가장 많이 쓰이는 방법으로 순서대로 레드, 그린, 블루 color: white; 또는 red; // 문자대로 색상을 인식color: rgb(260, 260, 260); // 1부터 260까지 지정가능color: rgba(260, 260, 260, 1); // 위와 같으나 1은 투명도를 의미함. 투명도는 0부터
Last Modified : 2015-11-15 12:43:12
자바스크립트 배열 타입에 사용하는 entries() 메소드에 대하여 알아봅니다.# 자바스크립트 entries() 메소드 알아보기배열에 사용 가능한 다양한 메소드 들이 존재하죠. 그 중에 entries()에 대하여 알아보려고 합니다.참고로 객체에도 entries()가 존재합니다. 객체의 entries()는 배열과 비슷하게 모든 프로퍼티를 key, value로 반환하죠. 함께 알아두시면 좋습니다. 아래 링크를 참고하세요.https://webisfree.com/2019-06-18/자바스크립트-object-메소드-entries()-알아보기! entries()는?배열에 사용하는 반복자(interator)로 실행하면 반복자 객체를 반환합니다. 이 반복자 객체를 사용하여 내부의 값들을 돌면서 키(key)와 밸류(valu
Last Modified : 2020-06-15 20:53:41몇일 전... 예전에 꼭 보고 싶었던 영화를 다시 볼 수 있는 기회가 생겼습니다. 바로 메트릭스(Matrix)입니다 !!영화 메트릭스는 키아누 리브스가 나오는 대표적인 영화라고 할 수 있습니다. 1편의 흥행과 함께 2편 그리고 3편까지 속편이 나왔으며 성공적인 흥행을 이루었습니다. 이 영화에 대하여 잠시 얘기해볼까요?! 메트릭스... 미래에 현실이 될 지 모르는 기계가 인류를 지배하는 세상!영화 메트릭스는 미래의 시점을 얘기합니다. 미래에는 어떤 세상의 모습일지 누구나 궁금해합니다. 메트릭스는 컴퓨터의 발달과 인공지능이 놀라울 정도로 발달한 기계로부터 지배를 받는 인간세상을 그리고 있습니다. 이 이야기가 현실과 크게 동떨어졌다고 생각할 수도 있으나 사실 충분히 있을 법한 이야기이므로 영화를 보는 관중들의 마
Last Modified : 2016-03-07 11:07:50
웹브라우저를 사용하는 경우 쿠키 사이즈 관련 에러(Cookie size large)가 발생할 수 있습니다. 이 경우 어떻게 해결할 수 있는지 알아봅니다.# 쿠키 사이즈 에러 해결하기브라우저의 쿠키 에러는 브라우저 창에 에러 메시지로 확인이 가능합니다. 보시는 것처럼 400 에러가 발생하고 나타나는 메시지는 '페이지가 작동하지 않습니다.'입니다. 그렇다면 언제 그리고 왜 이런 에러가 발생할까요? 바로 쿠키 사이즈가 너무 큰 경우가 여기에 해당합니다.사용자의 쿠키(Cookie) 정보는 브라우저에 저장되며 웹사이트에 요청 보낼 경우 헤더에 담겨 전송됩니다. 이때 제한된 크기를 가지고 있는데 결국 통신에 사용된 Header의 크기... 즉 포함된 Cookie 사이즈가 너무 커서 발생하게 됩니다. (전송 가능한 co
Last Modified : 2021-01-26 19:31:07angularjs에서 이미지 crop의 ngImgCropFullExtended에서 아래와 같은 에러가 발생한다면...ColorThief is not defined이때 해결방법으로 아래처럼 require를 선언한 부분에 코드를 수정합니다.imgCrop = require('ng-img-crop-full-extended'); // 변경 전// 아래와 같이 변경imgCrop = require('imports?this=>window,exports=>false,define=>false!ng-img-crop-full-extended'); // 변경 후제 경우 수정되어 정상 동작하였습니다.위 구문을 적용하려면 imports-loader가 있어야 합니다. 먼저 npm에 인스톨해주세요.npm install imports
Last Modified : 2017-08-11 01:42:49
자바스크립트에서 숫자를 더하거나 빼는 연산을 수행할 경우 엔진에서 binary64로 변환하는 과정을 거치게 됩니다. 이 방법은 다른 언어에서도 많이 사용되며 IEEE754를 기반으로 숫자를 표현하고 연산하기 때문이죠.그렇다면 자바스크립트에서 binary number(이진법 숫자)를 얻기 위한 방법은 무엇일까요? 아래에서 알아봅니다.! binary number는?binary(2진법, 바이너리)는 decimal(10진법)과 다르게 on / off(0 또는 1)처럼 표기되어 사용됩니다. 예를들어 아래의 숫자는 다음과 같이 binary로 변경될 수 있습니다.==============|| decimal | binary ||--------------------------0 | 01 | 12 | 105 | 10110
Last Modified : 2021-07-12 13:22:52
너무나 오랜 기간 웹브라우저로서 명맥을 이어오던 Microsoft의 Internet Explorer(인터넷익스플로러, IE)가 곧 서비스를 중단할 것으로 알려졌습니다. IE를 지원하던 MicroSoft의 다양한 소프트웨어에서 더 이상 지원" target="_blank">하지 않을 것을 알렸기 때문이죠. 아마도 내년 초 안에 서비스가 종료될 것으로 예상되고 있습니다.Internet Explorer 서비스 종료하나...Internet Explorer의 종료는 어느 정도 예견된 행보입니다. 새로운 Edge 브라우저가 결국 구글의 크로니움 기반으로 전환되면서 사실상 엣지에 집중하고 IE는 서서히 지원이 중단되면서 서비스 종료로 이어질 가능성이 높았지요.웹 플랫폼의 발전과 함께한 Internet Explorer돌아보
Last Modified : 2020-08-20 18:29:17
얼마 전 올린 포스팅은 드럼 세탁기의 소음, 진동을 줄이기 위해서 수평을 맞추는 방법을 알아보았는데요 ~ 그 때 사용한 앱이 바로 GPS Status입니다. 아래는 이 앱에 대하여 간략하게 알아보려고 합니다.# 앱을 사용하여 나침반 및 수평 맞추기, GPS Status이 앱은 매우 잘 알려진 앱으로 핸드폰만 있으면 동서남북, 나침반 기능 이 외에도 여러가지 정보를 제공하는 앱입니다. 특히 스마트폰에 있는 자이로스코프 센서를 사용하여 수평을 맞출 수도 있죠. 어떤 기능이 있는지 알아보면 아래와 같습니다.동서남북 나침반 기능GPS 위치 정보상하/좌우 기울기 정보자기장/자편각가속도이동속도(km/h)고도(m) 평균해수면고도위도 및 경도배터리 잔량 및 화면 밝기 정도보시는 것처럼 정말 많은 정보를 제공하는 앱입니다.
Last Modified : 2020-11-16 22:49:43