분류 전체보기 81

구형기기에서 photoswipe 회전 오류

photoswipe로 이미지 뷰어를 사용하고 있는데 tablet 테스트중 ipad mini2 구형기계에서 회전시 반응이 느려 resize 오류가 발생되었다 1. 화면 회전후 $(window).trigger('resize') 를 해봤는데 반응없음. 2. @medea query로 디바이스 width, height 넣고 회전시 높이, 넓이 재 지정 반응은 있지만 위치가 자기 마음대로 아무데나 가있음.. 3. 2번후 javascipt로 회전체크해서 0.1초후 resize해줌 var styleNode = document.createElement('style'); styleNode.type = "text/css"; var $win = $(window); var winWidth = $win.width(); var w..

STUDY/javascript 2019.09.27

스와이프메뉴 클릭하면 가운데오기

swiper js버전 See the Pen swiper 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen. 스크롤 버전 선택된 요소가 박스의 중앙정렬 될수있도록scrollLeft값 조작 listWidth : 요소 전체 길이boxHarf : 스크롤될 부모요소 가로값의 절반 (중앙정렬 기준)targetLeft : 선택된 요소의 position left 값selectTargetPos : targetLeft + 선택된요소 중간값 var selectTargetPos = (targetLeft + target.outerWidth()/2);if (selectTargetPos

STUDY/javascript 2019.07.25

리스트 빈칸 채우기

다단으로 나열되어 있는 리스트 열의 빈 칸이 아래 이미지처럼 디자인되어 있는 경우 ​ 운영중인 사이트에 작업되어 있는 방식은 마지막 줄에 list item이 4개가 되지 않을때 나머지는 이런식으로 작업이 되어있었다 위 사진일은 li 빈태그가 3개 개발코드를보니 정말.. 힘들어 보였다 ​ 비효율적인 코드를 css로 해결가능해 보여 수정. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ul:after { content: ''; display: block; clear: both; width: calc(25% + 1px); height: 38px; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; box-sizing: border-b..

STUDY/CSS 2019.07.05

textarea placeholder 줄바꿈

기본적으로 placeholder는 줄바꿈이 되지 않음. data 요소에 내용을 넣어(data-placeholder) 동적으로 넣어줌 지인에게 받은 placeholder 줄바꿈 코드가 있었는데 textarea가 1개일때는 유용하게 사용할것 같다. 하지만 내 작업물에는 3개이상 사용해야해서 약간 수정 했다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $('textarea').each(function () { var $this = $(this); if ($this.attr('data-placeholder') == undefined) return; var placeholder = $this.attr('data-placeholder'); $this.after('' + placeholder + ..

STUDY/javascript 2019.07.05

css로 요소 개수 알아내기

자식요소가 몇개인지 css로 알아낼수 있다. IE9부터 지원 이미지 개수에 따라 달라지는 레이아웃 클래스 추가없이 (마치 flex가 요소 개수에따라 알아서 영역 나눠갖는 것처럼) 알아서 레이아웃 변경됨 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 .wrap { text-align: center; } .testItem { display: block; float: left; background: skyblue; &:nth-of-type(2n) { background: powderblue; } &:first-child:nth-last-child(1) { width: 100%; } &:first-child:nth..

STUDY/CSS 2019.07.05

css animation 값 유동적으로 적용

.bar { background:pink; // 기본색상 animation: example 5s ; } @keyframes example { from {background-color: blue;} to {} // 비워둠 } - to 비워두면 inline으로 선언한 요소나 기본 선언된 속성(pink)가 먹힘! 꿀팁 ex) 프로그래스바 수치를 inline으로 적용, 퍼센테이지에 모션을 줘야 할때. animation form width값이 0 부터 시작해서 inline으로 html에 넣어준 40%로 끝난다! .bar { animation: example 5s ; } @keyframes example { from {width:0;} to {} }

STUDY/CSS 2019.07.05