웹밤바

모바일 썸네일 background-image방식 가로크기가 항상 100%가 아닐경우도 있어서 매개변수로 퍼센트값, 가로,세로 받아서 mixin으로 계산 // 썸네일 세로 %구하기 @mixin ratioWidth ($percentW, $width, $height){ height:0; padding-bottom: (($height*$percentW)/$width) + %; } .item { $width : 50; width: $width + %; @include ratioWidth($width,370,446); }

sass의 function으로 만들었다 ​ 2배수가 기본. 만약 세배수일때는 rem( 디자인 작업된 px, 3) ​ variable.scss 에 $rootFontsize 설정해서 사용함. @function rem($size, $ratio:2) { @return ($size/$ratio) / $rootFontsize + rem; } 사용법 font-size:rem(40);

기본적으로 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 + ..

자식요소가 몇개인지 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..

.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 {} }

모바일 리스트에서 상세로 넘어갔다가 다시 돌아왔을때 보고있던 페이지 유지를 위해서 상세는 레이어로, 레이어가 닫히면 보고있던 리스트가 보이게 하는게 목적. 리스트에서 상세뜰때 레이어를 띄우는건 문제없이 적용. 상세에서 닫기를 누르거나, 뒤로가기(안드로이드에서는 back버튼, 아이폰에서는 스와이프) 동작시 레이어가 닫히는 액션을 주어야 한다. 검색을 통해서 두가지 방법을 찾았다. 1. hashchangehref="#ID" 로 같은페이지 내에서 이동했을때 hash가 변경되면 실행뒤로가기( history back )이 되었을때 hash가 지워지고 hashchange가 발생 hashchange가 발생하면서 설정한 함수(close버튼 trigger) 실행된다. 12345678910111213141516171819..

var functionName1 = function(){..}var functionName2 = function(){..}var functionName3 = function(){..} $(function(){functionName1();functionName2();functionName3();} 자바스크립트는 인터프리터 언어라서 상단문법에서 오류가 나면 그대로 멈춰버림.아래코드는 실행이 되지 않아 페이지에 큰 영향을 줌. 함수를 변수로 담아놓으면 필요할때 그 코드를 불러오기 때문에 functionName1의 함수에 오류가 있더라고 functionName2,functionName3 은 문제없이 실행이 됨. ===========> 가 아님.... 스터디때 그렇게 알았는데 아니였음메모리에 먼저 얹어놓느냐 아니..

webstorm 설치node 설치 * sass빌드하지않는 임포트용 sass파일은 앞에 _(언더바) 삽입 ex) _main.scss

한국어, 영어, 중국어, 일본어, 아랍어 + font설정font-family: 사용 언어 폰트파일 나열. 없는 폰트는 넘기고 사용가능한 폰트로 출력 + 인코딩uft-8 + 각 언어별 특성 css분기 왼쪽에서 오른쪽으로 읽는 언어들 혼합되어있는 페이지인 경우 기본 ltr 에서 각각 분기 1. :lang() 속성~~ html:lang('ar') .headcopy { direction:rtl; } 2. loot class

* 성능 측정도구 Yslowhttp://www.getfirebug.comhttp://developer.yahoo.com/yslow/ 14가지 규칙에따라 A~F 까지 틍급매김 1. HTTP 요청 줄이기 - 이미지맵 사용 - css, js 합치기 - css sprite 사용 (image ir) 2. 캐시활용 3. css, ja의 위치 - css : 상단 - js : 하단 4. 스크립트 최소화 5. CSS Expression을 피하라6. 중복 스크립트를 제거하라7. 404 오류가 발생하지 않게 하라8. DOM 접근을 최소화하라9. CSS 필터를 피하라10. favicon.ico 파일은 작게 만들고 캐싱되도록 만들어라 참조http://www.slideshare.net/KimKiSu/part1?qid=471ed8..