4월 2014

2014년 4월 23일 수요일

[OSX][Mevericks] 802.1X 네트워크 프로파일 삭제 및 재설정 하기

고객사에 와서 로그인 아이디/패스워드를 받은다음에

랜선을 꼽고 네트워크에 연결을 하니 아이디/패스워드 입력하는 화면이 나온다.

일단 다른 분의 정보를 입력을 하고서 나중에 내 정보로 변경하려 했는데

어떻게 하는지 몰라서 시간을 들여 찾아봤다.

Launchpad => 기타 => 키체인 접근 으로 이동한다.

종류가 '802.1X Password' 인 키를 찾아서 삭제 한다.

네트워크에서 '연결 해제' 클릭.

다음과 같이 아이디/패스워드를 새로 설정할 수 있다.

2014년 4월 21일 월요일

[CSS][Android] OEM Browser 에서 flexbox(direction: column) 이 동작하지 않을 때..

나머지 빈영역 채우는 기능이 필요해서 CSS를 알아보던중 flexbox 라는 것을 알게되었다.
마치 Android 의 UI 구성을 할 때 wieght 와 같은 속성이랄까..

세로로 구성을 할 시 찾아보니 다음과 같이 하면 된다고 한다.

-webkit-flex-direction: column;
flex-direction: column;

그래서 다음과 같이 작업을 했다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #DFDFE0;
            display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
            display: -ms-flexbox;           /* TWEENER - IE 10 */
            display: -webkit-flex;          /* NEW - Chrome */
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        #detailMsgHeaderFake {
            width: 100%;
            height: 50px;
        }
        #detailMsgHeader {
            width: 100%;    height: 50px;
            position: absolute;
            top: 0;         left: 0;
            background-color: #FFFFFF;
            border: 1px solid #747474;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -webkit-box-shadow:0px 5px 20px silver;
            -moz-box-shadow:0px 5px 20px silver;
            box-shadow:0px 5px 20px silver;
        }
        #detailMsgContent {
            border: 0;
            width: 100%;
            -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex: 1;               /* OLD - Firefox 19- */
            -webkit-flex: 1;                /* Chrome */
            -ms-flex: 1;                    /* IE 10 */
            flex: 1;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        #detailMsgIframe {
            border: 0;
            width: 100%;
            height: 100%;
            border-left: 1px solid #747474;
            border-right: 1px solid #747474;
            border-bottom: 1px solid #747474;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body>
<div id="detailMsgHeaderFake"></div>
<div id="detailMsgHeader"></div>
<div id="detailMsgContent">
    <iframe id="detailMsgIframe" src="http://ko.learnlayout.com/"></iframe>
</div>
</body>
</html>

결과는?? 다음과 같이 나왔다.

Phone 환경:
Phone: LG-F220K (LG-GK)
OS ver: Android 4.1.2
Browser: OEM Browser (Chrome Browser 는 문제없음)

원래 의도했던 건 아래의 모습...

다음과 같이 CSS를 한줄 추가했다.
이전 버전의 방법이라고 한다. Link

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            background-color: #DFDFE0;
            display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
            display: -ms-flexbox;           /* TWEENER - IE 10 */
            display: -webkit-flex;          /* NEW - Chrome */
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
        }
        * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        #detailMsgHeaderFake {
            width: 100%;
            height: 50px;
        }
        #detailMsgHeader {
            width: 100%;    height: 50px;
            position: absolute;
            top: 0;         left: 0;
            background-color: #FFFFFF;
            border: 1px solid #747474;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            -webkit-box-shadow:0px 5px 20px silver;
            -moz-box-shadow:0px 5px 20px silver;
            box-shadow:0px 5px 20px silver;
        }
        #detailMsgContent {
            border: 0;
            width: 100%;
            -webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex: 1;               /* OLD - Firefox 19- */
            -webkit-flex: 1;                /* Chrome */
            -ms-flex: 1;                    /* IE 10 */
            flex: 1;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        #detailMsgIframe {
            border: 0;
            width: 100%;
            height: 100%;
            border-left: 1px solid #747474;
            border-right: 1px solid #747474;
            border-bottom: 1px solid #747474;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body>
<div id="detailMsgHeaderFake"></div>
<div id="detailMsgHeader"></div>
<div id="detailMsgContent">
    <iframe id="detailMsgIframe" src="http://ko.learnlayout.com/"></iframe>
</div>
</body>
</html>

PS.
위와 같이 작업을 하고도 결국 flexbox를 사용할 수 없었는데..
div 안에있는 iframe의 height 를 100%로 해도 정상적으로 적용되지 않았다.
div를 빼고 iframe에 flexbox를 적용해 봤지만 iframe에는 flexbox가 적용되지 않았다.
(위에 적힌 내 Android 단말에서..)

결국 다음과 같은 방법으로 다르게 작업을 했다.
[CSS] Div 동적으로 사이즈(Width, Height) 변환 (또는 비어있는 나머지 영역 채우기)

[CSS] Div 동적으로 사이즈(Width, Height) 변환 (또는 비어있는 나머지 영역 채우기)

