손영배 블로그 누구나 쉽게 이해하고 습득하기

HTML과 data를 섞어서 html 화면에 변화를 주는 것. 1. HTML Templating 작업이란? 반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로JSON)을 결합해서, 화면에 추가하는 작업이라고 할 수 있습니다. 랜더링이 서버에서 할까? 클라이언트에서 할까?는 고민사항이다. 문자열을 replace 해서 변환하는 작업을 해보자 var data = { title : "hello", content : "lorem dkfief", price : 2000 }; var html = "{title}{content}{price}"; var result = html.replace("{title}", data.title) .replace("{content}", data.conten..

var log = document.querySelector(".log"); var lists = document.querySelectorAll("ul > li"); for(var i = 0, len =lists.length; i < len; i++){ lists[i].addEventListener("click", function(evt){ log.innerHTML = "clicked" + evt.currentTarget.firstElementChild.src; }); } 문제 : 만약에 리스트가 몇개가 더 추가된다면 그 만큼 또 추가된 element들에게 addEventListener를 해줘야 하기 때문에 불편하다. 그래서 그래서 ul의 target에 다가 addEvnentLlist를 걸 수 있다. va..

var base = document.querySelector(".outside"); base.style.transform = "scale(2)"; base.style.left = "300px"; transittion, transform 속성의 변화를 주어 변경한다. CSS로 transform 효과 주는게 자바스크립트보다 더 빠르고 좋다 네이버나 구글에서는 애니메이션 효과를 어떻게 주는지 훔쳐보도록 하자

1. 애니메이션 애니메이션은 반복적인 움직임의 처리입니다. 웹UI 애니메이션은 자바스크립트로도 가능하지만, 규칙적이고 비교적 단순한 방식으로 동작되는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현가능합니다. 뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다고 합니다. 특히 모바일웹에서는 CSS를 사용한 방법이 훨씬 더 빠릅니다. 2.FPS FPS(frame per second)는 1초에 화면에 표현할 수 있는 정지화면(frame)수 입니다. 매그러운 애니메이션은 보통 60fps입니다. 따라서 16.666초 간격으로 frame 생성이 필요한 셈이죠. (1000ms / 60fps = 16.6666ms) 앞서 말한 것처럼, 애니메이션은 CSS의 transition 속성..

GNB(Global Navication bar) 어는 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴 최상위 메뉴로 보통 상단에 위치하고 있다. 메인메뉴 LNB (Local Navigation Bar) GNB를 누를 경우 소제목 형식으로 나오는 메뉴를 가리킨다. 네이게이션을 통해 특정 지역으로 가는 네비게이션 bar이다. SNB (Side Navigation Bar) 일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 한다. 메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴이다. FNB (Foot Navigation Bar) 하단 메뉴를 가리킨다.