X

만성투덜로그


부트스트랩 3.X 사용(테스트환경 3.0.0)시 IE7에서 그리드 시스템의 경우 렌더링 오류가 나타난다.

IE8이상과 다른 종류의 브라우저에서는 정상적으로 표현이 되나 부트스트랩 3점대 이상에서만

이 현상이 나타나는데, 이는 부트스트랩 3점대 이상버전에서 IE7을 지원하지 않기 때문에

나타나는 현상이다. 이 경우에 사용하기 위한 플러그인이 개발되어 오픈소스로 공유되어

있는데, 다운로드 URL 및 사용법은 아래와 같다.

1. 다운로드 URL 및 사용법

2. BootStrap 3 for IE7을 사용하기 위한 추가 플러그인(BootStrap 3 for IE7을 사용해도 정상적으로
    레이아웃이 표현되지 않을 때 사용)
box-sizing-polyfill

3. 두 가지 플러그인의 실제 사용 예
 3.1 bootstrap-ie7.css파일을 다운로드 받아 서버의 특정한 위치에 업로드
 3.2 부트스트랩 사용페이지 HTML헤더에 아래와 같은 코드삽입

<!--[if lt IE 8]>
  <link href="/boot/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
3.3 boxsizing.htc 파일을 다운로드 받아 서버의 특정한 위치에 업로드
3.4 bootstrap-ie7.css파일 첫번째 라인의 마지막부분에 behavior:url 를 본인의 시스템에 맞게
     수정
