신기한 웹 세상

Category

HTML

IE10, IE11 셀럭트박스 텍스트상자 커지는 현상

문제 IE10, IE11에서 셀럭트박스 선택을 하면 아무이상이 없는데 input 상자에 포커스 있는 상태에서 셀럭트박스를 다시 선택하면 텍스트상자 넓이가 커지는 현상이 있습니다. 이유는 placeholder로 인해서 일어나는 현상입니다.(IE10, IE11에서만 오류가 일어납니다.) 오류는 아래와 같습니다. 선택1선택2선택3 오류 체크 하셨습니까? 혹시 확인을 못하신 분들을… Continue Reading →

HTML <head> 태그를 알아보자

HTML을 사용하면서 <meta>태그를 사용하긴 하는데 대충 이해(자주 사용하는 요소만)만 하거나 아니면 전에 작성한 것을 CTRL+C, CTRL+V하기만 했었다. 그치만 근래 Open Graph도 많이 사용 되면서 궁금증이 생겨났고, 좀 더 깊이 그리고 자세히 알고 싶어졌다. 혹시 나와 같은 사람들이 분명히 있을 듯하여… Continue Reading →

footer 하단영역에 고정시키기

컨텐츠 영역 상관없이 footer가 하단에 붙게하려면 position:fixed를 하는 방법이 있지만 이건 하단고정이긴 한데.. 위에 뜬 형태이기도 하면서 컨텐츠가 없든 많던간에 원하는 모습이 보여지지 않는다. 그래서 방법이 아래와 같다. HTML 마크업: <div id=”wrap”> <div id=”header”>Header</div> <div id=”body”> <div id=”container”>Contents</div> </div> <div… Continue Reading →

모바일 브라우징 향상시키기 위해 HTML5의 입력 형식을 사용하기

<input type=”email” name=”email> 이메일 유형은 아이폰 iOS와 안드로이드 브라우저 모두 사용자 정의 키보드가 나타난다. iOS키보드에서는 “@”와 “.”가 키보드 아래 추가 되었다. 안드로이드트에서는 표준 콤마 키가 스페이스바 왼쪽에 “@”키가 나타난다. <input type=”url” name=”url” /> iOS url 주소 키보드 input type url은… Continue Reading →

HTML <strong> 과 <b> , <em>과 <i> 차이점

<strong>과 <b>를 사용할 때 웹에서 보여지는 것은 둘다 차이가 없다. 좀 더 깊게 들어갈 경우 웹표준 및 웹 접근성을 따지게 되면.. W3에서 <strong> 과 <em>에 대해서 설명하기를.. – 내용을 강조하기 위해서 <strong> 및 <em>을 사용한다. – 일반적으로 사용자에게 보여줄 때… Continue Reading →

HTML Character Entity Code Reference Table

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 →

HTML5 내용의 종류

1. 콘텐츠 모델(Content Models) 기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록 요소(Block Level Element)로 구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것 끼리… Continue Reading →

IE에서 호환성보기 모드 meta태그를 이용

X-UA-Compatible을 통해서 브라우저의 호환성 모드를 조정할 수 있습니다 IE=edge : 설치된 IE중 가장 최신 버전으로 렌더링에 사용 chrome=1 : 크롬이 설치되어있다면 IE에서도 크롬 렌더링을 사용. 그러나, chorme=1는 2014년 1월에 지원과 업데이트를 중단한다고 발표 했습니다. 참고 위키 문서 하지만, HTML5 DTD… Continue Reading →

IE에서 호환성보기 모드

X-UA-Compatible을 통해서 브라우저의 호환성 모드를 조정할 수 있습니다 IE=edge : 설치된 IE중 가장 최신 버전으로 렌더링에 사용 chrome=1 : 크롬이 설치되어있다면 IE에서도 크롬 렌더링을 사용. 그러나, chorme=1는 2014년 1월에 지원과 업데이트를 중단한다고 발표 했습니다. 참고 위키 문서 하지만, < !doctype... Continue Reading →

HTML 태그 약자 설명

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 →

웹접근성에 대한 CBS 라디오 특집 획 소리를 보여드립니다.

웹접근성에 요즘 많은 이슈인데요 방송특집으로 웹접근성을 처음 다룬거 같은데요. 웹접근성에 관심이 많은 사람들에게는 좋은 자료라고 생각합니다. [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 →

Video 태그 사용하기 (HTML5 비디오와 플래쉬 대체)

<!– 먼저 HTML5 재생 시도: XML을 제공할 경우, `controls` to `controls=”controls”` and autoplay 을 확장 –> <!– 경고: 포스터 속성을 이용 할 경우, iOS3에서는 재생이 되지 않는다. iOS4에서는 해결되었다. –> <video width=”640″ height=”360″ controls> <!– MP4 must be first for… Continue Reading →

HTML5 시맨틱(Semantic) 마크업

  시맨틱 마크업(Semantic Markup) : 컴퓨터가 웹 정보자원의 의미를 이해할 수 있도록 문서의 논리적인 구조를 묘사하는 것. 시맨틱 마크업을 통해 얻을 수 있는 장점 – 접근성이 좋아짐 – SEO(Search Engine Optimization) – 수정이 용이해짐 – 코드 가독성이 좋아짐 – 코드와… Continue Reading →


© 2017 신기한 웹 세상

Up ↑