'분류 전체보기'에 해당되는 글 214건

- Git Branch 생성.

명령어 : git checkout -b 브런치이름

예제 ) git checkout -b test1

- Git Branch 조회 및 현재 위치

명령어 : git branch / git branch -a

아스키(*)가 있는 곳이 현재 가르키고 있는 branch 

 -a 옵션으로 모든 branch 확인 

- Git Branch 위치 변경

명령어 : git checkout 변경할 브런치

t1 브런치에서 t2 브런치 변경을 할 수 있다

예제) git checkout t2

- Git Branch 병합( fast-forward (빨리감기) 병합)

명령어 : git merge 병합할 branch

앞서 나간 branch로 병합을 한다. 아래의 예는 t2 위치로  t3를 병합시킨다.

예제) git merge t2

- Git Branch 삭제

명령어 : git branch -d 브런치 이름

브런치를 삭제한다.

예제) git merge t3

- 사진 아이콘 사용하기 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  

- HTML 요소 

  <!--  바운스할 요소 -->
<div class="bounce">
    <i class="fa fa-camera-retro fa-lg"></i>
  </div>

- CSS 요소

div {
      margin-top: 100px;
      margin-left: 100px;
    }
    
    /* 0.5 초씩 바운스 효과 */
    .bounce { 
      position: relative;
      /* 파폭 */
      -moz-animation: bounce 0.5s infinite linear;
      /* 크롬 */
      -webkit-animation: bounce 0.5s infinite linear;
      -o-animation: bounce 0.5s infinite linear;
      animation: bounce 0.5s infinite linear;
    }

    /* 
      바운스의 높이 
      0% 일 때, 0px 
      50%일 때, -5px 
      70%일 때, -50px
      100%일 때, 0px 
      */
    @-webkit-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-moz-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-o-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @-ms-keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    @keyframes bounce {
      0% {
        top: 0;
      }

      50% {
        top: -5px;
      }

      70% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

- 결과화면

See the Pen bounce by Nami (@NamuNami) on CodePen.

가장 아래의 결과화면이 있습니다. 

head 에서 jquery 파일을 불러옵니다.

cdn으로 불러오실 경우 3번째 줄을 사용하세요.

<script src="js/jquery-1.12.3.js"></script>
<!-- 또는 -->
<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

- body 부분

 <div id=wrap>
    <div>
      <!-- 버튼을 실행시 이전, 다음으로 움직이다 -->
      <button class="prev"> 이전</button>
      <button class="next"> 다음</button>
    </div>
    <!-- 움직일 이미지들 -->
    <div class=imgBox style="width:500px;height:500px;">
      <!-- free url 사진 -->
      <img class="img on" src="https://images.unsplash.com/photo-1556034910-07855ebf6606?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      <img class="img" src="https://images.unsplash.com/photo-1556241298-fce5ee86ea48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      <img class="img" src="https://images.unsplash.com/photo-1556032743-3a694170ef94?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
    </div>
  </div>

- CSS 부분

 .img {
      position: absolute;
      width:500px;
      height:500px;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
    }

    .img:first-child {
      /* display: block; */
      opacity: 1;
    }

    #wrap {
      padding: 20px;
    }

    div {
      margin: 5px 0px
    }

- JavaScript 부분

$(".prev").on("click", function (e) {
      e.preventDefault();

      // 이미지 현재의 위치
      var imgOn = $(".imgBox").find(".on").index();
      // 이미지 총 개수 
      var imgLen = $(".imgBox .img").length;
      console.log(imgOn)
      
      // imgBox안의 img 중 imgOn 번째의 on 클래스 삭제 
      $(".imgBox .img").eq(imgOn).removeClass("on");
      // imgBox안의 img 중 imgOn 번째 숨기기 
      $(".imgBox .img").eq(imgOn).css("opacity", 0);
      
      //  이전의 위치로 돌아가야함으로
      imgOn = imgOn -1;

      if( imgOn < 0 ){
        // 돌아가 위치가 -1일 경우 
        // 이미지의 마지막으로 돌아간다
        $(".imgBox .img").eq(imgLen -1).css("opacity", 1);
        $(".imgBox .img").eq(imgLen -1).addClass("on");
      }else{
        // 돌아갈 위치가 -1이 아닌 경우
        $(".imgBox .img").eq(imgOn).css("opacity", 1);
        $(".imgBox .img").eq(imgOn).addClass("on");
      }

    });

    $(".next").on("click", function (e) {
      e.preventDefault();
      // 위에 동일 
      var imgOn = $(".imgBox").find(".on").index();
      var imgLen = $(".imgBox .img").length;

      // 위에 동일
      $(".imgBox .img").eq(imgOn).removeClass("on");
      $(".imgBox .img").eq(imgOn).css("opacity", 0);
      
      // 다음의 위치로 알아야 되기 때문에 
      imgOn = imgOn + 1;
      
      if( imgOn === imgLen ){
        // 다음의 위치가 총 개수보다 클 경우
        // 처음의 위치로 돌아간다
        $(".imgBox .img").eq(0).css("opacity", 1);
        $(".imgBox .img").eq(0).addClass("on");
      }else{
        // 다음 위치가 있는 경우 
        $(".imgBox .img").eq(imgOn).css("opacity", 1);
        $(".imgBox .img").eq(imgOn).addClass("on");
      }
    });

