'Tip/Javascript'에 해당하는 글 4건

IE 조건부 주석

Tip/Javascript 2013. 4. 10. 23:47

조건부 주석은 HTML 소스중 인터넷 익스플로러(ie)에서 해석되는 조건문 입니다.
구 버전의 ie에서 제대로 작동하지 않는 문제를 해결할 수 있습니다.
하지만 ie10 의 표준 모드에서 조건부 주석은 지원되지 않고, JScript 조건부 주석은 지원됩니다.

 

<!--[if condition]>
HTML
<![endif]-->

 

위와 같은 구문으로 조건부 주석을 사용할 수 있으며, 조건(condition)을 만족할 경우 HTML을 렌더링하게 됩니다.
조건부 주석을 지원하지 않는 브라우저에서는 위 구문을 일반 주석문으로만 해석합니다.

 

condition에 사용되는 기호는 다음과 같습니다.
!(아니다), lt(작다), lte(작거나 같다), gt(크다), gte(크거나 같다), ()(우선처리), &(그리고), |(또는)

 

 

condition 예) 

 [if !ie]  ie 가 아니라면
 [if lt ie 8]  ie 8 이전버전 이라면
 [if lte ie 8]  ie 8 이거나 이전버전 이라면
 [if gt ie 8]  ie 8 이후버전 이라면
 [if gte ie 8]  ie 8 이거나 이후버전 이라면
 [If !(ie 8)]  ie 8 이 아니라면
 [if (gt ie 6)&(lt ie 9)]  ie 6 이후버전 이고 ie 9 이전버전 이라면
 [if (ie 6)|(ie 8)]  ie 6 이거나 ie 8 이라면

 

이 조건부 주석을 주석 처리하는 브라우저에 대하여 마크업을 넣으려면 다음과 같이 할 수 있습니다.

 

<!--[if !ie]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->

 

위와 같이 조건부 주석 라인을 주석처리 시키면 ie가 아닌 브라우저에 대한 css 를 적용할 수 있습니다.

 

만약 ie도 아니고 ie 9 이전 버전인 브라우저에 대하여 아래와 같이할 수 있습니다.

 

<!--[if gt ie 9]><!-->
<link href="non-ie9.css" rel="stylesheet">
<!--<![endif]-->

 

첫째줄 마지막을 ie가 아닌 타브라우저를 위해 <!--> 이 아닌 --> 로 입력한다면,
ie 9 이전 버전들은 <!--[if gt ie 9]> 구문이 끝나는 즉시 렌더링이 시작되므로 --> 부분이 브라우저에 표시될 것입니다.
이 부분을 주석시키기 위하여 --> 부분을 <!--> 로 변경한 것 입니다.

 

 

 

JScript 조건부 주석

 

JScript 안에서 사용할 수 있는 조건부 주석입니다.
ie 브라우저의 JScript engine 버전을 알 수 있는 방법입니다.
타 브라우저에 대한 처리도 가능합니다.

 

<script>
/*@cc_on
    @if (@_jscript_version >= 5)
        document.write("JScript Version 5.0 or better.<BR>");
    @else @*/
        document.write("You need a more recent script engine.<BR>");
    /*@end @*/
</script>

 

Jscript 안에서 /* */ 는 주석입니다.
@cc_on 은 조건부 주석의 시작을 나타냅니다.
@if, @elif, @else, @end 등의 조건문을 이용할 수 있습니다.
@_jscript_version 은 브라우저에 내장된 JScript engine 버전, @_win32는 32비트인지를 나타냅니다.

 

우리는 ie를 위하여 참 많은 노력이 필요합니다...
저작자표시
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

Google Maps API

Tip/Javascript 2013. 1. 6. 02:30

웹사이트 내에 '오시는길' 등의 특정 위치를 나타낼 때 보기 쉽게 이미지로 잘 표현할 수도 있지만,
특정 지도 서비스 업체의 API 를 이용하는 것도 좋은 방법입니다.

 

구글맵 API 를 이용하여 웹사이트에 위치를 표현하는 방법입니다.
'구글맵 API' - https://developers.google.com/maps/?hl=ko 를 검색해 들어가면
JavaScript, Flash, 3D, Static 기반의 다양한 API를 볼 수 있습니다.

 

Maps JavaScript API(V3) 를 사용해 봤습니다.
Guide 를 활용하여 본인이 원하는 기능들을 구현하면 되겠습니다.

 

 

1. 기본 환경 세팅
- 기본적인 폼 구성입니다.

 

// HTML5 로 선언해야 합니다.
<!DOCTYPE html>
<html>
<head>

// Google map API를 호출합니다.
// 사용자 위치 확인 사용 여부를 sensor 값으로 true, false 중 입력합니다.
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    // 지도 사용 스크립트
}
</script>
</head>

// onload 등의 이벤트로 initialize 함수를 페이지 로딩시 호출합니다.
<body onload="initialize()">

// 지도 영역을 생성합니다.
<div id="map_canvas" style="width:600px; height:400px;"></div>

</body>
</html>

 

 

2. 지도 사용 스크립트 작성
- 지도가 불려질 함수를 작성합니다.

 

