31. CSS 배경 이미지
July 18th, 2011 by 퐁당스
소개 솔직하게 말해보라! 이 과정의 첫 번째 글에서부터, 여러분은 여러분의 사이트를 강렬하고 매력적으로 보이게 만드는 방법을 배우고 싶어 몸이 근질거렸을 것이다. 아마 여러분은 이미 몇 개의 글을 건너 뛰었을지도 모르겠다. 백그라운드 이미지는 여러분의 사이트를 섹시해 보이게 만드는 것이지만, 그것을 만드는 방법이 여러분이 앞에서 이미 배웠던 것에서 크게 벗어나지 않는다는 것을 알게 되면 놀랄지도 모르겠다. 이 [...]
30. CSS 레이아웃 모델 – 박스, 보더, 마진, 패딩
July 9th, 2011 by 퐁당스
소개 얼핏 보면 CSS 레이아웃 모델은 직관적이다. 박스, 보더 그리고 마진은 꽤 간단한 오브젝트들이고, CSS 문법은 그들의 속성을 간단하게 표기할 수 있는 방법을 제공하고 있다. 하지만 브라우저 렌더링 엔진은 CSS 2.1 권고안에 적혀있는 긴 규칙 리스트 뿐만 아니라 브라우저 자체의 규칙도 함께 따른다. 이러한 이유로 고급 기술들이 스타일리스트의 레퍼토리에 더해지기 이전에 우리가 이해해야 할 구체적인 [...]
51. 적절한 낮춤 대 점진적 향상
June 27th, 2011 by 졸린눈이
소개 이번 학습에서 우리는 2가지 개발접근법의 차이에 대해 얘기하겠다: 적절한 낮춤과 점진적인 향상 간단히 정리하자면 다음과 같이 정의할 수 있다: 적절한 낮춤(Graceful degradation) 원하는 기능을 갖는 또다른 버전을 제공하거나, 사용자가 제품의 결점이 사용성을 보장하기 위한 안전 조치때문이라는 것을 인지하도록 만드는 것이다. 점진적 향상(Progressive enhancement) 사용가능한 기능을 바탕으로, 향상된 기능을 적용하기 전에 테스트를 통해 풍부한 사용자 [...]
50. 자바스크립트 애니메이션
June 27th, 2011 by 졸린눈이
소개 이번 글에서 자바스크립트를 이용해 애니메이션을 만드는 작업을 알아 볼 것이다 — 애니메이션은 사용자경험을 추가하기 위해 종종 사용되는데 애니메이션이 지원되는 브라우저를 이용하는 사용자들을 위한 것이다. 부드럽게 확장되거나 접히는 패널, 진행바, 폼에서의 시각적인 피드백 같은 것에 일반적으로 사용된다. 카툰이나 플릭북1을 봤던 사람은 알고 있듯이, 애니메이션은 무언가를 움직이는 것처럼 만들기 위해 수많은 작은 단계들로 되어 있다. 애니메이션은 [...]
49. 자바스크립트 이벤트 핸들링
June 27th, 2011 by 검은태양
소개 이제 당신은 CSS를 이용해서 레이아웃을 잡고 스타일을 주는데에 익숙할 것이다. 그리고 자바스크립트에서 변수와 함수, 메서드 등의 기본적인 개념을 이해하는 첫 발도 내딛었다 – 비록 그 첫 걸음이 좀 비틀거렸을 수도 있겠지만 말이다. 자 이제는, 그러한 지식을 이용해서 당신의 사이트를 방문하는 이용자들에게 상호작용적이면서 역동적인 행동을 제공할 때이다. 자바스크립트를 이용해서 이벤트를 조종하는 것은 당신에게 프랑켄슈타인 박사의 [...]
48. 동적 스타일 – 자바스크립트로 CSS 다루기
June 27th, 2011 by 검은태양
소개 당신은 여기까지 자바스크립트를 배워 오면서 기본적인 구조와 DOM을 이용해서 요소를 선택하는 방법을 배웠으며, 선택한 요소를 다루는 방법도 익혔다. 이 글에서는, 자바스크립트를 사용해서 CSS를 조작하고 요소에 사용된 스타일을 동적으로 변경하는 방법을 다루고자 한다. 사실 이 방법들은 이미 다루어진 것 들이지만 CSS DOM과 작업할 때 조금 더 염두에 두어야 할 것들이 있다. 이것들에 대해서 이야기해보자. 스타일시트에 [...]
46. DOM 여행
June 27th, 2011 by 검은태양
소개 어떤 방법으로든 HTML 문서와 상호작용하지 않고도, 자바스크립트를 유용하게 사용한 웹 사이트를 찾기란 지극히 힘들 것이다. 일반적으로 말해서 당신의 스크립트 코드는 페이지에서 그 값을 읽어와야 하고 그 값을 어떤 방법으로 처리해야 하며, 그리고는 그 결과를 눈에 보이는 – 혹은 어떤 정보의 형태를 가지는 메시지의 – 형태로 만들어내야 한다. 당신의 웹 페이지와 웹 프로그램이 쓸만한 상호작용을 [...]
45. 자바스크립트 객체
June 27th, 2011 by 검은태양
소개 이전 글 에서 함수의 컨셉에 대해 소개했다. 함수를 사용함으로서 프로그램들을 논리적인 덩어리들로 쪼개서 당신의 코드를 좀더 잘 조직화하고, 쉽게 재사용할 수 있었다. 이제 당신이 자바스크립트 프로그래밍의 핵심적인 개념들을 거부감 없이 받아들일 수 있게 되었으므로, 객체 에 대해 소개함으로서 활용의 폭을 더욱 넓혀보고자 한다. 객체를 사용함으로서 함수로 정의한 기능성들을 하나로 묶을 수 있고, 또한 그것을 [...]
44. 자바스크립트 함수
June 27th, 2011 by 검은태양
소개 함수는 당신이 자바스크립트에서 할 수 있는 모든 유용한 것들의 중심에 있다. 폭넓게 말하자면, 함수는 프로그램을 논리적인 덩어리들로 나눌 수 있게 해 주는데, 각각의 덩어리들은 기능의 특정한 세부들을 담당한다. 함수는 언어의 중심 기능이고, 자바스크립트의 매력 중 하나는 당신이 직접 함수를 만들고 사용할 수 있다는 것이다. 만약 당신이 PHP나 자바 같은 언어에서의 프로그래밍 경험이 있다면, 자바스크립트에서 [...]
43. 겸손한 자바스크립트의 원리
June 27th, 2011 by 검은태양
소개 앞선 글 들에서 우리는 HTML과 CSS에 대해 많은 이야기를 했고, 그것들을 성공적으로 실행에 옮기는 방법과 함께 자바스크립트의 기초들 – 자바스크립트는 무엇이고, 당신에게 어떤 도움이 되며, 왜 그것에 대해 알아야 하는지 역시 이야기했다. 실질적인 자바스크립트 사용에 대해서 더 깊이 다루기에 앞서, 잠시 멈춰서 스크립트 때문에 당신의 사이트를 외면하는 사용자가 생기지 않게끔 주의깊게 사용하는 법에 대해서 [...]