- 결과 화면.

See the Pen img slider by Nami (@NamuNami) on CodePen.

자바스크립트로 input의 자동완성을 구현해보도록 하겠습니다.

# https://www.w3schools.com/howto/howto_js_autocomplete.asp 를 참고하였습니다.

- head 부분 

따로, Jquery를 사용하지않고, 자바스크립트만으로 구현을 하였습니다.

<head>
    <title>자동생성파일</title>
    <!-- css에는 autocomplet의 요소를 만들떄 필요한 css가 담겨져 있습니다. -->
    <link rel="stylesheet" href="css/autocomplete.css">
    <!-- css에는 autocomplet의 요소를 만들떄 필요한 scrpit가 담겨져 있습니다. -->
    <script type="text/javascript" src="js/autocomplate.js"></script>
    <!-- css에는 autocomplet의 요소의 샘플 json의 값이 담겨져 있습니다. -->
    <script type="text/javascript" src="js/animal.js"></script>
</head>

- body 부분

<body onload="init()">
    <!-- 아래의 input의 값을 받을 때, 자동완성 기능이 작동합니다. -->
    <div class="srch_form autocomplete">
        <input id="autoInput" placeholder="Search...">
    </div>
    <script>
        // autocomplete 부분을 생성
        window.onload = function () {
            autocomplete.setAutocomplete(document.getElementById("autoInput"), animal)
        }
    </script>
</body>

- 화면 설명

input에 특정한 값을 입력하면, 그 값에 따라서 자동완성 기능을 수행합니다.

- css (autocomplete.css) : autocomplete 기능에 필요한 css

.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
     top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-active {
   background-color: DodgerBlue !important;
    color: #ffffff;
}

- animal.js : autocomplete를 테스트할 json 값.

var animal = ["Aardvark","Albatross","Alligator","Alpaca","Ant","Anteater","Antelope","Ape","Armadillo","Donkey","Baboon","Badger","Barracuda","Bat","Bear","Beaver","Bee","Bison","Boar","Buffalo","Butterfly","Camel","Capybara","Caribou","Cassowary","Cat","Caterpillar","Cattle","Chamois","Cheetah","Chicken","Chimpanzee","Chinchilla","Chough","Clam","Cobra","Cockroach","Cod","Cormorant","Coyote","Crab","Crane","Crocodile","Crow","Curlew","Deer","Dinosaur","Dog","Dogfish","Dolphin","Dotterel","Dove","Dragonfly","Duck","Dugong","Dunlin","Eagle","Echidna","Eel","Eland","Elephant","Elk","Emu","Falcon","Ferret","Finch","Fish","Flamingo","Fly","Fox","Frog","Gaur","Gazelle","Gerbil","Giraffe","Gnat","Gnu","Goat","Goldfinch","Goldfish","Goose","Gorilla","Goshawk","Grasshopper","Grouse","Guanaco","Gull","Hamster","Hare","Hawk","Hedgehog","Heron","Herring","Hippopotamus","Hornet","Horse","Human","Hummingbird","Hyena","Ibex","Ibis","Jackal","Jaguar","Jay","Jellyfish","Kangaroo","Kingfisher","Koala","Kookabura","Kouprey","Kudu","Lapwing","Lark","Lemur","Leopard","Lion","Llama","Lobster","Locust","Loris","Louse","Lyrebird","Magpie","Mallard","Manatee","Mandrill","Mantis","Marten","Meerkat","Mink","Mole","Mongoose","Monkey","Moose","Mosquito","Mouse","Mule","Narwhal","Newt","Nightingale","Octopus","Okapi","Opossum","Oryx","Ostrich","Otter","Owl","Oyster","Panther","Parrot","Partridge","Peafowl","Pelican","Penguin","Pheasant","Pig","Pigeon","Pony","Porcupine","Porpoise","Quail","Quelea","Quetzal","Rabbit","Raccoon","Rail","Ram","Rat","Raven","Red deer","Red panda","Reindeer","Rhinoceros","Rook","Salamander","Salmon","Sand Dollar","Sandpiper","Sardine","Scorpion","Seahorse","Seal","Shark","Sheep","Shrew","Skunk","Snail","Snake","Sparrow","Spider","Spoonbill","Squid","Squirrel","Starling","Stingray","Stinkbug","Stork","Swallow","Swan","Tapir","Tarsier","Termite","Tiger","Toad","Trout","Turkey","Turtle","Viper","Vulture","Wallaby","Walrus","Wasp","Weasel","Whale","Wildcat","Wolf","Wolverine","Wombat","Woodcock","Woodpecker","Worm","Wren","Yak","Zebra"
]

