💸원 and beyond

일반적인 질문: Twitter,Facebook 등의 SNS를 사용하시나요? * 사용한다면, 누구를 팔로우 하고 있나요?GitHub을 사용하시나요? * 사용한다면, 어떤 프로젝트를 Watch 혹은 Fork하시나요?자주 보는 Blog가 있습니까?버전 관리 시스템은 어떤 것들을 사용해보셨습니까?선호하는 개발 환경은 무엇입니까? (운영체제, 에디터, 브라우저, 도구 등등)당신이 웹 페이지를 만들 때의 과정을 설명 해주실 수 있을까요?점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까? * "누구도 성공하지 못합니다" 라고 말하면 보너스 포인트를 주세요. * 각 특색을 설명을 한다면, 더 높은 보너스 포인트를 주세요...

# 마크업 개발 레벨 테스트레벨테스트의 목적은 현재 파악하고 있는 수준을 측정함에 있습니다. 자료를 찾아서 답을 작성하지 마시고, 편안한 마음으로 아는 만큼만 적어주세요.모든 답변은 2줄이 넘지 않을 정도의 분량으로 간결하게 작성해주세요. ## HTML1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요? 2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요? 3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요. 4. blockquote 태그는 어떤 용도로 사용해야 할까요? 5. 인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요? 6. myPhoto.jpg 파일을 img 태그로 작성해..

자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다. 브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화 같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함) reflow와 repaint에 대한 설명은 아래 글 참고 브라우저 렌더링 : reflow & repaint // 전 var width = do..

nhn은 이렇게 한다 자바스크립트 성능 이야기의 내용들을 발췌하였음 바로 활용할 수 있는 부분을만 추려서 요약한다. 코드 스타일 부분에서는 크게 아래 3가지를 통해 성능을 향상시킬 수 있다. 변수, 객체 생성 및 접근정규표현식반복문 변수, 객체 생성 및 접근 1) 배열 생성 : var arr = []; 이 var arr = new Array() 보다 빠름 2) 배열 데이터 초기화 및 접근 : arr[i] = i;이 vs arr.push(i); 보다 빠름 3) 객체 생성 : var obj = {}; vs var obj = new Object(); 보다 빠름 4) 객체 데이터 초기화 및 접근 : obj.a = 1; vs obj["a"] = 1; 보다 빠름 5) 문자열 생성 : var str = "test";..

렌더링 과정 1) DOM 트리 생성 2) 스타일 구조체 생성 3) 렌더 트리 생성 4) 레이아웃 처리 5) Paint 6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생 reflow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시, 영향받은 모든 노드(자식, 부모 등)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업 function reflow() { document.getElementById('test').style.width = '100px'; return false; } repaint Reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업. 수치와 상관없는 background-color, visibillty, outline 등의 스타일 변경 시에는 Reflo..

기본규칙 1. 문서의 내용과 표현과 행동을 분리합니다. (HTML 만으로 문서를 이용할 수 있어야 합니다.) 2. CSS 코드를 작성할 때는 들여쓰기를 하지 않습니다. 단, 중괄호”{ }”가 중첩되는 경우 예외로 합니다. 3. CSS 데이터를 로딩할 경우 @import 방식은 되도록 사용하지 않습니다. 4. 모든 속성은 영문 소문자로만 작성합니다. 5. 공통선택자 ‘*’는 웹 페이지의 성능을 떨어뜨리고, Internet Explorer에서는 주석까지 영향을 받을 수 있으므로 사용 하지 않습니다. 6. 컬러 값 표기 RGB값 앞에 '#'을 넣어 표기합니다. ex) #eee, #000, #eaeaea 7. 공백이 포함된 폰트명, 한글 폰트명, 문자열 데이터 타입, @charset 선언 시에는 속성 값을 큰따..

웹접근성 기본개념모든사람이 다양한 조건의 환경에서 손쉽게 웹 콘텐츠에 접근할 수 있도록 보장하는 것을 의미합니다. 장애가 있거나(일시적인 장애를 지니게 되는경우를 포함) , 네트워크 환경이 좋지 못한 경우 혹은 모바일 기기를 사용하는 경우, 다양한 운영체제 및 웹 브라우저를 사용하는 경우 등 환경조건에 관계없이 웹콘텐츠에 접근할 수 있어 웹 사용성을 증가시키게 됩니다.관리기준한국형 웹 콘텐츠 접근성지침 KWCAG V.2.0한국형 웹 콘텐츠 접근성 지침 2.0이 TTA 단체 표준으로 2009년 12월 22일에 제정되었습니다. 웹접근성 평가도구웹접근성 평가툴 K-WAH 4.0K-WAH 4.0은 한국형 웹 콘텐츠 접근성 지침 2.0에 따라 웹사이트(웹페이지)가 접근성 지침의 6개 세부지침을 준수하는지를 자동 ..

퍼블리싱 웹접근성 체크리스트No.항목명고려부서레벨적용여부1이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)에 적절한 대체 텍스트를 제공하는가? 사용자 입력 이미지의 경우, 대체 텍스트를 넣을 수 있는 입력폼을 제공하는가?기획, 디자인, 퍼블리싱, 개발15W3C Validation을 통과하는가?퍼블리싱26주요 콘텐츠 제목을 h1~h6로 마크업했는가?기획, 퍼블리싱17표는 table로 표의 머리글은 th로 마크업했으며 scope 속성을 제공하는가?퍼블리싱28thead, tbody, tfoot으로 그룹핑 되어 있는가? (th로 그룹핑 안될경우 thead생략가능, tbody만 있을 경우 tbody생략 가능)퍼블리싱19table에 caption..

1. 기본문법1.1. 자바스크립트 특징1.1.1. 함수자바스크립트 함수는 어휘적 유효범위를 가진 일급 객체입니다. 즉, 함수는 변수에 대입되거나 인수로 넘길 수도 있고, 반환 값으로 사용하거나 연산 등에 사용하는데 전혀 제약이 없는 객체입니다.1.1.2. 느슨한 타입 체크자바스크립트 컴파일러는 타입 오류를 찾을 수 없습니다. 복잡한 클래스 계층을 구성할 필요도가 없고, 타입 캐스팅을 신경 쓰지 않아도 됩니다.1.1.3. Object Literal콜론으로 구별되는 프로퍼티 이름/값 쌍들이 다시 쉼표로 분리된 목록을 사용할 수 있습니다. Json에 기초가 되며, 필요한 요소들을 열거하는 방법으로 객체를 만들 수 있습니다.1.1.4. prototype에 의한 상속클래스 기반 언어가 아니기 때문에 모든 객체에 ..

Chapter 01. HTTP 요청을 줄여라1. 이미지 맵(Image map)이미지 맵 을 이용하면 웹 페이지 UI 변경 없이 HTTP 요청 수를 줄일 수 있다. 그 이유는 한 개의 이미지로 여러 개의 URL 을 연결 할 수 있기 때문이다. 이미지 맵을 사용하면 장점으로는 보통 50% 빠른 속도를 보이는데, 단점으로는 클라이언트 측 맵으로 코드를 작성 할 경우 맵의 영역 좌표를 수동으로 하는 경우 지루하고 실수하기 쉽다. 그리고 네모가 아닌 다른 모양을 만드는 것을 거의 불가능하며 연속적인 이미지여야 하는 안 좋은 점이 있다. 2. CSS SpriteCSS Sprite 는 이미지 맵처럼 여러 이미지를 결합할 수 있지만 이미지 맵보다 훨씬 유연하다. 보통 CSS 의 background-position 속성..