12
09
프론트엔드/특강

특강5일 : 간단예제

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 이벤트객체형식</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style>
        * { margin: 0; padding:0; box-sizing: border-box; }
        #wrap { }
        a { text-decoration: none; color:#333; }
        li { list-style: none; }
        header { text-align:center; padding:20px 0 10px;}
        header h1 { padding:0 0 25px;}
        header h1 a { font-size:0.8em; }
        #container { padding: 0 0 50px; }
        footer { padding:30px 0 30px; background:#333; color:#fff; text-align:center;}
       
        /* 문제 1 */
        #globalNav {
            display: block;
            position: relative;
            text-align:center;
            width:800px; margin:0 auto;
        }
        #globalNav ul::after { content:"";display:block;clear:both;}
        #globalNav ul li {
            float: left;
            height: 50px;
            width:200px;
            line-height: 50px;     
        }
        #globalNav ul li a {
            color: #999;
            text-decoration: none;
            display: block;
            font-size: 1em;
            font-weight: bold;
            transition: color 0.5s ease;
        }
        #globalNav ul li a.on{
            color: red;
        }
        #globalNav span {
            display: block;
            border-bottom: 2px solid #ff6600;
            height: 50px;
            width: 200px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }

        /* 문제 2 */
        #visualArea { width: 950px; margin: 0 auto 30px; position: relative; }
        #visual { 
            height: 950px; height:450px; position: relative; overflow: hidden; 
            /* box-shadow: 1px 5px 10px 2px #666; */
        }
        #visual>div { position: absolute; left: 0; top: 0; display: none; }
		#visual>div:nth-child(1) { display:block; }
        #control { 
            position: absolute; 
            bottom:20px; 
            width: 100%; text-align:center ;
            padding-top:50px;
        }
        #control a { 
            display: inline-block; width: 87px; height: 87px; background: #000;
            color:#fff; line-height: 26px; font-size: 0.8em; 
            margin: 0 5px;
            position: relative;
            opacity: 0.5;
        }
        #control a.on {
            opacity: 1;
        }
        #control a.on span { 
            border:5px solid red;
            width:87px; height:87px;
            position:absolute; left:0; top:0; z-index:1;
        }
        
        /* 문제 3*/
        .box { width:960px; margin:0 auto;}
        .box button { 
            width:100%; border:none; background:#ccc; border:1px solid #333;
            display:block; padding:10px 10px; cursor: pointer;
            text-align:left; font-weight:700;
        }
        .box > div { 
            padding:20px; font-size: 0.8em;  display:none; border:1px solid #000; border-top:none; 
            outline:none;
        }
        .m2.on { display:block; }

        /* 문제 4*/
        .tabWrap { border:2px solid #000; width:960px; margin:20px auto;}
        #tab { display:flex; justify-content: center; background:#ccc;}
        #tab > li { flex: 1; }
        #tab > li > a { padding:20px; display:block;}
        #tab > li > a.active { font-size:20px; font-weight:700; background:#fff; }
        #tabCont { height:300px; position:relative; }
        #tabCont > div {
            opacity:0;
            position:absolute; 
            left:0; top:0; width:100%; 
            height:100%;
            transition: all 0.5s;
            padding:20px;
        }
        #tabCont > div:nth-child(1) { opacity: 1;}
    </style>