Android 의 특성상 화면의 크기와 해상도가 모두 다르기 때문에
1004lucifer
Width, Height 길이를 다음과 같이 스크립트를 이용해서 처리를 했었다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #wrapperDiv {
            width: 100%;
            height: 200px;
            background-color: #C8BEB7;
        }
        #div1 {
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: #747474;
        }
        #div2 {
            display: inline-block;
            width: 500px;
            height: 100%;
            background-color: goldenrod;
        }
    </style>
    <script type="text/javascript">
        function div2Resize() {
            var div2 = document.getElementById('div2');
            div2.style.width = window.innerWidth - 200 + 'px';
        }
        window.onload = function() {
            div2Resize();

            // 브라우저 크기가 변할 시 동적으로 사이즈를 조절해야 하는경우
            window.addEventListener('resize', div2Resize);
        }
    </script>
</head>
<body>
<div id="wrapperDiv">
    <div id="div1">div1</div><!--
    --><div id="div2">div2</div>
</div>
</body>
</html>

실행 시 다음과 같다.
('Edit In JSFiddle' 을 누르면 브라우저를 동적으로 크기를 움직여서 자세히 확인이 가능하다.)

단순히 단일페이지에서 위의 기능을 사용하는데 문제는 없었는데
위의 페이지를 다른 페이지의 iframe 으로 넣으니 iframe 내의 페이지와 wrapper 페이지의
스크립트 실행 순서때문에 문제가 되었는지..
iframe 내의 페이지에서 settimeout 함수로 0.2초 정도 딜레이를 주면
문제가 발생하지는 않지만 로딩되는 순간 레이아웃이 잠시 깨져 보인다.
1004lucifer
결국 순수 CSS로 밖에 처리할 수 없는 상황..

비어있는 나머지 영역을 채우려고 찾아보니 CSS의 flex(flexbox) 방법이 있었다.
구형 브라우저에서는 작동하지 않지만 어차피 안드로이드, 아이폰에서 보여줄 예정이기에..
크게 신경쓰지 않았다.
(하지만 flex(flexbox)도 Android 의 크롬에서는 정상적으로 보여지나 OEM 브라우저에서는 정상적으로 보여지지 않아 사용할 수 없었다.)

이것저것 해보다가 다음과 같은 방법을 알아내었다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #wrapperDiv {
            position: relative;
            width: 100%;
            height: 200px;
            background-color: #C8BEB7;
        }
        #div1 {
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: #747474;
        }
        #div2 {
            display: inline-block;
            height: 100%;
            position: absolute;
            left: 200px; right: 0;
            font-size: 12pt;
            word-spacing: 1pt;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: goldenrod;
        }
    </style>
</head>
<body>
<div id="wrapperDiv">
    <div id="div1">div1</div><!--
    --><div id="div2">테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.테스트 글자 입니다.</div>
</div>
</body>
</html>

1004lucifer
실행 시 다음과 같다.
('Edit In JSFiddle' 을 누르면 브라우저를 동적으로 크기를 움직여서 자세히 확인이 가능하다.)

관련링크
[CSS] Div center 정렬방법
[CSS] Centering Percentage Width/Height Div Elements (크기가 동적인 Div 센터정렬)

2014년 4월 11일 금요일

[Android] HTML(javascript)로 앱(어플리케이션) 실행 또는 마켓 이동하는 기능

Intent Scheme 을 이용해 앱이 설치되어 있으면 앱이 구동되며
미설치 시 마켓으로 자동으로 이동되게...

다음을 호출하면 된다.

intent://default?version=1#Intent;scheme=${name};action=${action_name};category=${category_name (ex. android.intent.category.BROWSABLE)};package=${package_name}

EX)


<a href="intent://default?version=1#Intent;scheme=naversearchapp://search?qmenu=voicerecg&version=5;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.nhn.android.search;end">네이버앱 실행</a>

javascript 로 하는 방법은 뭐..


window.location.href = 'intent://default?version=1#Intent;scheme=naversearchapp://search?qmenu=voicerecg&version=5;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.nhn.android.search;end';

이런식으로 하면 되겠지??

2014년 4월 1일 화요일

[JSP] EL 사용 시 한글 파라미터 깨짐현상

EL을 이용해 넘어온 파라미터를 바로 화면에 뿌렸는데
한글로 넘어온 파라미터는 글자가 깨져서 화면에 보여졌다.

연동한 Tomcat 의 server.xml 을 수정하니 정상적으로 한글이 표시되었다.

경로는 다음과 같다.
$TOMCAT_HOME/conf/server.xml

다음과 같이 Connector 항목에 URIEncoding 속성을 추가하면 끝!!

[IntelliJ] Tomcat의 server.xml 파일 설정하기

JSP의 EL을 사용하다가 한글 파라미터가 깨져서 나오길래
server.xml 파일의 Connector 부분을 수정하려고

IntelliJ 의 설정을 만지작만지작 했는데..
찾을 수 없어서 구글링을 하니 Eclipse 와 같이 Extra Config 가 있는 것이 아니라
{TOMCAT_HOME}을 기본으로 참조하고 있다고 한다.

Eclipse 를 사용할때는 {TOMCAT_HOME}을 베이스로 설정이
따로 카피가 되어 각각의 프로젝트에 연결된 Tomcat의 세부설정을 각각 따로 했었지만

IntelliJ 에서는 모두 한 곳만 바라보기 때문에 Eclipse 와는 설정방법이 다르다.

결국에 $TOMCAT_HOME/conf/server.xml 파일을 그냥 vi 로 열어서 수정했다.ㅠ

피드 구독하기: 글 ( Atom )

Programming Log

Translate