[ 컴퓨터 ] 인터넷익스플로러 재설치, 인터넷익스플로러 10 설치하는 법, 인터넷익스플로러, internet explorer delete 삭제

 

 

인터넷 익스플로러는 불편한 부분이 많지만, 아직 까지 우리나라에서는 이것 없이 웹서핑하기가 불편하다.

 

근데 익스플로러는 윈도우 업데이트와 동시에 업그레이드 되면서 안생기던 오류가 발생하기도 하고,

아니면 웹 서핑도중에 불필요한 프로그램들이 같이 깔려서 삭제 또는 재설치가 필요한 경우가 종종 발생한다.

 

이것때문에 포맷하기는 아까우니 익스플로러 재설치 방법을 알아두는 것이 좋을 것 같다.

 

 

일단 삭제하는 법 부터 살펴보자.

 

 

step 1. 제어판 > 프로그램 > 설치된 업데이트 보기 클릭!

 

 

 

 

 

 

 

 

step 2. 인터넷 익스플로러 제거

 

-> 아래와 같이 현재 설치되어 있는 익스플로러를 찾아서 우클릭 후 삭제!

 

 

 

 

 

 

 

step 3. 인터넷 익스플로러 다운

 

-> 필요한 익스플로러 버젼을 다운 받아야 한다.

 

    https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads

 

 

 

 

-> 익스플로러 10 버전이 필요한 경우도 있을것 같아 아래에 파일로 첨부

 

 

    IE10-Windows6.1-x64-ko-kr (2).z01

    IE10-Windows6.1-x64-ko-kr (2).z02

    IE10-Windows6.1-x64-ko-kr (2).z03

    IE10-Windows6.1-x64-ko-kr (2).z04

    IE10-Windows6.1-x64-ko-kr (2).zip 

 

위에서 다운받은 파일을 설치해주시면 끝!!

 

저작자표시

'웹프로그래밍' 카테고리의 다른 글

애플 개발자들을 위한 웹 개발 생산성 200% 꿀팁과 필수 도구  (0) 2025.01.04
[ 반응형 웹 하위브라우저에 대응하기 ] HTML5/CSS3/미디어쿼리 하위브라우저 대응  (0) 2018.07.22
[ 프로그램 설치 ]자바 JDK 다운로드 및 설치 방법 / 자바 환경변수 설정  (0) 2016.06.21
[ 웹프로그래밍 ] 무료호스팅 / notepad++ ftp 연결 / php 무료호스팅 / notepad++ 사용법 / dothome 무료호스팅 / 포트폴리오 호스팅  (0) 2016.02.17
[ 웹프로그래밍 ] 무료호스팅 추천 / php호스팅 / 호스팅  (0) 2015.12.29

[ jquery 슬라이더 ] 이미지 슬라이더 / 탭 슬라이더 / setInterval 




단순하게 인터벌 함수를 이용해서 만든 슬라이더 함수이다.


아직 추가할 기능이 몇 가지 남아있지만 기본적인 작동 원리를 이해하기에는

괜찮은 예제인 것 같다.


 - 탭 위에 마우스를 가져다가 되면 슬라이딩 정지

 - 배너위에 마우스를 올리면 슬라이딩 정지


위 두가지 기능은 다음 포스팅에서 다루기로 하고..


아래 예제는 display:none 을 사용하지 않고  visibility:hidden 과 position:absolute 속성을 이용해서

만들어 졌다.





예제 1)


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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<head>
<style>
ul,li{list-style:none;}
#TopSlider{width:500px; height:300px; border:1px solid #d2d2d2;}
#TopSlider div{width:498px;height:298px; float:left; visibility:hidden; position:absolute;}
#top_0{background-color:red;}
#top_1{background-color:blue;}
#top_2{background-color:gray;}
#top_3{background-color:yellow;}
#ul_btns{float:left; width:420px; border:1px solid #e0e0e0;}
#ul_btns a{float:left; width:100px; border:1px solid #e0e0e0;}
#ul_btns .on{background-color:red;}
 
</style>
<script    src="https://code.jquery.com/jquery-3.0.0.min.js" 
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   
        crossorigin="anonymous"></script>
