넥서스4 안드로이드 5.0 롤리팝 업데이트 – 식겁했던 업데이트

by H.F. Kais | 2014. 12. 13. | 0 comments

관련 글 : 넥서스7 (2013) 안드로이드 5.0 롤리팝 업데이트 느낌 및 변화
넥서스7 (2013) 안드로이드 롤리팝 5.0.1 업데이트 - 동영상 재생 문제 해결?

 

구글 계정 오류로 정상적인 사용 불가… 추가 업데이트가 나와도 설치 못할 지경
공장초기화라도 해야 하나 식겁… 겨우겨우 안전모드를 통해 해결

 

태블릿과 달리 휴대폰은 갑자기 뭔가 큰 변화를 주기가 꺼려집니다. 대규모 시스템 업데이트를 한다던가, 여러 가지 설정을 왕창 바꾸는 것에 조심스럽죠. 아무래도 기본적으로 '전화기' 이고, 늘 갖고 다니는 것이기 때문에 더욱 그렇습니다. 일상생활에서 휴대폰에 의지하는 부분이 큰 이유도 있겠죠.

넥서스4에 안드로이드 5.0 롤리팝 OTA가 왔지만 한동안 내버려 둔 이유가 그것입니다. 휴대폰이 제대로 작동하지 않을 경우 내 생활에 미칠 영향이 꽤 크다는 거죠. 아침에 기상알람이 울리지 않는다면? 서울버스 앱을 쓸 수 없다면? 업무용 OTP가 작동하지 않는다면? 연락용 메신저가 먹통이라면? 아니 그 전에, 전화도 문자도 안 된다면? 상상만 해도 끔찍하겠죠.


전체 내용 보기

jQuery와 CSS를 이용한 간단한 팝업 레이어

by H.F. Kais | 2014. 12. 11. | 0 comments

HTML 문서 내에서 팝업 레이어를 띄울 때 여러 가지 방법을 쓸 수 있다. 자바스크립트로 일일이 만들 수도 있고, jQuery UI나 jQuery Tools 같은 통합 라이브러리나 전용 플러그인도 많다. 효과나 기능도 무척 다양해서 입맛대로 골라 쓰면 된다.

내 경우엔 jQuery Tools를 애용했었는데, 가장 처음 접한 라이브러리이기도 하고 필요로 하는 기능들이 대부분 구현되어 있었기 때문이다. 특히 홈페이지의 데모와 코드설명이 쉽고 간단하게 되어있어 많은 도움이 되었다.

최근에는 정말 간단한 팝업 레이어 기능만 필요하기 때문에 그냥 jQuery로 직접 레이어를 열고 닫는 식으로 쓰고 있다. 정리와 기록 차원에서 적어둔다.

 

HTML

<div id="overlay_t"></div>
<div id="popup_layer">팝업레이어의 내용</div>

#overlay_t 는 팝업 레이어가 열릴 때 배경으로 열리는 반투명 레이어다. 기존 문서를 반쯤 어둡게/밝게 처리해서 팝업 레이어의 주목도를 높인다.

#popup_layer 안에는 팝업 레이어의 내용을 넣는다.

 

CSS

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

#popup_layer { width:400px; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top:260px; left:50%; margin-left:-200px; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}

#overlay_t 는 주로 반투명 검정색으로 많이 쓰기 때문에 배경색과 투명도를 지정해야 한다. z-index는 팝업레이어보다 한 단계 낮게 설정.

#popup_layer 는 대강 모양만 잡아주자. 배경색 지정을 까먹으면 레이어 안의 요소들만 둥둥 떠다니게 되니까 주의. 높이값(top)은 jQuery로 잡을테니 대충 넣자.

 

jQuery

$( document ).ready(function() {
       $('.trigger').click(function(){
        $('#popup_layer, #overlay_t').show();
        $('#popup_layer').css("top", Math.max(0, $(window).scrollTop() + 100) + "px");
        // $('#popup_layer').css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    });
    $('#overlay_t, .close').click(function(e){
        e.preventDefault();
        $('#popup_layer, #overlay_t').hide();
    });
});

트리거를 클릭하면 팝업 레이어와 반투명 배경을 보이게 한다(show). 팝업 레이어의 높이값은 '현재 보고있는 화면에서 상단 100px 아래'에 위치하도록 설정했다. 주석 처리된 부분은 '현재 보고있는 화면 높이값에서 레이어의 높이값/2 한 값을 뺀' 위치에 오도록 설정한 것이다. 만약 현재 보고있는 화면의 위치와 상관없이 HTML 문서 전체 높이값을 기준으로 레이어를 띄운다면, 그냥 CSS에서 top 값을 지정해주면 된다.

팝업 레이어의 뒤에 위치한 반투명 레이어를 클릭하면 반투명 레이어와 팝업 레이어가 둘 다 사라지도록 설정했다. .close라는 클래스를 가진 버튼을 클릭해도 닫히도록 했다. 팝업 레이어 안에 '닫기'나 'x' 란 이름으로 닫기 버튼을 만들어두면 된다.

 

데모

트리거

 

 

 


전체 내용 보기

넥서스7 (2013) 안드로이드 롤리팝 5.0.1 업데이트 - 동영상 재생 문제 해결?

by H.F. Kais | 2014. 12. 7. | 0 comments

관련 글 : 넥서스7 (2013) 안드로이드 5.0 롤리팝 업데이트 느낌 및 변화

지난 12월 3일, 구글 안드로이드 개발자 홈페이지의 '넥서스 기기용 팩토리 이미지' 웹페이지에 롤리팝 5.0.1 업데이트가 올라왔습니다. 전체 넥서스 기기에 적용된 건 아니고 넥서스9(WiFi), 넥서스7(2013, WiFi), 넥서스10 모델에만 올라왔네요.

버전 5.0.1, 빌드번호는 LRX22C로 셋 다 동일합니다. 마침 얼마 전 넥서스7 2세대를 롤리팝으로 업데이트한 뒤 자잘한 문제에 시달렸던 터라, 새 업데이트가 무척 기대되었습니다.

 


전체 내용 보기