</head>
<body>
<div id="wrap">
    <header>
        <h1><a href="#">LOGOTYPE</a></h1>
        <!-- 문제 1 : 따라다니는 바 -->

        <script>
        $(document).ready(function(){
            var w = $("#globalNav ul li").width();
            $("#globalNav").append("<span></span>");
            
            $("#globalNav ul li").on("click", function(){
                var index = $(this).index();

                $("#globalNav span").stop().animate({ left: w*index },500)

                $(this).find("a").addClass("on");
                $(this).siblings().find("a").removeClass("on");
            });
            $("#globalNav ul li:eq(2)").trigger("click");
    
        });
        </script>

        <nav id="globalNav">
            <ul>
                <li><a href="#">COMPANY</a></li>
                <li><a href="#">PRODUCT</a></li>
                <li><a href="#">REFERENCE</a></li>
                <li><a href="#">NOTICE</a></li>
            </ul>
        </nav>
        <!-- //문제 1 -->
    </header>

    <div id="container">
        <!-- 문제 2 : 슬라이드 -->
        <script>
        $(document).ready(function(){     
            $("#control a").append("<span></span>");      
            $("#control a").click(function(){
                var num = $(this).index();
                $(this).addClass("on").siblings().removeClass("on");
                $("#visual div").filter(":visible").stop().fadeOut().end().eq(num).stop().fadeIn();
            });
            $("#control a:first").addClass("on").add("#visual div:first").show();
        });
        </script>

        <div id="visualArea">
            <div id="visual">
                <div><a href="#"><img src="images/big1.jpg" alt="1"></a></div>
                <div><a href="#"><img src="images/big2.jpg" alt="2"></a></div>
                <div><a href="#"><img src="images/big3.jpg" alt="3"></a></div>
                <div><a href="#"><img src="images/big4.jpg" alt="4"></a></div>
            </div>
            <div id="control">
                <a href="#n"><img src="images/small1.jpg"></a>
                <a href="#n"><img src="images/small2.jpg"></a>
                <a href="#n"><img src="images/small3.jpg"></a>
                <a href="#n"><img src="images/small4.jpg"></a>
            </div>
        </div>
        <!-- //문제 2 -->

        <!-- 문제 3 : toggle -->
        <script>
            $(document).ready(function(){
                $(".box1 button").click(function(){
                    $(this).next().slideToggle(300);
                });
                $(".box2 button").click(function(){
                    $(this).next().slideToggle(300); 
                });
            });
        </script>
        <div class="box1 box">
            <button>TITLE 1</button>
            <div class="m1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="box2 box">
        <button>TITLE 2</button>
            <div class="m2">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
        <!-- //문제 3 -->

        <!-- 문제 4 : 탭메뉴 -->
        <script>
		// case 1
		$(document).ready(function(){
            $(".tab li a:eq(0)").addClass("active");
            $(".tab li a").on("click",function(){
                var index = $(this).parent("li").index();
                $(this).addClass("active").parent().siblings().find("a").removeClass("active");
                $("#tabCont > div").css("opacity","0");
                $("#tabCont > div").eq(index).css("opacity","1");
                return false;
            });


        });

		/* case 2 
        window.onload = function(){
            
        }
		*/
        </script>
        <div class="tabWrap">
            <ul class="tab" id="tab">
                <li><a href="#" class="tabLinks">London</a></li>
                <li><a href="#" class="tabLinks">Paris</a></li>
                <li><a href="#" class="tabLinks">Tokyo</a></li>
            </ul>
        
            <div id="tabCont">
                <div id="London" class="tabcontent">
                    <h3>London</h3>
                    <p>London is the capital city of England.</p>
                </div>
                <div id="Paris" class="tabcontent">
                    <h3>Paris</h3>
                    <p>Paris is the capital of France.</p> 
                </div>
                <div id="Tokyo" class="tabcontent">
                    <h3>Tokyo</h3>
                    <p>Tokyo is the capital of Japan.</p>
                </div>
            </div>
 
        </div>
        <!-- // 문제 4 -->

        
    </div>
    <footer>
        copyright (c) shinhanyang All rights reserved.
    </footer>
</div>        
</body>
</html>

코드분석

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

content = "IE=edge"는 IE 브라우저에서, 각 버전 중 가장 최신 표준을 선택하는 문서 모드이다. 문서 유형 (document type) 선언과 함께 사용해야 유효하다.

문서모드?

IE는 인터넷 익스플로러를 의미하는 것으로 여러가지 버전이 있다. (IE6~IE11) 그런데 IE간에 버전차이로 인해 같은 웹 문서 라고해도 다르게 보여지는 경우가 있다. 이러한 문제를 해결하기 위해 MS에서 제공하는 기능이 바로 "호환성 보기"라는 기능이다. 이 호환성 보기를 다른 말로 쿼크 모드라고 하며 IE 버전이 다르더라도 같은 화면을 볼 수 있게 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

브라우저 너비를 장치 너비에 맞추어 표시하며, 초기 화면 배율을 1.0으로 설정한다.

<body>

<header>
	<h1><a href="#">LOGOTYPE</a></h1>
	<!-- 문제 1 : 따라다니는 바 -->

	<script>
		$(document).ready(function(){
			var w = $("#globalNav ul li").width();
			$("#globalNav").append("<span></span>");

			$("#globalNav ul li").on("click", function(){
				var index = $(this).index();

				$("#globalNav span").stop().animate({ left: w*index },500)

				$(this).find("a").addClass("on");
				$(this).siblings().find("a").removeClass("on");
			});
			$("#globalNav ul li:eq(2)").trigger("click");
		});
	</script>

	<nav id="globalNav">
		<ul>
			<li><a href="#">COMPANY</a></li>
			<li><a href="#">PRODUCT</a></li>
			<li><a href="#">REFERENCE</a></li>
			<li><a href="#">NOTICE</a></li>
		</ul>
	</nav>
	<!-- //문제 1 -->
</header>
$("선택자").append("텍스트");