- autocomplate.js : autocomplete를 수행하는 스크립트

싱글톤으로 작성되었으며 , 아래의 주석은 쭈욱 따라가시면서 파악하시면 좋을 것 같습니다.

let autocomplete = (function () {

    let _inp = null;

    let _arr = [];

    let _currentFocus;

    let _setAutocomplete = function (inp, arr) {
        // autocomplete할 배열
        _arr = arr;

        // 기존의 input 값과 같지 않다면, 리스너 해제
        if (_inp === inp) {
            return;
        }
        // 기존 리스너해제
        _removeListener();

        // 새로운 input 의 리스너 추가.
        _inp = inp;
        _inp.addEventListener("input", inputEvent);
        _inp.addEventListener("keydown", keydownEvent);
    }

    let inputEvent = function (e) {
        var a, b, i, val = this.value;

        // 이전 생성된 div 제거 
        closeAllLists();

        // 요소 확인
        if (!val) {
            return false;
        }

        // 현재의 포커스의 위치는 없음.
        _currentFocus = -1;

        // autocomplet에서 항목을 보여줄 div 생성
        a = document.createElement("DIV");
        // 
        a.setAttribute("id", this.id + "autocomplete-list");
        // css 적용 
        a.setAttribute("class", "autocomplete-items");

        // input 아래의 div 붙이기.
        this.parentNode.appendChild(a);

        // autocomplet할 요소 찾기
        for (i = 0; i < _arr.length; i++) {
            // 배열의 요소를 현재 input의 value의 값만큼 자른 후, 같으면 추가한다.
            if (_arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
                b = document.createElement("DIV");
                // value의 값 만큼 굵게 표시 
                b.innerHTML = "<strong>" + _arr[i].substr(0, val.length) + "</strong>";
                b.innerHTML += _arr[i].substr(val.length);
                b.innerHTML += "<input type='hidden' value='" + _arr[i] + "'>";

                // console.log(b); 
                // <div class="autocomplete-active"><strong>B</strong>adger<input type="hidden" value="Badger"></div>

                // 생성된 div에서 이벤트 발생시 hidden으로 생성된 input안의 value의 값을 autocomplete할 요소에 넣기
                b.addEventListener("click", function (e) {
                    _inp.value = this.getElementsByTagName("input")[0].value;
                    closeAllLists();
                });

                // autocomplete 리스트를 붙이기.
                a.appendChild(b);
            }
        }
    }

    let keydownEvent = function (e) {
        // 
        var x = document.getElementById(this.id + "autocomplete-list");
        // 선택할 요소 없으면 null ,
        // <div id="autoInputautocomplete-list" class="autocomplete-items"><div class="autocomplete-active"><strong>A</strong>ardvark<input type="hidden" value="Aardvark"></div><div><strong>A</strong>lbatross<input type="hidden" value="Albatross"></div><div><strong>A</strong>lligator<input type="hidden" value="Alligator"></div><div><strong>A</strong>lpaca<input type="hidden" value="Alpaca"></div><div><strong>A</strong>nt<input type="hidden" value="Ant"></div><div><strong>A</strong>nteater<input type="hidden" value="Anteater"></div><div><strong>A</strong>ntelope<input type="hidden" value="Antelope"></div><div><strong>A</strong>pe<input type="hidden" value="Ape"></div><div><strong>A</strong>rmadillo<input type="hidden" value="Armadillo"></div></div>
        if (x) {
            // 태그 네임을 가지는 엘리먼트의 유요한 html 컬렉션을 반환.
            // div의 값을 htmlCollection의 값으로 받아옴.
            x = x.getElementsByTagName("div");
        }

        if (e.keyCode == 40) {
            // down
            // 현재위치 증가
            _currentFocus++;
            // 현재위치의 포커스 나타내기
            addActive(x);
        } else if (e.keyCode == 38) {
            // up
            // 현재위치 감소
            _currentFocus--;
            // 현재위치의 포커스 나타내기
            addActive(x);
        } else if (e.keyCode == 13) {
            // enter
            e.preventDefault();
            // 현재위치가 아이템 선택창내에 있는 경우
            if (_currentFocus > -1) {
                // 현재 위치의 값 클릭
                if (x) x[_currentFocus].click();
            }
        }
    }

    // document.addEventListener("click", function (e) {
    //     closeAllLists(e.target);
    // });


    let addActive = function (x) {
        if (!x) return false;
        removeActive(x);
        if (_currentFocus >= x.length) _currentFocus = 0;
        if (_currentFocus < 0) _currentFocus = (x.length - 1);
        x[_currentFocus].classList.add("autocomplete-active");
    }


    let removeActive = function (x) {
        for (var i = 0; i < x.length; i++) {
            x[i].classList.remove("autocomplete-active");
        }
    }


    let closeAllLists = function (elmnt) {
        var x = document.getElementsByClassName("autocomplete-items");
        for (var i = 0; i < x.length; i++) {
            if (elmnt != x[i] && elmnt != _inp) {
                x[i].parentNode.removeChild(x[i]);
            }
        }
    }


    let _removeListener = function () {
        if (_inp !== null) {
            console.log(_inp)
            _inp.removeEventListener("input", inputEvent, false);
            _inp.removeEventListener("keydown", keydownEvent, false);
        }
    }
    return {

        setAutocomplete: function (inp, arr) {
            _setAutocomplete(inp, arr);
        },
    }

})();