content{box-sizing:border-box;behavior:url(/boot/js/boxsizing.htc)
3.5 서버의 DOCUMENT ROOT .htaccess파일에 아래와 같은 내용 추가
AddType text/x-component .htc

위와 같이 부트스트랩 3.X를 사용할 경우 IE7버전에 대한 렌더링 오류 처리를 할 수 있으며,

추가적으로 세세한 부분에 대해서는 각 사이트에 맞게 조정하여야 할 것으로 생각된다.

부트스트랩 플러그인 관련 정보는 아래의 사이트를 참조하였다.


Posted by 만성투덜

2014/02/10 16:43 2014/02/10 16:43

IE6~8에서 특정 HTML5 태그의 렌더링 문제가 발생한다. 이 렌더링 문제를 수정하기 위해

html5shiv를 이용한다. 또한 미디어쿼리도 정상적으로 지원하지 않는데 이 때문에 부트스트랩

사용시 네비게이션바(navbar)의 collapse가 정상적으로 표현되지 않는 문제가 발생한다. 

이 문제를 해결하기 위해서는 respond.js를 이용한다.

아래는 html5shiv, respond.js 사용 예와 관련 페이지다.


1. html5shiv, respond.js 사용 예
<!DOCTYPE html>
<html lang="ko">
<head>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
  <![endif]-->
</head>


2 .html5shiv 구글 다운로드 & 정보 페이지
https://code.google.com/p/html5shiv/


3. html5shiv 사용법 & 다운로드 & 개발관련 정보 페이지
https://github.com/aFarkas/html5shiv

4. respond.js사용법 & 다운로드 & 개발관련 정보 페이지
https://github.com/scottjehl/Respond

Posted by 만성투덜

2014/02/06 20:27 2014/02/06 20:27

HTML ELEMENT ATTRIBUTE 테스트

HTML ELEMENT의 attribute가 현재 브라우저에서 정상적으로 사용할 수 있는지 확인하는 스크립트.


function testAttribute(element, attribute)
{
  var test = document.createElement(element);

  if (attribute in test) {
    return true;
  } else {
    return false;
  }
}

if(testattribute('input', 'autofocus')) {
  //속성 사용 가능할 경우 액션
} else {
  //속성 사용 가능가능하지 않을 경우 액션
}

출처 -> http://winkey.tistory.com/540

Posted by 만성투덜

2014/01/22 13:02 2014/01/22 13:02
, , , , , ,
Response
받은 트랙백이 없고 , 댓글이 없습니다.
RSS :
http://www.nfriend.net/nf_tc/rss/response/71

모바일웹페이지를 제작 후 테스트를 하기 위해서 온갖 삽질을 다 하고 있는 요즘이다. 가장 좋은건 역시 안드로이드폰이나, 아이폰을 가지고 직접 테스트를 진행하는게 좋지만, 약정의 노예에 묶여... 회사에서 지원을 해주지 않아 에뮬레이터만 줄창 찾아 다닌 불쌍한 영혼이다.. 도대체 2주 전에 신청한 내 아이폰4는 언제 오는 거냐;;


각설하고, 안드로이드폰과 아이폰이 서로 사용하는 브라우져가 다르다 보니 정확하게 테스트 하려면 두가지 에뮬을 모두 사용하여야 한다. 한가지만 확인을 했더니, 안드로이드에서 다르게 표현이 되고 있다는 부분이 있다는 것을 알았다.

그럼, 아이폰 테스트 환경을 보면. 에뮬레이터로 테스트를 하는 방법이 있고, 사파리 브라우져로 테스트 하는 방법이 있다. 우선 에뮬레이터는 모비원이라는 아이폰용 에뮬레이터가 있으니 알아서 검색해서 사용하면 되고, 사라피 브라우져로 테스트 하 는 방법은 사파리브라우져에 보면 개발자용 메뉴를 사용할 수 있는데, 해당 메뉴에서 사용자 에이전트를 모바일 사파리로 바꾸고 브라우져 사이즈를 모바일 사이즈로 줄여서 사용하면 간단하다. 아주 간단하고 좋다.

두 번째, 안드로이도폰 테스트는 간단하면서도 짜증난다. 보통은 구글크롬에서 테스트를 하면 어지간해서는 문제가 나타나지 않는다. 하지만, 크롬브라우져에서도 다 확인이 되지는 않는다. 모바일 크롬을 사용해야 한다고 한느데, 개발에 땀나게 검색해도(검색 능력이 왜이러니;) 찾을 수가 없었다. 아무튼 이렇게해서 크롬브라우져에서 확인할수 없는 것들은 이클립스의 안드로이드 플러그인을 설치하여 확인할 수 있고(하지만 너무 무겁다. 너무! 이클립스 자체 설치용량만도 짜증날정도) 안드로이드 홈페이지에서  안드로이드개발용 SDK를 내려받아 설치하는 방법(설치용량 30메가 정도지만 해당 안드로이드 인스톨 패키지를 내려받는 시간또한 만만치 않고, 속도역시;;)이 있다.

정리 하면, 아이폰 모바일웹 테스트는 사파리브라우져 사용자 에이전트를 변경하여 테스트 하면 간단하고, 안드로이드폰용 모바일웹 테스트는 이클립스의 안드로이드 플러그인이나, 안드로이드 개발용 SDK를 설치하여 테스트 하면 된다. 아래는 다운로드 URL

1 사파리 브라우저 : http://www.apple.com/kr/safari/
2. 크롬라우저 : http://www.google.com/chrome?hl=ko
3. 이클립스 : http://www.eclipse.org/downloads/
4. 안드로이드 SDK : http://developer.android.com/sdk/index.html
5. 모비원 : http://www.genuitec.com/mobile/download.html

Posted by 만성투덜

2010/12/24 15:27 2010/12/24 15:27

처음엔 그랬다. div에 vertical-align:middle 적용하는 것이.. 레이어 내에서 특정 요소를 수직 정렬하는 것이 무엇이 어려울까... 문제일까.. 생각하고 잠시 작업하려다가 생각지도 못하게 몇일동안 흔히 말하는 X삽질 했다.. 그렇다.. 내가 잘못 생각하고 있었다.. 이건 꽤나 까다롭지만 알고보면 역시나 간단히 해결할 수도 있는 그런 문제였다. 문제는 내가 이게 굉장히 쉬울거라고 그냥 간단히 적용하면 될거라고 생각한  것에 있었지만 말이다. 간단히 적용방법을 설명하면 A라는 div가 있고 A의 하위에 B라는 div가 있을 때, A의 display 속성을 table로 B의 display속성을 display-cell로 설정하면 간단히 해결되는 문제였다. 본디 div를 사용하면 요소가 맨위부터 하나하나씩 차오르게(랜더링)되게 된다. 하지만 이것을 display속성을 사용해서 div를 table처럼 보여지게 하는 것이다. vertical-align 속성이 원래 block엘리먼트에서 사용할 수 없는데, table의 td에서는 사용할 수 있는 것을 이용하여 div의 display속성을 조정하여 원하고자 하는 화면을 구성할 수 있게 되는 것이다. 물론 혼자 해결한 건 아니고 검색 삽질도 좀 하다가 주오때 라는 분의 블로그를 참고하고서야 해결했다. 더 자세하고 상세한 내용은 링크된 글을 확인하면 될 것이다.

Posted by 만성투덜

2010/12/07 14:33 2010/12/07 14:33
, , , ,
Response
21 Trackbacks , 2 Comments
RSS :
http://www.nfriend.net/nf_tc/rss/response/19

HTML MAP태그 사용시 target문제

HTML 이미지맵 이용중 자바스크립트를 이용하여 새창을 띄울 때, 문제가 있다.

뭐 엄밀히 따지면 문제가 아니라 이미지맵을 지양해야 하는데, 굳이 작업의 편함을 이유로 통이미지를 사용하고, 또 이미지맵을 사용함으로서 생기는 문제라고 할 수 있다.

문제가 된 부분은 평소 간단한 하위창을 띄우기 위하여 만들어놓은 자바스크립트 함수를 이용려고 할 때 발생했다. 내가 평소에 사용하는 형식은 아래와 같은데, 여기서 href를 정상적인 URL로 작성해서 사용하면 아무 문제가 없으나, 아래와 같이 자바스크립트를 통하여 새창띄우는 컨트롤을 할 때 문제가 발생하였다. 정확히 확인한 바는 아니지만 area에서 targer를 지정하면 자바스크립트에서 지정한 새창띄우는 컨트롤이 작동하지 않고, 새창을 무조건 띄운 후, href의 값을 새창에 넘겨주게 되어 정상적인 결과를 보지 못하게 된다. 하여, 꼼수로 해결하였는데, target자체를 아예 주지 않으면 자바스크립트코드가 정상적으로 작동 된다는 것이다.

수정전 : <area shape="rect" coords="502,1379,639,1442" href="javascript:open_popup('URL', 'WINDOW_NAME, 'OPTION', 'ETC');" target="_blank" />

수정후 : <area shape="rect" coords="502,1379,639,1442" href="javascript:open_popup('URL', 'WINDOW_NAME, 'OPTION', 'ETC');" />

Posted by 만성투덜

2010/11/18 18:43 2010/11/18 18:43
, ,
Response
192 Trackbacks , 2 Comments
RSS :
http://www.nfriend.net/nf_tc/rss/response/15


블로그 이미지

- 만성투덜

Notices

Archives

Recent Trackbacks

Calendar

«   2017/06   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Site Stats

Total hits:
2077540
Today:
3283
Yesterday:
5797