반응형

개발자 공부 업무 정보 40

형제 요소들 찾기, siblings

siblings() 함수는 DOM 트리 상의 형제 요소들을 찾아 새로운 jQuery 객체를 만들어 줍니다. 이 함수에는 $() 함수에 사용할 수 있는 모든 선택자 표현이 올 수 있습니다. 만일 그 선택자가 주어졌고 그 선택자에 의해 선택될 수 있는 바로 다음 요소들이 있다면 jQuery 객체가 반환되고 그렇지 않다면 제외됩니다. 예를 보시죠. list item 1 list item 2 list item 3 list item 4 list item 5 item 3의 형제 요소들을 찾아볼까요. $('li.third-item').siblings().css('background-color', 'red'); 스크립트의 결과는 items 1, 2, 4, 그리고 5 의 배경색이 바뀌게 됩니다. 선택자 표현을 포함하지 ..

레이어창을 브라우저 화면 가운데 띄우기

function fnOpenChapter() {02.var obj = $('#chapter_select');03.var iHeight = (document.body.clientHeight / 2) - obj.height() / 2 + document.body.scrollTop;04.var iWidth = (document.body.clientWidth / 2) - obj.width() / 2 + document.body.scrollLeft;05. 06.obj.css({07.position: 'absolute'08., display:'block'09., top: iHeight10., left: iWidth11.});12.} 팝업등 추가로 열리는 창을 반응형으로 항상 가운데 고정시켜줍니다.

css 화면 크기에 맞춘 변경 (모바일 환경 , 테블릿 환경 등)

CSS3 미디어 쿼리 (media queries) 먼저 보는 기본 예시 @media only screen and (max-width: 68.75em) { /\* 1100 \*/ } @media only screen and (max-width: 62.5em) { /\* 1000 \*/ } @media only screen and (max-width: 47.5em) { /\* 760 \*/ } 역사 간단한 형태의 미디어 쿼리는 CSS2에서 부터 사용되었습니다. 예제1: 예제2: @media screen { * { font-family: sans-serif } } 즉, ‘screen’이나 ‘print’ 처럼 ‘미디어 타입 (media types)’ 에 따라서 특화된 스타일을 사용할 수 있었습니다. 그밖에 제안..

[SSL]HTTPS통신을 위한 SSL인증서 발급하기(OpenSSL)

​ 먼저 HTTPS통신을 구현 하기 하기전,SSL 이란?Secure Socket Layer의 약자로 SSL 프로토콜은 간단하게 웹서버와 브라우저 사이의 보안을 위해 만들어졌다.​간단하게 요약하자면 대칭키를 이용하여 암호화 통신을 한다! HTTP에 SSL 적용을 하여 Https 통신을 하게된다!이러한 암호화 통신을 하기 위해선 SSL 인증서가 필요하다. ​SSL 인증서란 해당 웹 사이트가 해킹에 신뢰있는 사이트인지, 안전한 통신을하는 사이트인지를 구분하기 위해누군가가 이 사이트가 신뢰가 있는 사이트라고 인증을 해주기 위한 인증서이다. 인증서에는 인증서 소유자의 email, 소유자 이름, 인증서 용도, 인증서 유효기간, 발행기관, public key 등이포함되어 있다.​인증서에 서명한 사람을 신뢰한다면, 서..

js 숫자타입 올림 반올림 , 소수점

자바스크립트를 활용하여 숫자타입의 값을 버리거나 올리기(버림 또는 올림) 등등 다양한 방법으로 처리하는 방법에 대하여 알아보려합니다. 어떻게하면 숫자 타입 데이터를 간단하게 처리할 수 있을까요?# 자바스크립트 숫자 타입의 값 버림, 올림 등 다양한 방법다른 언어들 처럼 숫자를 쉽게 변환할 수 있는 편리한 함수가 자바스크립트에서 존재하며 이때는 Math 객체를 사용합니다. 아래는 Math 객체를 사용하는 간단한 모습입니다. Math.floor(변환할 값) Math 객체는 값을 처리하는 다양한 메소드(함수)들이 존재합니다. 이때 어떻게 사용하는지 간단한 예제와 방법들을 아래에서 확인하시기 바랍니다. 먼저 가장 간단한 소수점을 처리하는 방법에 대하여 알아보겠습니다.# 숫자 변환의 다양한 예제보기아래는 각각 올..

javascript 문자열 비교 ( 포함 )

var lastindexs = window.location.href.split("/"); // 호출했을 때 현재 주소를 / 로 나눈 배열 var last = lastindexs[lastindexs.length-1]; // 상단 배열의 가장 나중부분 *************************************** 현 주소창의 가장 뒷부분을 찾아 login라는 문자열이 들어갔는지 확인해야했다. 당연한듯 contains를 썼다. if(last.contains("login")){ pc페이지에서 테스트했을 때 잘됐다 따로 찾아보지않고 했는대 잘되어서 진행했었다 문제는 모바일이었다. 모바일에서 전혀 진행이 안되었다 확인해보니 script에는 contains를 쓰지않는다. pc는 어떻게 된걸까 크롬에서 처리를..

DOM 객체에 동적으로 추가된 이벤트 핸들러 제거하는 방법

jQuery의 bind(), live(), delegate() 함수를 사용해서 이벤트 핸들러를 등록하는 경우, 각각 unbind(), die(), undelegate() 함수를 사용해서 이벤트 핸들러를 삭제할수 있다.이때, bind()로 추가한것은 반드시 unbind()로, live() 로 추가한것은 die()로, delegate()로 추가한것은 undelegate() 로 삭제해야 하는것에 주의하자.이렇게 unbind()류의 함수를 사용해서 이벤트를 없앨때에는$('#foo').unbind('click');와 같이 사용하면 되며, unbind()의 인자를 주지 않으면 $(‘#foo’)에 걸려있는 모든 bind된 이벤트핸들러를 삭제하게 된다.또한 아래와 같이 이벤트 핸들러를 명명해서 bind한 후에 해당하는..

반응형