- 폴더 구조 : 위에 소스를 아래와 같은 폴더 구조로 만들어서 사용하시면 동일하게 작동할겁니다.

- 결과 화면

openlayers로 지도 만들기 기초

- 필요한 요소를 가져오기

// openlayers 맵 생성시 필요한 요소
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

// openlayers 맵 생성시 css (필수 요소 아님)
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

- html 코드

<body>
	// 오른쪽 h2 글자 
    <h2 style="right: 25px; position: absolute; z-index: 1;"> My Map </h2>
    // 맵을 생성할 div 
    <div id="map" class="map"></div>
</body>

- script 코드

 <script type="text/javascript">
        var map;
        
        setTimeout(function () {
            map = new ol.Map({
            	// 생성할 div의 값
                target: 'map',
                // map에 들어갈 초기 layer
                layers: [
                 	// openlayers의 타일맵
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                	// openlayers의 초기 위치
                    center: ol.proj.fromLonLat([37.41, 8.82]),
                    // zoom 값
                    zoom: 4
                })
            });
        }, 0);

    </script>

- 결과 화면.

- 전체코드

<!doctype html>
<html lang="en">

<head>
	// openlayers 맵 생성시 필요한 요소
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

    // openlayers 맵 생성시 css (필수 요소 아님)
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

    // map을 생성할 div 크기 
    <style>
        .map {
            height: 100%;
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        var map;
        
        setTimeout(function () {
            map = new ol.Map({
            	// 생성할 div의 값
                target: 'map',
                // map에 들어갈 초기 layer
                layers: [
                 	// openlayers의 타일맵
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                	// openlayers의 초기 위치
                    center: ol.proj.fromLonLat([37.41, 8.82]),
                    // zoom 값
                    zoom: 4
                })
            });
        }, 0);

    </script>
    <title>OpenLayers example</title>
</head>

<body>
    <div></div>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
</body>

</html>

Javascript 쪽에속 String으로 보낸 값을 파싱할 때,

int형을 double로 파싱하는 경우에 대해서 자체적으로 

class를 선언해서 이 부분을 지정해줘야 합니다.

예를 들어 , Map을 사용하는 경우.

Gson 선언 할때, Map 부분으로 파싱할 때, 만든 Java Class로 활용해서 파싱을 하겠다라고 지정해줍니다.

static Gson gson = new GsonBuilder().registerTypeAdapter(Map.class, new MapDeserializer()).setDateFormat("yyyy-MM-dd HH:mm:ss").serializeNulls().create();

Map으로 변환 할때 TypeToken을 지정해줍니다.

Map.class, new MapDeserializer()

MapDeserializer.java

결과화면

Int형 값들은 int형으로 

Double의 값들은 Double형으로 반환합니다.

안드로이드의 페이지 로딩의 되었는지 

0 - 100으로 나타내는 함수.

webViewMain = (WebView) findViewById(R.id.WebViewMainActivityWebView);
webViewMain.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        Log.i("WebView", "Progress: " + String.valueOf(newProgress));
    }

});

결과화면

안드로이드 웹뷰에서 alert 구문이 있을 때,

alert문을 뭔가 어설프게 표현되는 바꾸는 부분

설정해주면 좋을 것 같습니다.

webViewMain = (WebView) findViewById(R.id.WebViewMainActivityWebView);
webViewMain.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result){
        final JsResult finalRes = result;
        new AlertDialog.Builder(view.getContext())
                .setMessage(message)
                .setPositiveButton(android.R.string.ok,
                        new AlertDialog.OnClickListener(){
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                finalRes.confirm();
                            }
                        })
                .setNegativeButton(android.R.string.cancel,
                        new AlertDialog.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                finalRes.cancel();
                            }
                        })
                .create()
                .show();
        return true;
    }
});

결과화면