본문 바로가기

Dev126

제이쿼리 체크박스 체크 여부 확인 및 제어 jquery checkbox checked 제이쿼리 체크박스 체크 여부 확인 및 제어 jquery checkbox checked 제이쿼리 체크박스 checked 여부 확인 $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ checked/unchecked 처리 $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ 전체선택 체크박스를 선택하면 그 아래.. 2020. 12. 3.
[반응형 웹 기초] @media screen and (max-width:620px) and (min-width:300px) 반응형 웹의 기초 @media screen and (max-width:620px) and (min-width:300px) 반응형 웹에 대해 두려움을 갖고 있는 퍼블리셔들이 제법 많다. 사실 알고 보면 별거 아니다. 가로폭에 대한 시나리오대로 CSS를 적용해주면 90%(?)는 끝난 게임이다. 물론 그 과정은 코딩답게 노가다이긴 하다. 같은 스타일에 대해 2번 이상을 기술해줘야 하는 작업이니까 말이다. 나머지 10%는? 반응형웹을 원하는 클라이언트의 기발하고도 창의적이면서 가학적인 눈높이에 맞춰주기 위해서는 단지 CSS의 @media screen 만으로는 해결되지 않는 난제들이 튀어나올 때가 있다. 그럴 땐 하는 수 없이 jQuery의 도움을 받아야 한다. 하지만 왠만하면 @media screen으로 대부분.. 2020. 11. 22.
jquery animate 사용예 jquery animate 사용예 .animate() 함수를 이용하면 html Element 상의 객체 움직임을 부여할 수 있다. 반드시 CSS 속성 맵 데이터와 함께 사용한다. 움직임에 관련된 속성들은 단수 수치 값(single numeric value)을 이용한다. 즉, width, height, left, margin 등에 이용할 수 있지만 color같은 값에는 사용할 수 없다. .animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery Duration은 지속시간이며, complete에는 콜백 함수를 지정해서, 애니메이션 동작 이후 함수를 실행할 수 있다. 단, 이 함수에는 인자값을 넘겨 줄 수는 없다. .animate(.. 2020. 11. 11.
favicon.ico 파비콘 만들어서 홈페이지에 붙이기 2014년에 작성된 글입니다. 티스토리 파비콘은 파비콘을 만든 뒤 블로그 설정에 업로드만 하면 됩니다. 뭐든지 겸사겸사 하는 걸 좋아하는 타입이라. 네이버 블로그에서 티스토리로 이사를 오면서 네이버에서는 뽐낼 수 없었던 기능들을 십분 활용해보는 김에 저처럼 초보가 갑갑해하고 가려운 것을 직접 해나가면서 올려봅니다. 굉장히 상세하게 설명해주시는 다른 분들의 글들도 많지만, 워낙에 아는 게 많으셔서 들 그런지 간단한 것 까지 세밀하게 상세하게 쓰다 보면 되려 어렵게 느껴지더군요. 그래서 저는 핵심만 추려봅니다. 파비콘을 다는 방법은 다음과 같습니다. 1. favicon.ico라는 파일을 만든다. 2. 사이트에 올려둔다. 3. 사이에 를 삽입한다. 1.favicon.ico 만들기 포토샵으로 만들어도 되고. h.. 2020. 11. 5.
css3 background-size:cover contain 속성 ie7, i8 핵 background-size-polyfill with 짤 : 스타킹 하이힐 이 글은 2016.08.09에 영국에서 처음 작성되어 지구를... 쿨럭... 오래된 글이니 그냥 참고로만... IE EDGE까지 나와 있는 세상에서 여전히 IE7 버전에 대한 하위 호환 크로스 브라우징을 해줘야 하는 것이 짜증이 나지만... UI는 안 되는 것도 되게 하는 신성한 직업! 브라우저들이 미쳐 날뛰더라도 핵이건 뭐건 써서 잘 맞춰보자. 이 번에 송파구립 통합도서관 중에 가락시장 도서관이 오픈하는데 맞춰서 송파구립 가락몰 도서관의 디자인 수정이 살짝 있었다. 기존의 송파구립도서관들은 BG가 repeat-x로 반복되기 때문에, 별 신경을 쓰지 않았지만, 좌우로 그러데이션 되는 BG가 깔리는 디자인으로 결정이 되었다. 당연히 repeat-x를 쓸 수는 없다. #topheader{ width:100%.. 2020. 11. 4.
Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 서론 Jquery 스와이퍼 슬라이더 플러그인인 idangerous.swiper.js를 사용하면 모바일 기기에서 손쉽게 슬라이드를 터치하여 내용을 넘길 수 있습니다. 그러나 이 플러그인의 페이징 처리 기능은 주로 숫자나 불릿 형태로 페이지를 표시하며, 텍스트 문장으로 페이지네이션을 설정하는 기능은 기본적으로 제공되지 않습니다. 이에 대한 요구사항이 있을 때, 플러그인의 코어를 수정하지 않고도 텍스트 문장을 이용한 페이지네이션을 구현할 수 있습니다. 이 글에서는 이러한 요구사항을 충족시키기 위한 해결책을 제시하고자 합니다. 해결책: 페이지네이션 텍스트 문장으로 변경하기 페이지네이션을 텍스트 문장으.. 2020. 11. 3.
img 태그 404 Error시에 대체 이미지 띄우기 img 태그 404 Error가 발생하면 대체 이미지를 띄우는 것은 쉽다. 아니 처음부터 그렇게 만들면 별로 걱정할 문제는 아니다. 그리고 대체로 레이아웃을 구성하는 이미지는 bg속성을 준 스타일을 먹이는 경우가 대부분이므로, bg가 깔리지 않으면 스타일만 변경해 주면 된다. 그 이외의 레이아웃을 구성하는 이미지 요소들도 마찬가지로 처리하면 된다. 문제는 게시판이나, 갤러리 등 다수 사용자 빌런 그룹이 존재하지 않는 이미지를 올리거나, 올렸던 이미지 소스 주소가 없어진 경우에 발생하는 이미지 에러 문제는 보통 다음과 같이 해결해 주어야 한다. 그런데 앞서도 지적했지만 게시판에 이미지를 불펌해다 붙이는 사용자들이 친절하게 html태그를 열어서 대체 이미지 주소를 입력하는 attr을 집어넣기를 바라는 것은 .. 2020. 10. 26.
자바스크립트 onresize 이벤트 창크기 변경 감지 자바스크립트의 onresize 이벤트 창의 크기가 변경될 때마다 그 것(이벤트)을 감지해서 특정 처리를 해야 될 때 늘 onresize 이벤트를 활용할 수 있다. Syntax HTML Attribute Event Property object.onresize = handler; attachEvent Method object.attachEvent("onresize", handler) http://msdn.microsoft.com/en-us/library/ms536959(VS.85).aspx onresize 이벤트를 적용가능한 엘레멘트는 window 객체 뿐만 아니라 다음의 객체들에도 적용이 가능하다. A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE.. 2020. 10. 23.
드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components 드롭다운 사용을 위한 Popper.js 다운로드 for Bootstrap 4.3 Dropdown Components 안녕하세요, 블로그 독자 여러분! 오늘은 Bootstrap 4.3에서 드롭다운 컴포넌트를 사용하기 위해 필요한 Popper.js 다운로드에 대해 알아보려 합니다. 이 글을 통해 드롭다운 메뉴를 구현하면서 발생할 수 있는 문제를 해결하는 방법을 살펴보겠습니다. 부트스트랩 3.x부터 4.3까지의 변화 부트스트랩의 버전이 업데이트되면서 드롭다운 컴포넌트를 사용하기 위한 요구 사항도 조금씩 변화하였습니다. 부트스트랩 3.x까지는 Popper.js가 필수적으로 필요하지 않았습니다. 하지만 4.3 버전부터는 드롭다운 메뉴를 사용하려면 Popper.js를 함께 사용해야 합니다. 이로 인해 초기 설정에 .. 2020. 10. 21.
checkbox css 체크박스 스타일로 예쁘게 하는 법 - 웹 접근성 맞추기 input[type=checkbox] + label 체크박스 자체를 예쁘게 꾸밀 수는 없다. 굳이 한사코 꾸미자면, 백그라운드를 이용할 수는 있다. 체크표시가 되었을 때는 input[type=checkbox]:checked에 스타일을 주면 된다. 그런데 이미지를 쓰지 않고 체크박스를 스타일로 예쁘게 꾸미려면...이게 좀 복잡해진다. input[type=checkbox] + label 을 이용하게 되는데, 이 방법의 핵심은 input 체크박스 자체를 보이지 않게 하고 label에 스타일을 주어서 꾸미는 방법이다. 그런데 보통 이럴 때, 진짜 체크박스를 보이지 않게 하기 위해서 input[type=checkbox] { display:none} 을 쓰게 된다. 이렇게 해 버리면 웹접근성 위배가 된다. 왜냐하면, label자체는 focus를 받지 못하고, inp.. 2020. 10. 19.
썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 썸네일이나 대표이미지의 가로 세로 비율이 고정된 영역에 다양한 이미지의 가로세로 비율이 다를 때, 해당 영역의 크기에 딱 맞춰서 넘치는 영역은 잘려 보이게 하는 것은 조금 복잡하다. 이미지 자체만으로 하려면 서버에서 자체적으로 이미지를 해당 비율에 맞춰서 잘라 주어야 하겠지만, 원본 소스를 유지한체 스타일시트 CSS만으로 해결하려면 어려움이 따른다. 이미지가 세로가 긴 포트레이트일 수도 있고, 가로가 긴 랜드스케이프일 수도 있기 때문이다. CSS는 자체적으로 어느 쪽이 긴 지 알 수 없다. SCSS.. 2020. 10. 11.
제이쿼리 팁 특정 태그에 CSS 적용 jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 크롬/IE color 해석 방식 차이 [제이쿼리 팁] 워드프레스 포스팅 글 내용 중 특정 태그에 CSS를 적용하라 크롬/IE color 해석 방식 차이. jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 요즘 특허 사이트의 콘텐츠용 사이트를 의뢰받아서 워드프레스로 제작 중인데요. 워드프레스 적용 자체는 별 것 아닌 작업이지만, 우리의 까다로운 클라이언트님의 소소한 요청이 워드프레스나 워드프레스 테마의 PHP를 건드리지 않고, 원하는 모양을 만들어 달라는 고난도 요청이 좀 많다. 이 번 요청은 이미 클라이언트가 작성해 둔 글 내용에서 링크들을 특정 모양을 "디자인 스타일대로 CSS를 입혀라"라는 미션입니다. 단! 제한 조건은 클라이언트는 html이나 css에 대해 전혀 모르고.. 2020. 10. 3.

티스토리툴바