반응형 분류 전체보기126 CSS3 + jQuery로 버튼효과 HTML5 1 cilck CSS3 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 31 32 33 34 35 36 37 38 39 .more_btn { overflow: hidden; display: block; position: relative; width: 160px; margin-top: 45px; border: 1px solid skyblue; font-size: 13px; font-weight: 700; line-height: 54px; text-align: center; color: #222; -webkit-transition: color .4s; transition: color .4s; font-.. 2019. 9. 25. jQuery 효율적으로 사용하기 한 번 탐색한 DOM을 다시 탐색하게 하지 않기 bad code 1 2 3 4 5 6 7 8 9 10 11 $('button').on('click', function() { // DOM 한번 탐색 $('.modal').modal(); // DOM 다시 한번 탐색 $('.modal').addClass('active'); // DOM 또 다시 한번 탐색 $('modal').css(...); }); good code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $('button').on('click', function() { // DOM 한번만 탐색 (체이닝) $('.modal') .modal() .addClass('active') .css(...); }); $('button').. 2019. 9. 25. Vue.js에 대해 Vue는 요즘 핫한 자바스크립트 프레임워크로 사용되고 있다. React와 Angular가 항상 비교 대상이였지만, Vue의 등장으로 크게 3가지로 비교되고 있다. Vue의 등장은 신선했다. 왜냐하면 Vue.js는 혈통 없이 React와 Angular의 성공과 실패로부터 만들어졌다. 크게 React(Virtual DOM)와 Angular(양방향 바인딩)의 장점을 가져왔기에, 반은 먹고 들어간다. Vue.js의 장점들은 다음과 같다. 1. 학습 곡선이 낮다. Vue를 접해보았다면, 굉장히 쉽다는 것을 느꼈을 거라 생각한다. 사실 사람마다 틀릴 수 있으나, 알려진 학습 곡선은 Angular > React > Vue 순이 된다. Vue의 공식 문서도 이해하기 쉽게 설명했다고 생각한다. 한글 번역까지 많은 분들이.. 2019. 9. 25. on이벤트에 파라미터 전달 1 2 click click 1 2 3 4 5 6 7 8 9 10 11 12 13 var btn1 = $('.btn1'); var btn2 = $('.btn2'); var two = 2; var three = 3; btn1.on('click', { number : 1}, test); btn2.on('click', { number : 2}, test); function test( $e ){ alert( $e.data.number ); } on이벤트에 { name: } 이라는 파라미터를 만들고 data.number로 호출하면 버튼을 클릭했을때 각각 1,2가 출력된다. 2019. 9. 25. 삼항 조건 연산자 if 문을 사용할 때 한줄로 축약할 수 있는 방법입니다. 아래 예제입니다. 1 2 3 4 5 var age = 30; var canDrinkAlcohol = (age > 19) ? "true, over 19" : "false, under 19"; alert(canDrinkAlcohol); // true, over 19 if / else 문 대신 삼항 연산자를 사용하면 함수를 사용할 때 깔끔하게 만들 수 있습니다. if/else 1 2 3 4 5 6 7 8 9 10 11 function canDrinkAlcohol(age){ if(age > 19){ return true }else{ return false } } var output = canDrinkAlcohol(20); alert(output) //tr.. 2019. 9. 25. 브라우저 렌더링 과정 1. 불러오기 로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정. 읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드할 것인지 등을 결정한다. 2. 파싱 (Phasing) 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다. 3. 렌더링 트리 만들기 DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM객체를 쓸 때 이용하는 것이고 별도로 그리기 위한 트리가 만들어져야 하는데 그것이 렌더링 트리다. (그릴 때 필요없는 head, title, body태그등이 없음 + display:none 처럼 DOM에는 있지만 화면에서는 걸러내야할 것들을 걸러냄) 4. CSS 결정 CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 CSS.. 2019. 9. 25. 이전 1 ··· 17 18 19 20 21 다음 반응형