function initialize() {

    // 지도 중앙에 표시될 위치의 좌표를 입력. (위도, 경도)
    var centerLating = new google.maps.LatLng(-34.397, 150.644);

    // 줌 설정. 최대 축소값(1), 최대 확대값(18)
    // 중앙에 위치할 좌표 설정.
    // Maptype : ROADMAP 은 입반적인 2D 지도입니다. (위성:SATELLITE, HYBRID, 지형:TERRAIN 등이 있습니다.)
    var myOptions = {
        zoom: 8,
        center: centerLating,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // map_canvas 에 지도를 출력합니다.
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

 

 

3. 특정 지역 좌표값 검색
- 위의 스크립트를 작성하고 나면 임의의 좌표를 입력해서 지도가 출력되는 걸 확인할 수 있습니다.
- 이제 웹페이지에 표시할 지역의 좌표값(위도,경도)을 검색하여 2번 스크립트의 LatLng 함수에 입력합니다.
- 주소를 입력해서 위도, 경도를 반환하는 GeoCoding 이라는 서비스를 구축하여 경도, 위도를 알아내는 것보다,
포털에서 '위도 경도 검색' 으로 이미 구축된 GeoCoding 등의 서비스를 이용하여 경도, 위도를 알아내는게 편하네요.

국기원의 위도, 경도는 37.50191265817288, 127.03029334545135 입니다.
LatLng 메소드에 국기원의 좌표를 입력하면 다음과 같은 지도가 출력됩니다.

 

 

 

4. 마커 표시
- 찾는 위치가 국기원이라는 표시를 위해 마커와 텍스트를 입력합니다.
- 강남역과 역삼역 사이에 있다는 것을 인식시키기 위해 지도 중앙 좌표를 살짝 조절해 줍니다.

 

function initialize() {

    // centerLatlng : 지도 중앙
    // buildingLatlng : 국기원 좌표(마커)
    var buildingLatlng = new google.maps.LatLng(37.50191265817288, 127.03029334545135);
    var centerLatlng   = new google.maps.LatLng(37.500372053558664, 127.03187584877014);

    var myOptions = {
        zoom: 8,
        center: centerLating,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // marker 와 title 표시
    var marker = new google.maps.Marker({
        position: buildingLatlng,
        map: map,
        title:"국기원"
    });
}

 

 

5. 완성 소스

 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var buildingLatlng = new google.maps.LatLng(37.50191265817288, 127.03029334545135);
    var centerLatlng   = new google.maps.LatLng(37.500372053558664, 127.03187584877014);
    var myOptions = {
        zoom: 16,
        center: centerLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: buildingLatlng,
        map: map,
        title:"국기원"
    });
}
</script>
</head>
<body>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px; border:1px solid #ddd""></div>
</body>
</html>

 

 

 

이 외에도,
동서남북의 위치를 각도로 바꿀 수 있음,
마커, 혹은 아이콘을 여러개 놓을 수 있음,
여러 형태(원,사각형,폴리곤...)의 영역 지정 가능,
교통정보, 자전거 경로 등의 레이어 추가 가능,
경로 설정 등 구글맵 서비스와 거의 동일한 기능들을 모두 이용할 수 있습니다.

저작자표시
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

팝업 화면 중앙 배치

Tip/Javascript 2012. 11. 27. 16:55

 

팝업 띄울 때, 모니터 중앙에 오도록 배치하기.
* 듀얼 모니터 사용시에도 해당 모니터 중앙에 오도록 배치

 

# vi popup.html

<html>
<head>
<script type="text/javascript">
function move_popup() {

    // window.innerWidth(Height) 를 사용하여 팝업 사이즈를 지정할 수도 있지만
    // 크롬에서 위 코드가 정상 작동하지 않을 시 직접 입력.
    var w = 800;
    var h = 600;

    // 팝업을 중앙으로 옮기기 위한 좌표 구하기
    var res_w = ( screen.availWidth - w ) / 2;
    var res_h = ( screen.availHeight - h ) / 2;

    // 팝업을 일단 모니터 좌측에 붙임.
    window.moveTo( 0, res_h );

    // 듀얼 모니터 사용시 팝업의 window.screenLeft 반환값은, 
    // 좌측 모니터에서는 0, 우측 모니터에서 좌측 모니터 가로길이가 계산되므로
    // 우측 모니터에서는 좌측 모니터 가로길이를 추가 계산.
    if ( window.screenLeft > window.screen.width ) {
        res_w = window.screen.width + res_w;
    }

    // 팝업을 중앙으로 재배치
    window.moveTo( res_w, res_h );
}
</script>

</head>
<body onload="move_popup()"><!-- call function -->

저작자표시
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,

Popup Layer

Tip/Javascript 2012. 9. 6. 13:56

 

 

경고창 혹은 팝업창을 대신하여 div를 이용한 popup layer.
페이지마다 모든 컨텐츠를 가릴 수 있는 div를 생성하기 위해 자바스크립트를 작성합니다.

 

var box_height = $('#container').height();
$('#black_layer).height( box_height );

 

#container 는 페이지의 모든 컨텐츠가 들어가 있는 div 엘리먼트.
이러면 popup layer 주변의 검은 배경이 페이지에 꽉 차서 스크롤을 내려도
페이지 컨텐츠의 모든 내용이 가려져야 하는데, Chrome 님께서 오작동을 하시네...
물론 뭔가 빠져서 정상 작동을 하는 것이겠지만.

 

브라우저별로 $('#container').height() 의 크기가 다르다는 불편한 진실.
ie : 1202px, chrome : 1064px 어쩔~^^;

 

$(window).load(function(){
...
});

 

로 감싸고 해결했습니다.
window.onload 이벤트에 넣어야 정상적인 세로 길이를 가져옵니다. $(document).ready() 도 가능하겠네요.
암튼 해결~ 

저작자표시
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,