odada

See the Pen How TO - Resize Header on Scroll by miae (@flato) on CodePen.

Apple은 제품 페이지의 세련된 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이보기에 들어가고, MacBook은 접 히고 iPhone은 회전하면서 하드웨어를 과시하고 소프트웨어를 시연하며 제품 사용 방식에 대한 대화식 이야기를 들려줍니다. iPad Pro의 모바일 웹 경험 비디오를 확인하십시오. 출처 : Twitter 당신이 보는 많은 효과는 HTML과 CSS에서만 만들어지지 않습니다. 그러면 무엇을 물어? 글쎄, 이해하기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 요소를 지나칠 수없는 경우가 많기 때문에 항상 답을 알 수있는 것은 아닙니다 . 이러한 효과 중 하나를 자세히 살펴보고 어떻게 만들어 졌는지 확인하여 자체 프로젝트에서 이러한 마법 효과 중..

ifuwanna.tistory.com/261 [MacOS] 파인더에서 터미널 바로 열기 맥북이나 아이맥같은 Mac OS 환경에서는 윈도우 탐색기를 대체하는 파인더(Finder) 앱을 사용하는데 이때 특정 폴더에서 직접 콘솔 명령어를 바로 사용하고 싶을 때가 있습니다. 예를 들어 저 같은 ifuwanna.tistory.com

클릭시 $('.depth1 > li > a').click(function(){ if ($(this).parent().hasClass('on') === false) { $('.depth1 > li').removeClass('on'); $(this).parent().addClass('on'); } else if ($(this).parent().hasClass('on') === true) { $(this).parent().removeClass('on'); } }) 마우스 오버시 $('.depth1 > li > a').mouseenter(function () { if ($(this).not($(this).hasClass('on'))) { $('nav li ul').slideUp(); $(this).next()...

웹표준관련 업무수행시 체크해야하는 확인 사항들로 내부체크리스트와 외주 대행업무 전달시 함께 지켜져야 하는 CP가이드의 체크리스트가 통합적으로 정리되어 있습니다. 체크리스트 표 항목 CP 내부 확인 비고 웹표준 (필수) HTML validator 통과했는가? O O (필수) CSS validator 통과했는가? O O 코딩컨벤션 (필수) Cross Browsing 되는가? Web(Window) IE11 O O IE10 O O IE9 O O IE8 O O FF/Chrome/Safari/Opera (최신) O O Web(Mac) FF/Chrome/Safari/Opera (최신) O O Mobile(Android) Android 4.1 O O Android 4.3 O O Android 4.2 O O Androi..

이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표 종류 PC web Mobile web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GIF를 사용한다. JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용한다. JPG로 저장 시 압축률 관리 - 일반 저장 시(File->Save) : 압축률 10/12 이상으로 저장할 것. - Save for web 기준 : Original 혹은 JPG Quali..

다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 본 Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. 먼저 Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. 그리고 Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다. prefix/subfix/suffix 정의 후보자 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다. ex) tab_notice, tbl_product..

IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고자 한다. Daum은 이러한 여러 가지 기법 중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다. Phark Method (권장) 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 CSS button {display:block;width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repe..

CSS 가이드 CSS 데이터를 로딩할 경우 @import 방식은 사용하지 않는다. (일부 브라우저에서 이미지 로딩 후 적용되기 때문에) external방식에서는 charset 표기한다. @charset "utf-8" CSS 데이터는 섹션의 경우 head 상단에 공통부분(common.css)과 콘텐츠부분(해당서비스.css)으로, 간단한 콘텐츠의 경우 하나의 css 파일로 로딩될 수 있도록 권장한다. z-index 값 적용 가이드 z-index 수치 간격은 10단위로 적용 스니펫에서는 z-index를 기본값(10)으로 지정하고, 해당 서비스마다 z-index를 재정의해서 사용 페이지 단위에서 1000을 넘는 경우는 발생하지 않음 팝업레이어의 경우는 1000부터 시작 전사공통인 서제스트인 경우는 9999로 유..

전역 구조화 Element class Attribute 사용은 하지 않는다.XHTML dtd 사용시에는 다음과 같이 XML namespace 및 lang attribute를 선언해준다 meta, title, link, style, script 순으로 Element 를 선언한다 문서의 기본 인코딩 및 뷰포트 등을 선언한다. (뷰포트는 모바일 서비스의 경우에만 선언)현재 페이지의 제목을 선언한다.rel, type, href 순서로 attribute를 선언한다 하위에 선언이 되는 CSS는 Element보다 1depth 들여쓴다 body Element에는 다른 attribute를 사용하지 않는 것을 원칙으로 한다. 제목, 문단, 구분선 Element Heading 의미 : HTML 구조상 문서 내부의 컨텐츠 제..