.append() 메서드는 선택한 요소 마지막 위치에 요소를 추가한다.

$("선택자").on();

.on() 메서드는 선택한 요소의 이벤트를 설정한다.

$("선택자)".stop();

.stop() 메서드는 선택한 요소의 실행중인 애니메이션을 정지한다.

$("선택자").addClass("클래스이름 혹은 함수");

.addClass() 메서드는 선택한 요소의 클래스를 추가한다.

$("선택자").siblings();

선택한 요소를 제외한 형제 요소를 모두 찾는다.

$("선택자").find("선택자 혹은 요소");

선택한 요소의 자식 요소 중 조건에 맞는  요소를 선택한다.

$("선택자").removeClass("클래스이름 또는 함수");

.removeClass() 메서드는 선택한 요소의 클래스를 삭제한다.

$("선택자").trigger();

.trigger() 메서드는 선택한 요소의 이벤트를 수동으로 발생시킨다.

 

<css>

a { text-decoration: none; color:#333; }
li { list-style: none; }
header { text-align:center; padding:20px 0 10px;}
header h1 { padding:0 0 25px;}
header h1 a { font-size:0.8em; }
#globalNav {
	display: block;
	position: relative;
	text-align:center;
	width:800px; margin:0 auto;
}
#globalNav ul::after { content:"";display:block;clear:both;}
#globalNav ul li {
	float: left;
	height: 50px;
	width:200px;
	line-height: 50px;     
}
#globalNav ul li a {
	color: #999;
	text-decoration: none;
	display: block;
	font-size: 1em;
	font-weight: bold;
	transition: color 0.5s ease;
}
#globalNav ul li a.on{ color: red; }
#globalNav span {
	display: block;
	border-bottom: 2px solid #ff6600;
	height: 50px;
	width: 200px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
z-index: auto | number

z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의한다.

<body>

<!-- 문제 2 : 슬라이드 -->
        <script>
        $(document).ready(function(){     
            $("#control a").append("<span></span>");      
            $("#control a").click(function(){
                var num = $(this).index();
                $(this).addClass("on").siblings().removeClass("on");
                $("#visual div").filter(":visible").stop().fadeOut().end().eq(num).stop().fadeIn();
            });
            $("#control a:first").addClass("on").add("#visual div:first").show();
        });
        </script>

        <div id="visualArea">
            <div id="visual">
                <div><a href="#"><img src="images/big1.jpg" alt="1"></a></div>
                <div><a href="#"><img src="images/big2.jpg" alt="2"></a></div>
                <div><a href="#"><img src="images/big3.jpg" alt="3"></a></div>
                <div><a href="#"><img src="images/big4.jpg" alt="4"></a></div>
            </div>
            <div id="control">
                <a href="#n"><img src="images/small1.jpg"></a>
                <a href="#n"><img src="images/small2.jpg"></a>
                <a href="#n"><img src="images/small3.jpg"></a>
                <a href="#n"><img src="images/small4.jpg"></a>
            </div>
        </div>
$("선택자").filter("선택자" 혹은 변수 혹은 함수);

선택한 요소에서 선택자, 변수, 함수를 통해 선택하는 메서드이다.

$("선택자").fadeOut();

선택한 요소를 천천히 숨긴다.

$("선택자").end();

.end() 메서드는 현재 선택된 요소의 이전 요소를 선택하는 메서드이다.

$("선택자").eq("숫자");

선택한 요소의 인덱스 번호에 해당하는 요소를 찾는다.

$("선택자").fadeIn();

선택한 요소를 천천히 보여준다.

$("선택자").show();

선택한 요소를 보여준다.

 

<css>

 #visualArea { width: 950px; margin: 0 auto 30px; position: relative; }
 #visual { 
 	height: 950px; height:450px; position: relative; overflow: hidden; 
 	/* box-shadow: 1px 5px 10px 2px #666; */
 }
 #visual>div { position: absolute; left: 0; top: 0; display: none; }
 #visual>div:nth-child(1) { display:block; }
 #control { 
 	position: absolute; 
 	bottom:20px; 
 	width: 100%; text-align:center ;
 	padding-top:50px;
 }
 #control a { 
 	display: inline-block; width: 87px; height: 87px; background: #000;
 	color:#fff; line-height: 26px; font-size: 0.8em; 
 	margin: 0 5px;
 	position: relative;
 	opacity: 0.5;
 }
 #control a.on {
 	opacity: 1;
 }
 #control a.on span { 
 	border:5px solid red;
 	width:87px; height:87px;
 	position:absolute; left:0; top:0; z-index:1;
 }

<body>

