web sprit

오늘은 ESC(Escape)를 눌렀을때 이벤트를 발행시키기 위해ESC를 눌럿을 때 감지하는 Script를 만들어 봅시다. ESC를 감지하기 위해서는브라우저에서 제공되는KeyCode 또는 which속성을 사용해야 합니다.현재 최신 브라우저에서는 KeyCode 보다는 which 속성을 지원하고 있습니다.그래도 구 브라우저를 위해서 KeyCode도 사옹해 보도록 하죠. 저는 ESC감지를 어디에 사용하려 하냐~레이어 팝업이 떳을때 ESC 버튼을 누르면 닫히게 작업하려 합니다.아래 코드를 보시죠 1234567$(document).keydown(function(e){ var code = e.keyCode || e.which; if (code == 27) { $('.레이어팝업 클래스').hide(); }});cs해석..

반응형 사이트를 작업하면서 생긴 이슈입니다.iframe을 모바일에서 스크롤 안되는 문제가 있었는데특히 사파리(아이폰에서 안된다능....)에서 안된다는 이슈가 있었습니다. 특정 영역 안에 iframe을 넣으면 스크롤이 안될뿐더러 모바일 화면에서 영역을 벗어나 넘치는 현상입니다. 구글신(?)의 힘을 빌려 서치하던 중 여러가지 해결 방법이 있었는데제가 잘못 적용한것도 있을 수 있지만 완벽하진 않았습니다. 그래서 조금 수정해서 올려봅니다.HTML123 Colored by Color Scriptercs SCSS1234567891011.iframe-wrap{ border: 1px solid #d6d6d6; height: 150px; overflow: auto; -webkit-overflow-scrolling: to..

저번 시간에는 구글 드라이브 설치 및 동기화하는 방법에 대해 알아봤습니다.이번시간은 기존에 설정했던 동기화 경로를 변경하는 방법에 대해 알아보려고하는데요. 기존 타 블로그를 검색했을때현제 구글드라이브 환경설정 화면 UI와는 조금 다르더군요.그래서 다시 정리합니다. 경로 변경을 확인하기위해내 노트북 동기화 폴더 2개와 구글드라이브 동기화 폴더 2개를 준비하였습니다. 폴더명 그대로 노트북 동기화, 구글드라이브 동기화를 연결하였습니다.이제 경로를 변경하는 법에 대하여 알아보죠. 1. PC 동기화 경로 변경.매우 쉽습니다.윈도우 화면 우측 하단 트레이 아이콘 화면을 보변 구름 모양이 있습니다.위 이미지의 번호 순으로 클릭하여 환경설정에 들어가 줍니다.PC 동기화 환경설정 화면입니다.기존에 연결되었던 "내 노트북..

구글드라이브 (Backup and Sync from Google)구글드라이브와 PC 파일간의 동기화 방법과 설치 및 삭제에 대하여알아보겠습니다.우선 구글 계정이 있어야 합니다.구글의 회원가입은 검색을 통하여 알아보시면 될것 같습니다.(왠만하면 다 알듯...) 1. 구글 드라이브 백업및 동기화 PC에 설치하기.구글사이트에 접속하여 "구글 드라이브 다운로드" 검색하여 클릭합니다.2. 동기화 폴더 경로 설정하기.설치를 완료하면 다음과같은 화면이 나옵니다. 아래 이미지 순으로 진행해 줍니다.구글 계정을 입력해 줍니다. 2-1. PC >>> 구글드라이브에 백업하기.처음화면은 데스크톱, 문서, 사진 모두 체크 되어 있을겁니다.저는 그 영역을 동기화 하지 않을것이기 때문에 체크를 풀고폴더를 하나 생성하여 폴더선택으로..

자동차 엔진오일 교체 시기가 다가왔습니다.엔진오일 교체한다 한다 하고 이제서야 교체 했네요. 제가 아는 방식으로 조금이나마 저렴하게 교체할 수 있는 방법을 소개해 드리겠습니다.교체를 위해선 3가지가 필요합니다.1. 엔진오일2. 오일필터3. 에어필터 1. 엔진오일 (차의 용량에 따른 갯수 구입)세븐골드 5W30_1L * 42008 SM5 뉴임프레션 기준 4L 구입 2. 오일필터 (1EA) 3. 에어필터 3가지 모두 인터넷으로 구입 했습니다. 여기서 좀더 저렴하게 재료를 준비했습니다. 그럼 재료를 이용해서 엔진오일을 교체해줘야 하는데내가 직접할 수 없으니 교체만 해주는 공임비만 받는 곳을 알아봐야 겠습니다. 대표적으로 "공임나라"를 검색해 봅니다.각 지역마다 해당하는 공임나라 직영점을 찾을 수 있습니다. 우..

가끔 사용하는데 매번 까먹어서 블로그에 정리해 봅니다. background-origin 속성은 배경의 이미지의 위치를 처음에 어디에 설정할 것인지를 정해줍니다. 정식 설명은 무시하고 내가 사용해본 결과 그렇습니다. 속성의 값으로 다음과 같습니다. 속성값 설명 padding-box 기본값 border-box 배경이미지의 시작을 보더선에서 시작 content-box 배경의 시작을 패딩(padding)의 안쪽에서 시작 initial 기본값으로 설정 inherit 부모요소에서 상속받는다. 사용에 대한 화면 확인은 w3schools 에서 확인하면 됩니다.참고 : https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin

브라우저에서 디자인 되어 확인 할 수 있는 화면의기본적인 HTML의 구조는 아래와 같습니다.123456789101112 Document // body태그 안에서 화면에 그려지는 모습을 태그로 작성. cs ## 태그(tag)란 ? 이런 형식으로 되어 있는 것을 태그라 합니다.예) div 태그 span 태그 ## 태그 종류태그의 종류는 블록(block)태그, 인라인(inline)태그로 나뉩니다.예)block 태그 - div, p, ul, li, 등...inline 태그 - span, strong, em, 등.... ## 블록태그와 인라인태그의 차이점블록태그 - 수평의 영역을 다 차지한다.인라인태그 - 감싸고 있는 안의 영역만큼의 영역을 차지한다. 1234567891011121314151617181920212..

스크립트로 pc와 mobile를 구분하여 어떤 환경이냐에 따라 다르게 적용하기위해 검색 중 Navigator을 사용하여 접속환경을 구분할 수 있었다. 다음과 같은 조건문을 적용하여 환경을 구분한다.1234567891011121314151617function device_check() { // 디바이스 종류 설정 var pc_device = "win16|win32|win64|mac|macintel"; // 접속한 디바이스 환경 var this_device = navigator.platform; if ( this_device ) { if ( pc_device.indexOf(navigator.platform.toLowerCase())

a태그로 메일 이나 전화를 걸수 있는 방법만 있는 줄 알았는데이것 말고도 여러 방법이 있습니다. a태그의 href 속성에 다음과 같이 작성하면 됩니다.1234567891011 cs a태그를 제외한 일반태그 적용은 다음과 같습니다.1234567891011 cs

알고 보면 엄청 단순하지만 막상 이론적으로 머리가 안굴러가는 현상.... 정말 단순하지만 정리해 봅니다. 우리가 반응형 사이트를 만들때 em또는 rem 단위로 font size를 작업합니다. em이나 rem 같은 경우는 유동적이라 반응형이나 모바일에 사용하고 있습니다. 간단하게 em과 rem을 설명하자면em은 부모요소에게 영향을rem은 최상단 부모요소(html)에게 영향을 받습니다. em은 부모요소에 12px의 폰트사이즈가 적용되어 있다면1em은 12px 입니다. 그럼 2em은 24px 이고요. ㅎ rem은 부모요소에 12px로 적용하여도 부모요소에 영향을 받는 것이 아니라최상단 부모요소(html)에게 영향을 받기 떄문에html 태그에 16px로 적용되어 있다면1rem은 16px이고 2rem은 32xp ..