Category HTML
개요 HTML 태그 요소 정리를 하고, 기록을 위해서 작성을 해본다.태그를 많이 있어 각 사용 쓰임에 따라 정리를 따로 해봤다. HTML5 새로 포함된 태그 요약 HTML5에 새로 포함된 태그들이 있다. 이러한 HTML5 태그(요소)는 더 나은 문서 구조를 제공한다. 태그 설명 <article>… Continue Reading →
문제 IE10, IE11에서 셀럭트박스 선택을 하면 아무이상이 없는데 input 상자에 포커스 있는 상태에서 셀럭트박스를 다시 선택하면 텍스트상자 넓이가 커지는 현상이 있습니다. 이유는 placeholder로 인해서 일어나는 현상입니다.(IE10, IE11에서만 오류가 일어납니다.) 오류는 아래와 같습니다. 선택1선택2선택3 오류 체크 하셨습니까? 혹시 확인을 못하신 분들을… Continue Reading →
<input type=”email” name=”email> 이메일 유형은 아이폰 iOS와 안드로이드 브라우저 모두 사용자 정의 키보드가 나타난다. iOS키보드에서는 “@”와 “.”가 키보드 아래 추가 되었다. 안드로이드트에서는 표준 콤마 키가 스페이스바 왼쪽에 “@”키가 나타난다. <input type=”url” name=”url” /> iOS url 주소 키보드 input type url은… Continue Reading →
<strong>과 <b>를 사용할 때 웹에서 보여지는 것은 둘다 차이가 없다. 좀 더 깊게 들어갈 경우 웹표준 및 웹 접근성을 따지게 되면.. W3에서 <strong> 과 <em>에 대해서 설명하기를.. – 내용을 강조하기 위해서 <strong> 및 <em>을 사용한다. – 일반적으로 사용자에게 보여줄 때… Continue Reading →
HTML Character Entity Code Reference Table 보기 HTML Character Entity Code Reference Table Character Entity Description Displayed Character Entity Code Name Character Entity Code Name Displayed Character Entity Code Number Character Entity Code Number quotation mark, APL quote “… Continue Reading →
<script LANGUAGE=”JavaScript”> var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|iPad|Android|Windows CE|BlackBerry|Symbian |Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia |SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) location.href = “http://m.도메인 명”; </script> <head></head>안에 넣어주면된다.
디바이스 해상도 가로폭 명칭 480px 스마트폰 800px 태블릿 1024px 넷북 1600px 데스크톱 스마트폰 해상도 기종 해상도 웹 브라우저 해상도 아이폰4.4S 960 * 640 480 * 320 아어폰5 1136 * 640 568 * 320 갤럭시 S3 1280 * 720 640 *… Continue Reading →
아이폰 사파리에서 화면 회전시 폰트 사이즈 변경 되는 것이 있었다. 테스트 결과 <div>, <p>, <li>태그 등 다양하게 반응이 일어나는 것을 확인했다.사이즈 변경이 안되는 것도 있었다. 그래서 차이점이 뭘까 테스트 결과 높이값이 있는 곳에서는 사이즈 변경이 안되지만 높이값이 없는 곳에서는 사이즈… Continue Reading →
1. 콘텐츠 모델(Content Models) 기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록 요소(Block Level Element)로 구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것 끼리… Continue Reading →
HTML 태그 약자 설명 a href = Anchor(배에 달려있는 닻) Hypertext REFernce img = IMaGe(이미지) head = 머릿글 html = HyperText MarkupLanguage b = Bold(굵은글씨) i = Italic(이탤릭체.기울어진) u = Underline(밑줄) target = 표적 title = 표제 id = IDentification(신원확인)… Continue Reading →
웹접근성 데이터 테이블 지침서 표의 제목셀과 내용셀을 올바르게 짝짓기 표의 제목셀과 내용 셀은 짝짓기가 바르게 되어야 표를 표시할 수 없는 상황에서 표를 펼치거나 화면 낭독 프로그램 등에서 표를 순서대로 읽어줄 때에도 표가 제공하고자 하는 정보를 이해할 수 있음. 짝짓는 방법… Continue Reading →
웹접근성에 요즘 많은 이슈인데요 방송특집으로 웹접근성을 처음 다룬거 같은데요. 웹접근성에 관심이 많은 사람들에게는 좋은 자료라고 생각합니다. [1부] 스마트 세상의 장애인들 http://goo.gl/Sze1Pc [2부] 당신은 접근이 차단됐습니다 http://goo.gl/U6trE6 [3부] 스마트 접근권을 말한다 (토론) http://goo.gl/rp6RoL
모바일 웹에서 회전을 했을경우 새로고침 하는 소스이다. //회전시 새로고침 window.orientationchange = orientationEventHandler; window.addEventListener(‘orientationchange’, orientationEventHandler, false); function orientationEventHandler(){ var orientation = window.orientation; // 회전했을 경우 처리 if(orientation == 90 || orientation == -90){ location.reload(); } else { // 회전하지 않았을 경우… Continue Reading →
<!– 먼저 HTML5 재생 시도: XML을 제공할 경우, `controls` to `controls=”controls”` and autoplay 을 확장 –> <!– 경고: 포스터 속성을 이용 할 경우, iOS3에서는 재생이 되지 않는다. iOS4에서는 해결되었다. –> <video width=”640″ height=”360″ controls> <!– MP4 must be first for… Continue Reading →
시맨틱 마크업(Semantic Markup) : 컴퓨터가 웹 정보자원의 의미를 이해할 수 있도록 문서의 논리적인 구조를 묘사하는 것. 시맨틱 마크업을 통해 얻을 수 있는 장점 – 접근성이 좋아짐 – SEO(Search Engine Optimization) – 수정이 용이해짐 – 코드 가독성이 좋아짐 – 코드와… Continue Reading →
IE6 마우스 롤오버시 혹은 클릭이벤트로 이미지를 바꾼다거나 백그라운드 포지션이 변경이 될때 깜빡거리는 현상이 일어나는데.. CSS 나 javascript로 방지할 수 있다. CSS <style type=”text/css”> html { filter: expression(document.execCommand(“BackgroundImageCache”, false, true));} </style> Javascript *추천 <script type=”text/javascript”> try {document.execCommand(“BackgroundImageCache”,false,true);}catch(e){} </script>
1) HTML 2.0 표준 문서 형식 < !DOCTYPE html PUBLIC "=//IETF//DTD HTML 2.0//EN"> 2) HTML 3.2 표준 문서 형식 < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 3) HTML 4.01 표준 문서 형식 < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"... Continue Reading →