💸원 and beyond

기본규칙 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 속성..

Naming GuidelinesCSS 파일 네이밍id/class 선택자 선언 규약id/class 선택자 네이밍 가이드Image 네이밍 규약Image 네이밍 가이드(X) 허용 안함(△) 예외 허용(O) 적극 권장1. CSS 파일 네이밍CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수는 최소한으로 유지합니다. 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css 으로 지정합니다./css/default.css 모든 스타일을 포함하는 파일 /css/popup.css 팝업등 새로운 페이지 유형이 존재하는 경우 별도로 분리2. id/class 선택자 선언 규약아래와 같이 정형화 된 요소들에 대한 네..

1장 자바스크립트에 익숙해지기 __아이템 1 어떤 자바스크립트를 사용하고 있는지 알아야 한다​애플리케이션이 지원할 자바스크립트의 버전을 정하라항상 스트릭트 모드 확인을 수행하는 최신 브라우저 환경에서 스트릭트 코드를 테스트하라 __아이템 2 자바스크립트의 부동 소수점 숫자 이해하기​자바스크립트의 숫자는 double 정확도의 부동 소수점 숫자다자바스크립트의 정수는 별개의 데이터형이 아니라 double의 부분집합이다비트단위 연산자는 숫자를 32비트의 부호가 있는 integer처럼 처리한다부동 연수점 산술 연산의 정확도의 한계가 있음을 주의해야 한다 __아이템 3 암묵적인 형변환을 주의하라​데이터형 에러는 암묵적인 강제 형변환에 의해 은밀하게 감춰질 수 있다+ 연산자는 인자의 데이터형에 따라 덧셈이나 문자형 ..

1. 자료구조 / 알고리즘 모음 자바스크립트로 구현한 자료구조 - codeKINwiki.codekin.com 2. 해쉬 맵 (HashMap)www.ppomppu.co.kr[출처] [자바스크립트] 자료구조 모음|작성자 쪼쪼

FullScreen API? PPT 프리젠테이션 모드와 같은 화면으로 변경시켜주는 API임 Demo Ex) https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/fullscreen/crossBrowserCentre.htmlhttps://dl.dropboxusercontent.com/u/444684/OpenWebDemos/fullscreen/slideshow.html FullScreen API 업데이트 MS IE v11 에서부터 FullScreen API가 지원이 됨 API는 FullScreen이 Fullscreen으로 소문자로 변경되고 cancelFullScreen에서 cancel이 exit으로 변경됨 Pre-spec Spec Change fullScreen..

홈페이지를 볼 때 가끔 조회하는 동안 로딩 이미지를 보게 됩니다. 저도 잘 몰랐는데 너무 간단하네요. 다음과 같이 jquery에서 지원하는 ajax함수인데요. beforeSend에서 이미지를 보여주고 complete에서 이미지를 감추면 끝입니다. 말그대로 요청 보내기전에 이미지를 보여주고 응답이 완료되면 어미지를 감추는것이죠. $.ajax({ type:"POST" ,url: "서버주소" ,data:"파라미터" ,success:function(res){ (조회성공일 때 처리) } ,beforeSend:function(){ (이미지 보여주기 처리) $('.wrap-loading').removeClass('display-none'); } ,complete:function(){ (이미지 감추기 처리) $('.w..

혜택정보 {$user_name} 님은, [{$group_name}] 회원이십니다. {$dc_min_value} 이상 {$dc_paymethod} 구매시 {$dc_value}을 추가할인 받으실 수 있습니다. (최대 {$dc_max_value}) {$dc_mileage_min_value} 이상 {$dc_mileage_paymethod} 구매시 {$dc_mileage_value}을 추가적립 받으실 수 있습니다. (최대 {$dc_mileage_max_value}) 가용적립금 : {$avail_mileage} 쿠폰 : {$coupon_cnt}개 국내배송상품 ({$basket_count}) 해외배송상품 ({$basket_oversea_count}) 장바구니에 담긴 상품은 {$basket_remove_perd}일 동..

[카페24쇼핑몰] 기획전 목록 현재 위치 홈 기획전 {$top_image_tag} {$title_text_or_image} {$category_name} ({$product_count}) {$category_name} {$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$option_preview_icon} {$basket_icon} {$zoom_icon} {$product_name} {$item_title} : {$item_content} {$item_title} : {$item_content} {$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$option_preview_ic..

[카페24쇼핑몰] 상품상세 검색 상품 검색 상품분류 {$form.category_no} 검색조건 {$form.search_type} {$form.keyword} 인기검색어 {$hot_keyword_name} {$hot_keyword_name} 판매가격대 {$form.product_price1} ~ {$form.product_price2} 검색정렬기준 {$form.order_by} 총 {$total_count} 개 의 상품이 검색되었습니다. {$sort_name} {$sort_name} 검색결과가 없습니다. 변수명설명{$image_url}상단 이미지{$self_link}검색URL{$title_text_display}타이틀 노출여부{$keyword_name}키워드명{$form.category_no}상품분류 ..

[카페24쇼핑몰] 최근 본 상품 목록 최근 본 상품 목록 이미지 상품명 옵션정보 판매가 주문 {$product_name} {$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$zoom_icon} {$product_name} {$product_name} {$option_name}: {$form.option} {$option_name}: {$form.option} {$add_option_name}: {$form.add_option} {$add_option_name}: {$form.add_option} {$product_custom}{$price} {$product_name} {$soldout_icon} {$recommend_icon} {$new_..