감성 퍼블리셔 html,css

여러분들은 웹사이트/모바일 제작할때 제이쿼리나 CSS 보려고 F12를 통한 개발자 도구함을 통해 소스보기 해보신적 있으신가요? 저는 에이젼시 이전 멀티샵 쇼핑몰에서 근무할때 아주 일상이였습니다. 그때는 이렇다할 스킬과 웹표준에 대한 개념이 잡히기 전이라, 기획쪽에서 경쟁사 사이트에서 괜찮은 제이쿼리나 효과들이 있다면 바로 적용하길 바랬거든요..ㅎㅎ 덕분에 능력치에 버거운 경우도 많았지만 그런 연습기간이 있었기에 약간의 요령도 생겼던 것 같습니다.ㅎㅎ 이번에 단순한 태그 및 자바스크립트는 이런 소스보기를 방지하기 위한 태그입니다. 물론 100% 막지는 못하지만 어느정도의 간섭을 막아주죠~ 하단 자바스크립트 소스를 간단하게 연동하여 사용가능합니다. var ns = (document.layers)?true:f..

[Mobile] 모바일 화면 미리보기 Daum Troy plug-in 안녕하세요. 오랜만에 글 남깁니다. 요새 에이전시에서 퍼블리싱을 하다가 친한형님과 창업을 하게 되어 정신없이 지내고 있네요^^ 덕분에 퍼블리싱은 많이는 못하지만 간간히 모바일, 웹사이트 유지보수 개념으로 만지고 있네요.. 관련해서 제가 한창 퍼블리싱 할적에 도움이 많이 되었던 사이트 하나를 소개하려고 합니다. http://troy.labs.daum.net/ 이구요. 다음에서 제공하는 모바일별 화면 미리보기 플러그인입니다. 익스플로어 보단, 크롬, 사파리 등으로 확인해보심을 권장합니다.^^ 모바일 퍼블리싱을 하고 모바일 종류별로 체크를 하고 싶은데 환경적으로 어려움이 있을때 이 사이트를 이용하여 간략하게 체크할 수 있습니다. 물론 직접 ..

웹접근성을 통과하기 위해선 마우스를 사용하지 않고, 키보드 tab키만으로도 모든 객체에 접근이 가능해야만 한다. 이에 tab키에 의한 동작이 순서에 따라 이동되지 않을때, 페이지가 로딩될 시 tabindex를 적용하여 순차적인 이동이 가능하도록 하는 태그이다. tabindex=”1″ 문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus=”autofocus” 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요. tabindex=”0″ 키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받..

웹표준이 기본틀이 되면서 홈페이지 만들시 꼭 넣어줘야 할 skip_nav css를 모두 제거 한 후 보면 맨 위에 위치하게 되는 버튼, 웹표준으로 바뀌면서 시각장애인들이 음성변환기로 웹페이지를 접하게 되면서 음성변환기가 위에서 부터 차례대로 읽어준다. 이부분에서 많은양을 순차적으로 이동하기 때문에, 기본적인 점프개념으로 이동시키기 위한 역할. 일반적으로는 상단메뉴인(gnb)와 내용(container)쪽으로 2개를 잡아주며, 웹사이트 성격에 따라 주요 컨텐츠에 쪽에 1개를 더 잡아는주는 경우가 있다. 이 skip navi는 코딩에 스타일로 감춰져 있는 방법과, 탭키를 눌렀을시 관련내용의 네비바가 생성되는 방법으로 나누어져 있다. (*하단 이미지참조) skip_navi 관련 태그 ===============..

border 외곽선이 아닌, 내부에 적용되는 방법, box-sizing:border-box 가끔 가로값에 맞춰 작업을 하다보면은 border의 픽셀 단위때문에 어긋나는 경우가 종종있죠.. 외곽선으로 먹히지 않고,내부에 적용할 수 없을까...? 라는 고충을 많이 느꼈을 것이라고 봅니다. 이번에 보여드릴 css는 이런 문제점을 해결하기 위하여 완성된 태그입니다!!똑같은 border 값에도 외곽이 아닌 내부로 먹히게끔 하는 것!!! 참고로 영역 외곽이 아닌 내부에 라인이 들어가는 이 css는 ie는 8버전부터 지원한다고 합니다.이점 숙지하시고, 활용하심이 좋을듯 싶습니다. 모바일이 가변형이다 보니, 외곽선 값을 안먹히게 하여 레이아웃을 잡는데 참으로 효율적인 태그이기도 하지요!! 우선 예로 .box { wid..

meta 태그에는 name, content, http-equiv 3가지 속성이 있다. //홈페이지 주제 //제목 //키워드 //요약설명 //제작자 //제작사 //웹책임자 //카테고리위치,분류 //제작도구 //메일주소 //메일주소 //파일이름 //제작일 //제작일 //위치 //배포자 //저작권 //이 문서도 긁어가고 링크된 문서도 긁어감 //이 문서는 긁어가지 말고 링크된 문서만 긁어감 //이 문서는 긁어가고 링크는 무시함 //이 문서도 긁지 않고 링크도 무시함 //웹문서 언어 설정 //그림위에 마우스 오버시 이미지 관련 툴바 숨김 //60초 마다 새로고침

[jQuery] Accordion Gallery 아코디언 제이쿼리 모음 zAccordion zAccordion is an easily customizable horizontal jQuery slider with bouncing animation effect that does the job of giving you a nice image display slider. MORE INFO | DEMO – by Nate Armagost (Free Plugin/Tutorial) Classic Accordion Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. You have the option to use X..

DTD(Document Type Definition)란 무엇인가? 버전 : 년도HTML : 1991HTML+ : 1993HTML 2.0 : 1995HTML 3.2 : 1997HTML 4.01 : 1999XHTML : 2000HTML5 : 2012 DTD(Document Type Definition)란 HTML 문서의 첫 줄에 ''로 시작하는 문법을 이야기 하며작성된 내용이 HTML 표준에 의거하여 작성되었음을 웹 브라우저에게 알려주는 것선언을 하지 않아도 대부분의 웹 브라우저는 알아서 태그를 해석하여 보여줌특별히 웹 브라우저가 자체적인 계산에 의한 것이 아니라, W3C에서 제공한 HTML 표준에 따라 보여주도록 권고하기 위함HTML4는 다음과 같이 세가지 DTD를 지원 Strict DTD(엄격모드)엄격한..