[ 컴퓨터 ] 인터넷익스플로러 재설치, 인터넷익스플로러 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 

 

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

 

저작자표시

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

[ 반응형 웹 하위브라우저에 대응하기 ] 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

[ 티스토리 ] 로고 만들기 / 타이틀 꾸미는 법 / 로고 만드는 법 / 무료 로고 만들기





다른 블로그와 다르게 티스토리는 자유도가 높기 때문에 꾸밀 수 있는 방법이 아주 많다.

하지만 다들 디자이너가 아니고.. 다들 웹프로그래머가 아니기 때문에 오히려 다른 블로그보다 어렵게 느껴지는 경우가 많을 것 같다.


나 역시 디자인과는 아주... 거리가 있는 사람이기 때문에 어디 공짜로 타이틀에 쓸 디자인을 만들어 주는 곳이 없을까 찾다가

찾은 곳이 바로 지금 소개할 이 곳이다!


개인적으로 일단 마음에 드는 점을 나열하자면 아래 세가지다.


 1. 커스터마이징이 가능하다.

 2. 다양한 스타일로 다운로드 가능하다.

 3. 퀄리티가 나름 괜찮다.


공짜인데 이정도면 제법 괜찮지 않나? ㅎㅎ



사용하는 법은 아주 간단하지만, 혹시나 하는 마음에 아래에 공유해본다.





step 0. 일단 아래 링크를 클릭해서 새창으로 접속해 본다.


- https://www.logaster.com/


- 아래와 같이 창이뜨면, Create a logo  버튼을 클릭해준다.








step1.  로고로 만들고자 하는 글자를 입력해주고, 아래 회사 타입을 선택해 준다.


- 나는 All Types 으로 두고 Next 클릭!












step 2. 마음에 드는 로고 선택


 - 마음에 드는 로고를 선택하고 Next 클릭!









step 3. 로고 컨셉 잡기


 - 로고와 글씨의 배치 등을 설정할 수 있다. 뿐만 아니라 컬러 등 어느정도 수정도 가능하다.








step 4. 저장하기


 - 위에서 컨셉을 잡은 로고의 다양한 컬러를 볼 수 있다. Edit logo concept 버튼을 통해서 조금더 자유롭게 수정도 가능하다.

 - 수정이 끝났으면 Save 버튼을 눌러주자.







step 5. 무료계정 만들기


 - 여태 작업한 내용들을 내 컴퓨터로 다운 받으려면 무료계정을 만들어야 한다.

 - 로고도 무료로 만들어 줬는데 계정따위 Create an account 버튼을 눌러서 만들어 주도록 하자.











step 6. 다운로드


 - 작업한 로고를 다운받아야 한다. 

 - 아래 그림과 같이 Free 라고 적혀 있는 부분을 선택해서 다운로드 받도록 하자.












step 7. 로고 확인


 - 다운로드 받은 압축파일을 풀면 아래와 같이 다양한 색의 로고가 저장 되어 있는 것을 확인 할 수 있다.








step 8. 감탄하기


 - 세상 참 좋아진 것 같다. 

 - 디자이너가 직접 만들어 주는 것 보다는 못하겠지만, 나처럼 대충 안만들고 열심히 커스터마이징 하면 훨씬 이쁘게 무료로 나만의 로고를 얻을 수 있을 것 같다.





"끝"



저작자표시

[ 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


"끝"







저작자표시

+ Recent posts

티스토리툴바