<script>
	$(document).ready(function(){
		$(".box1 button").click(function(){
			$(this).next().slideToggle(300);
		});
		$(".box2 button").click(function(){
			$(this).next().slideToggle(300); 
		});
	});
</script>
<div class="box1 box">
<button>TITLE 1</button>
	<div class="m1">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
</div>
<div class="box2 box">
	<button>TITLE 2</button>
	<div class="m2">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
</div>
$("선택자").next();

선택한 요소의 다음 요소를 선택한다.

 

<css>

.box { width:960px; margin:0 auto;}
.box button { 
	width:100%; border:none; background:#ccc; border:1px solid #333;
	display:block; padding:10px 10px; cursor: pointer;
	text-align:left; font-weight:700;
}
.box > div { 
	padding:20px; font-size: 0.8em;  display:none; border:1px solid #000; border-top:none; 
	outline:none;
}
.m2.on { display:block; }

<body>

<script>
	// case 1
	$(document).ready(function(){
		$(".tab li a:eq(0)").addClass("active");
		$(".tab li a").on("click",function(){
			var index = $(this).parent("li").index();
			$(this).addClass("active").parent().siblings().find("a").removeClass("active");
			$("#tabCont > div").css("opacity","0");
			$("#tabCont > div").eq(index).css("opacity","1");
			return false;
		});
	});
	/* case 2 
	window.onload = function(){

	}
	*/
</script>
<div class="tabWrap">
	<ul class="tab" id="tab">
		<li><a href="#" class="tabLinks">London</a></li>
		<li><a href="#" class="tabLinks">Paris</a></li>
		<li><a href="#" class="tabLinks">Tokyo</a></li>
	</ul>
	<div id="tabCont">
		<div id="London" class="tabcontent">
			<h3>London</h3>
			<p>London is the capital city of England.</p>
		</div>
		<div id="Paris" class="tabcontent">
			<h3>Paris</h3>
			<p>Paris is the capital of France.</p> 
		</div>
		<div id="Tokyo" class="tabcontent">
			<h3>Tokyo</h3>
			<p>Tokyo is the capital of Japan.</p>
		</div>
	</div>
</div>
$("선택자").parent();

선택한 요소의 부모 요소를 선택한다.

 

<css>

.tabWrap { border:2px solid #000; width:960px; margin:20px auto;}
#tab { display:flex; justify-content: center; background:#ccc;}
#tab > li { flex: 1; }
#tab > li > a { padding:20px; display:block;}
#tab > li > a.active { font-size:20px; font-weight:700; background:#fff; }
#tabCont { height:300px; position:relative; }
#tabCont > div {
	opacity:0;
	position:absolute; 
	left:0; top:0; width:100%; 
	height:100%;
	transition: all 0.5s;
	padding:20px;
}
#tabCont > div:nth-child(1) { opacity: 1;}

<body>

<footer>
	copyright (c) shinhanyang All rights reserved.
</footer>

<css>

footer { padding:30px 0 30px; background:#333; color:#fff; text-align:center;}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {background-color: white;}
        .bgyellow {background-color: yellow;}
    </style>
    <script>
        window.onload = function(){
            var btn3 = document.getElementById("btn3")
            btn3.onclick = function(){
                changeBg();
            }           
        }

        function addAddr(){
            const result = document.getElementById('addrlist');
            const newAddr = document.getElementsByName("name")[0].value +
            ',' + document.getElementsByName('tel')[0].value;
            const item =document.createElement('li');
            const txt = document.createTextNode(newAddr);
            item.appendChild(txt);
            result.appendChild(item);
        }

        function resetAddr(){
            document.getElementById('addrlist').innerHTML = "";
        }

        function changeBg(){
            document.querySelector('body').setAttribute('style','background-color:yellow');
        }
    </script>
</head>
<body>
    <h2>주소록 예제</h2>
    <form>
        이름 : <input type="text" name="name"><br>
        전화번호 : <input type="text" name="tel"><br>
        <input type="button" value="저장" onclick="addAddr()">
        <input type="button" value="리셋" onclick="resetAddr()">
        <input type="button" value="배경변경" id="btn3">
    </form>
    <hr>
    <h3>주소록 목록</h3>
    <ul id="addrlist">
    </ul>
</body>
</html>
728x90
저작자표시 (새창열림)

'프론트엔드 > 특강' 카테고리의 다른 글

특강7일  (0) 2021.12.07
특강6일 :반응형 웹사이트만들기  (0) 2021.12.06
특강4일 : 자바스크립트  (0) 2021.12.01
특강3일 : 자바스크립트기초  (2) 2021.11.30
특강2일 : 사이드바, 애니메이션  (0) 2021.11.29
COMMENT
 

티스토리툴바