<script>
 
    var intv;
    var current = 0;
    var sIdx = 0;
    var sCnt =  4;
    
 
    function startTopSlider() {
        intv = setInterval(function () {
            $("#ul_btns").find("a").eq(current++ % sCnt).click();
        }, 3000);
    }
 
    function setBnr(idx, bnr, allTab, addCls) {
        $(bnr).css("visibility", "hidden")
              .eq(idx).css("visibility", "visible");
        $(allTab).removeClass(addCls);
        $(allTab).eq(idx).addClass(addCls);
    }
 
    $(document).ready(function () {
        
        //set init
        $("#top_0").css("visibility", "visible");
        $("#btn_0").addClass("on");
        startTopSlider();
        
        
        $("#ul_btns").find("a").click(function(){
            var idx = $(this).attr("id").split("_")[1];
            setBnr(idx, "#TopSlider > div" , "#ul_btns > a" , "on" );
            
        });
 
        
    });
</script>
 
</head>
<body>
    <p>setInterval 을 이용한 슬라이더 예제</p>
    <div id="TopSlider">
        <div id="top_0">배너 0</div>
        <div id="top_1">배너 1</div>
        <div id="top_2">배너 2</div>
        <div id="top_3">배너 3</div>
    </div>
    <div id="TopSliderBtn">
        <ul id="ul_btns">
            <a href="#" id="btn_0"><li>tab0</li></a>
            <a href="#" id="btn_1"><li>tab1</li></a>
            <a href="#" id="btn_2"><li>tab2</li></a>
            <a href="#" id="btn_3"><li>tab3</li></a>
        </ul>
    </div>
</body>
</html>
 
 
cs




디자인이 아주 부끄럽지만.. 디자인을 보려고 만든 예제는 아니니까 이해하고 넘어가도록 하자.


tab0 -> tab1 -> tab2 -> tab3 으로 이동하면서 배너 0 ~~> 배너 3 까지 노출 되는 방식이다.




예제 1 - 결과화면 )






간단하게 예제를 만드려고 노력했는데, 만들고 나니 다소 복잡한 것 같기도 하다.



예제파일 : 

test.html


display:none 과 visibility:hidden 의 차이는 아래 포스팅을 참고하도록 하자!



http://gyunbox.tistory.com/entry/visibility



"끝"






저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기  (3) 2016.07.29
jQuery 4일째 (ajax)  (0) 2014.07.31

프로젝트를 진행하다가, display:none 속성과 visibility:hidden 속성에 대해서 

의문점이 생기기 시작했다.



내가 발견한 차이점은 아래와 같다.



display:none -> 데이터를 읽어오지 않음, block으로 변경시 읽어옴


visibility:hidden -> 데이터를 다 읽어옴, visible로 변경시 별도의 로딩 없이 노출 됨



그렇다면


" 어떤 경우에 어떤것을 활용하는것이 좋을까? "


아래의 경우는 display:none; 과 display:block 을 이용해서 버튼클릭시 원하는 div만 노출되게 한다.

기본적으로 #slider_showBox 의 자식 div 들을 모두 none; 처리 한 후에 원하는 것만 block 하는 원리로 작동한다.


주로 이런방식을 통해서 많이 작업을 해왔다.


예제 1) 

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
31
32
33
34
35
36
<html>
<head></head>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<body>
    <div id="slider_showBox">
        <div id="div_1" class="btn" style="background-color:red;">1번</div>
        <div id="div_2" class="btn" style="background-color:yellow;">2번</div>
        <div id="div_3" class="btn" style="background-color:green;">3번</div>
        <div id="div_4" class="btn" style="background-color:gray;">4번</div>
    </div>
    <div id="slider_btn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
        </ul>
    </div>
<script>
$(document).ready(function(){
 
    $("#slider_btn li").click(function(){
        var idx = $(this).index();

        $(".btn").css("display","none")
                 .eq(idx).css("display","block");
    });
});
</script>    
</body>
<style>
#slider_showBox div{width:100%; float:left; border:1px solid red; position:relative; display:none; height:100px;}
#slider_btn{float:left; width:100%;}
#slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;}
</style>
</html>
cs




"그렇다면 visibility:hidden 는 언제? "



일단 아래의 경우를 보자.


위의 예제와는 다르게 # slider_showBox안에 a tag를 사용하고 그 안에 div를 넣고 백그라운드 이미지를 넣어주었다.



예제 2) 

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
31
32
33
34
35
36
37
<html>
<head></head>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<body>
    <div id="slider_showBox">
        <a id="div_1" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_1.jpg');">1번</div></a>
        <a id="div_2" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_2.jpg');">2번</div></a>
        <a id="div_3" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_3.jpg');">3번</div></a>
        <a id="div_4" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_4.jpg');">4번</div></a>
    </div>
    <div id="slider_btn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
        </ul>
    </div>
