간단하게 HTML 페이지의 레이아웃을 확인하는 방법!

마크업 개발시 현재 페이지의 레이아웃을 쉽게 확인할 수 있는 툴을 소개합니다.   pestcide.io 라는 툴 인데요.   CSS상에서 레이아웃 문제가 있을때 해당 툴을 통해서 각각의 모든 요소들의 외곽선을 그어 확인할 수 있습니다. 각각의 요소들마다 다른 컬러값을 주어 표현할 수도 있습니다. (설치형 css를 받아서 보시면 모든 태그에 outline값을 적용해 주었습니다.)   적용 더보기…

Ajax & CORS Overview

  Ajax의 역사   1990년대까지 웹 애플리케이션은 사용자가 서버로 요청을 보내면, 서버가 비지니스 로직을 처리한 후 새로운 웹 페이지를 만들어 클라이언트로 전송하는 방식이었다. 일부 데이터만 갱신하고 싶어도 페이지 전체를 받아와야하기 때문에 낭비가 많았다. 웹의 시작이 ‘문서’였다는 점을 생각해보면 당연한 일이었는지도 모르겠다.         처음으로 이러한 비효율적인 구조를 개선하려는 시도를 더보기…

[발표] 모바일 웹 어플리케이션 접근성

어제 한국장애인단체총연합회 및 한국웹접근성인증평가원에서 진행한 웹 접근성 세미나에서 발표를 맡게 되었습니다. 마지막 세션이라 긴장도 많이 되고 시간도 짧아서 많은 이야기를 드리지 못한 거 같아 아쉽습니다. 더 많은 내용은 블로그에서 추가로 다루도록 하겠습니다. 발표자료 공유드립니다. 모바일 웹 어플리케이션 접근성 from Eun Cho 감사합니다.

HTML의 원래 기능을 유지하자.

HTML, Hyper Text Markup Language는 1993년 ISO 표준이 되어 현재는 가장 사랑받는 웹 개발 언어입니다. 꽤 오랫동안 사용되어왔지만, 그동안 비표준 브라우저들의 시장 잠식, 브라우저 전쟁 등으로 인해 많은 오해를 받기도 한 언어입니다. HTML과 더불어 오랫동안 사용되어 왔던게 CSS, Cascading Style Sheet와 JS, JavaScript입니다. CSS를 이용해 웹사이트를 아름답게 꾸미고, JavaScript를 이용해서 더보기…

당신의 요소에 역할을 부여해주세요.

div태그로만 레이아웃을 구성하고, span태그로 모든 인라인 스타일을 넣어주던 시대도 있었지만, 시멘틱 웹의 중요성과 표준을 준수하는 것, 그리고 웹 접근성의 중요성이 대두되면서 대부분의 웹 페이지나 어플리케이션들이 태그의 목적에 맞게 태그를 사용하여 웹 페이지나 어플리케이션을 개발하는 시대가 되었습니다. HTML5에서 Content Model을 대대로 수정하면서 Sectioning Content가 생겨나고, section태그나 article태그와 같은 다양한 태그들이 추가되었습니다. 더보기…

W3C 스펙은 어떻게 읽어야 하는가?

How to read W3C specs from ourmaninjapan Front-End 개발자라면 누구나 한번쯤 W3C의 스펙을 접해봤으리라 생각합니다. W3C 스펙을 읽어야할 필요성은 어떤 개발자나 가지고 있지만, 영어에 대한 막역한 두려움과 W3C 문서들이 가지고 있는 법칙들을 이해하지 못해 읽는데 어려움을 겪었으리라 생각합니다. 그런 점에서 지난 주 금요일에 진행된 TTWF 행사의 발표 내용 중, “W3C의 더보기…

[영상] Webkit Overview

Intro Rendering Engine 중 하나인 Webkit Rendering Engine에 대해 간단히 발표해보았습니다. 부가 초반에 Web Browser 부분에서 설명이 없었는데, 현재 Webkit엔진은 Safari 브라우저에서 사용하고 있습니다. Chrome도 27버전까지는 Webkit을 사용했고, 그 이후부터 Webkit을 개량한 Blink 엔진을 사용하고 있습니다. References Rendering in Webkit Webkit Layout Slide Webkit overview from Eun Cho

브라우저는 어떻게 동작하는가? [1/3]

NHN 개발자 블로그인 Hello World에 투고되어있는 “브라우저는 어떻게 동작하는가?“의 정리본입니다. 너무 어려워서 다시 정리합니다. Web Browser 가장 많이 사용되는 프로그램이고 우리가 웹을 탐색할 때 사용하는 프로그램입니다. 최근에는 “인터넷 익스플로러(MS)”, “파이어폭스(Mozilla)”, “크롬(Google)”, “사파리(Apple)”, “오페라(Opera)”가 주력 브라우저로 활약을 하고 있습니다. 브라우저의 주요 기능은 “사용자가 요청한 데이터를 서버에 요청한 뒤 그 데이터를 받아서 더보기…

backbone.js에 대한 지극히 개인적인 생각

  작년 말에 어찌하다가 중간에 지원사격하러 들어간 프로젝트가 있다. 이 프로젝트는 backbone.js를 사용하고 있었는데 그점이 끌려서 내가 “지원”하겠다고 “자원”했다. 그리고 아직도 끝나지 않은 그 프로젝트는 내 주업무가 되었다. 이전에 backbone.js를 잠깐 공부했던 적도 있었던지라  “대충 그냥 삽 좀 푸면 금방 익숙해지겠지”라는 생각으로 무작정 뛰어들어서 닥치고 코딩부터 했다. 얼마 안 가서 이 더보기…

Function.prototype.bind 메소드로 커링 구현하기

함수형 프로그래밍 언어는 커링이라는 기법을 가지고 있습니다. 논리학자 헤스켈 브룩 커리의 이름에서 유래했고 여러개의 인자를 받는 함수를 나머지 인자를 받는 함수로 변환하는 메커니즘입니다.  (위키피디아) 쉽게 말해 두 개의 인자를 받는 함수를 하나의 인자를 받는 함수로 변환하는 기법이라고 설명 드릴 수 있습니다. 커링을 이해 하기 위해서 스칼라 코드를 보겠습니다. // 선언 def mulOneAtATime(x: 더보기…

글쓴이 UYEONG,