<script>
$(document).ready(function(){
 
    $("#slider_btn li").click(function(){
        var idx = $(this).index();
        console.log(idx);
        $(".link").css("display","none")
                 .eq(idx).css("display","block");
    });
});
</script>    
</body>
<style>
#slider_showBox a{width:100%; float:left; border:1px solid red; position:relative; display:none; height:100px;}
#slider_btn{float:left; width:100%;}
#slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;}
.box{width:100%; height:100%;}
</style>
</html>
cs





예제 2) 번을 실행시켜보면 버튼을 클릭할때 이미지가 웹서버로 부터 로드 되는 것을 알 수 있다.

-- 웹 브라우져 > f12 > 네트워트에서 확인 가능하다.


탭 클릭시 그때서야 이미지가 로드되기 때문에, 홈페이지가 느린것 같은 느낌을 사용자에게 줄 수 있다.



이번에는 visibility:hidden 을 사용한 예제이다.

웹 브라우져 > f12 > 네트워트에서 확인해보면 이미지를 한번에 모두 로드하는 것을 알 수 있다.

페이지를 처음 열었을 때 용량이 큰 이미지의 경우에는 조금 느리게 느껴질 수 있으나, 탭 전환시에는 이미 로드된 이미지를 사용하기 때문에 추가적으로 로딩되는 시간을 필요로 하지 않는다.



예제 3 )


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
31
32
33
34
35
36
37
38
39
<html>
<head></head>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<body>
    <div id="slider_showBox">
        <a id="div_1" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_1.jpg');">1번</div></a>
        <a id="div_2" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_2.jpg');">2번</div></a>
        <a id="div_3" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_3.jpg');">3번</div></a>
        <a id="div_4" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_4.jpg');">4번</div></a>
    </div>
    <div id="slider_btn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
        </ul>
    </div>
<script>
$(document).ready(function(){
 
    $("#slider_btn li").click(function(){
        var idx = $(this).index();
        $(".link").css("visibility","hidden")
                  .eq(idx).css("visibility","visible");
    });
});
</script>    
</body>
<style>
#slider_showBox { height:100px; float:left; width:100%;}
#slider_showBox a{width:100%; float:left; border:1px solid red; 
                  position:relative; display:block; position:absolute; 
                  visibility:hidden; height:100px;}
#slider_btn{float:left; width:100%;}
#slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;}
.box{width:100%; height:100%;}
</style>
</html>
cs




"결론은?"



display:none 을 사용하면 노출 돠지 않는 경우에 이미지 자체를 로드 하지 않는다.

이미지 뿐만 아니라 다른 자원도 마찬가지일 것이라고 생각된다.


visibility:hidden 을 사용하면 노출 되지 않는 이미지도 모두 로드된다.


그러니 각 상황에 알맞게 사용하자!


visibility:hidden 을 이용해서 이미지 슬라이더를 만들어 보는 예제는 아래 링크를 통해 확인!


http://gyunbox.tistory.com/entry/jquery-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%ED%83%AD-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-setInterval-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EB%A7%8C%EB%93%A4%EA%B8%B0


"끝"







저작자표시

자바 JDK 다운로드 및 설치 방법 / 자바 환경변수 설정

 

 

 

 

 

https://www.oracle.com/index.html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'웹프로그래밍' 카테고리의 다른 글

애플 개발자들을 위한 웹 개발 생산성 200% 꿀팁과 필수 도구  (0) 2025.01.04
[ 반응형 웹 하위브라우저에 대응하기 ] HTML5/CSS3/미디어쿼리 하위브라우저 대응  (0) 2018.07.22
[ 컴퓨터 ] 인터넷익스플로러 재설치, 인터넷익스플로러 10 설치하는 법, 인터넷익스플로러 삭제  (0) 2016.07.15
[ 웹프로그래밍 ] 무료호스팅 / notepad++ ftp 연결 / php 무료호스팅 / notepad++ 사용법 / dothome 무료호스팅 / 포트폴리오 호스팅  (0) 2016.02.17
[ 웹프로그래밍 ] 무료호스팅 추천 / php호스팅 / 호스팅  (0) 2015.12.29

+ Recent posts

티스토리툴바