특강4일

특강4일

728x90

Coctail body { background-image : url("images/bg.png"); } #wrap { width : 1024px; background-color : lightgray; margin: 0 auto; /*padding : 50px 30px 100px 100px;*/ border-radius: 30px 30px 0 0; transition: background-color 0.5s;} /* #wrap : wrap이라는 id를 가져옴 / class는 .으로 가져옴 / id는 한 문서 안에 같은 이름의 id가 무조건 하나만 존재해야 하지만 class는 여러개에 적용해도 상관없음 margin: 0 auto; : 가운데 정렬 / margin: (top, right, bottom, left) margin : 바깥쪽 여백 / padding : 안쪽 여백 */ h1 {font-size : 80px; height: 100px; line-height: 140px; color: white; text-align: center; text-shadow: 2px 2px 2px rgba(255, 61, 61, 1);} /* line-height : 문장 사이의 간격 */ hr { height: 5px; } h2 { font-size: 40px; } ol { margin-top:0px; margin-bottom: 100px; margin-left: 100px; } ol li { font-size : 40px; margin-right: 20px; vertical-align: middle; } ol li.off{ display: none; } /* vertical-align : 위 아래에서 센터 */ img { margin-left:10px; cursor:pointer; } .red { width: 1024px; background: red; font-size: 40px; } .green { background: green; font-size: 40px; } .blue { background: blue; font-size: 40px; } .yellow { background: yellow; font-size: 40px; } button { height: 120px; font-size: 40px; cursor: pointer; border-radius: 30px 0 0 0; /* border-top-right-radius: 40px; */} /*:hover - 마우스가 올라가면*/ button:hover { outline: 2px solid red; /*border: 10px solid black;*/ } /*#wrap > div : wrap의 바로 밑에 있는 div background-size:cover; : 요구하는 영역에 꽉차게 나옴*/ #wrap > div { height: 380px; margin-bottom: 20px; font-size: 25px; } .redbg { background-image: url("images/redcock.jpg"); background-size:cover; } .greenbg { background-image: url("images/greencock.jpg"); background-size:cover;} .bluebg { background-image: url("images/bluecock.jpg"); background-size:cover;} .yellowbg { background-image: url("images/yellowcock.jpg"); background-size:cover;} #upBtn { width: 100%; height: 50px; margin-top: 30px; background-color: darkslategrey; cursor:pointer; } #upBtn p {color : white; font-size: 25px; text-align: center; line-height: 200% } /*position: absolute - 절대 위치 / list-style: none - 리스트 앞에 점 없앰 / transition: border-radius 0.35s; - border-radius가 0.35초 동안 변함 / transition: border-radius 0.35s ease 1s; - 1초의 딜레이 후에 0.35초 동안 변함*/ aside { position: absolute; top: 150px; right: 2px; outline: 1px solid rgba(90,90,90,1); transition: all 1s;} .colorBtn li { width: 50px; height: 50px; list-style: none; font-size: 16px; color: white; margin: 5px; margin-left: -30px; text-align: center; line-height: 50px; cursor: pointer; transition: border-radius 0.35s; } .colorBtn li:hover { border-radius: 50%; } .colorBtn li:nth-child(1) { background-color: lightgray; } .colorBtn li:nth-child(2) { background-color: teal; } .colorBtn li:nth-child(3) { background-color: tomato; } .colorBtn li:nth-child(4) { background-color: violet; } .colorBtn li:nth-child(5) { background-color: yellowgreen; } #left { position: absolute; top: 130px; left: 2px; outline: 1px solid rgba(90,90,90,0.1); transition: all 0.5s;} .eleBtn li { width: 50px; height 50px; list-style: none; background-color: rgba(90,90,90,0.2); font-size: 16px; margin: 5px; margin-left: -30px; text-align: center; line-height: 50px; border: 1px solid gray; cursor: pointer; transition: border-radius 0.35s; } .eleBtn li.off { background-color: black; } .eleBtn li:hover { border-radius: 50%; } /*myain라는 애니메이션에 %마다 속성을 부여*/ @keyframes myani { 0% { color: white; } 25% { color: gray; } 50% { color: black; } 75% { color: blue; } 100% { color: white; } } /* animation: myani 3s linear infinite; - animation: 애니메이션이름 몇초동안 일정한속도 무한반복*/ span { animation: myani 3s linear infinite; } //window.onload : 스크립트가 불러오려는 클래스보다 위에있는 경우 아래의 코드를 다 불러들인 후에 해당 스크립트를 실행 ( 스크립트가 위에 있어도 실행됨 ) /* window.onload = function(){ var h1 = document.querySelector(".title") h1.style.color = "red"; } */ //$(document).ready() : //아래의 코드는 위의 window.onload = ... 코드와 같은 역할을 함 $(document).ready(function(){ var h1 = $(".title") h1.css("color","blue"); //toggle(1000): 1000은 1초 toggle은 글자가 사라지게 $(".rr").toggle(1000); $(".gg").toggle(1000); $(".bb").toggle(1000); $(".yy").toggle(1000); $(".rview").click(function(){ $(".rr").slideToggle(1000); }); $(".gview").click(function(){ $(".gg").slideToggle(1000); }); $(".bview").click(function(){ $(".bb").slideToggle(1000); }); $(".yview").click(function(){ $(".yy").slideToggle(1000); }); $("footer").click(function(){ //html,body : ,를 사용하여 두개의 태그에 적용 //animate({적용시켜야할것},시간) / scrollTop:0은 scrollTop의 값을 0으로 만든다 / 500은 0.5초 $("html,body").animate({scrollTop:0},500) }); var redPos = $(".red").offset().top $("ol li:nth-child(1) img").click(function(){ $("html,body").animate({scrollTop:redPos},500) }); var greenPos = $(".green").offset().top $("ol li:nth-child(2) img").click(function(){ $("html,body").animate({scrollTop:greenPos},500) }); var bluePos = $(".blue").offset().top $("ol li:nth-child(3) img").click(function(){ $("html,body").animate({scrollTop:bluePos},500) }); var yellowPos = $(".yellow").offset().top $("ol li:nth-child(4) img").click(function(){ $("html,body").animate({scrollTop:yellowPos},500) }); $(window).scroll(function(){ //winTop 변수에 현재 scrollTop값을 저장해줌 (this는 window를 가리킴) var winTop = $(this).scrollTop(); var newPos = winTop + 150; var newPosLeft = winTop + 130; //aside의 top 값을 newPos 값으로 바꾸어줌 $("aside").css("top",newPos); $("#left").css("top",newPosLeft); }); $(".colorBtn li").click(function(){ var myColor = $(this).index(); var myColorList = ['lightgray','teal','tomato','violet','yellowgreen']; $("#wrap").css('background-color',myColorList[myColor]); //$("#wrap").css({"":"","":""}); - 여러개의 속성값을 부여할때는 {}을 사용하면됨 /* 예시 $("#wrap").css({ "font-size" : "50px", "color" : "blue" }); */ }); $(".eleBtn li").click(function(){ var myContents = $(this).index(); $("ol li").eq(myContents).toggleClass("off"); $(".eleBtn li").eq(myContents).toggleClass("off"); //red if( $("ol li:nth-child(1)").hasClass("off") ) { $(".red").css("display","none"); $(".redbg").css("display","none"); } else { $(".red").css("display",""); $(".redbg").css("display",""); } //green if( $("ol li:nth-child(2)").hasClass("off") ) { $(".green").css("display","none"); $(".greenbg").css("display","none"); } else { $(".green").css("display",""); $(".greenbg").css("display",""); } //blue if( $("ol li:nth-child(3)").hasClass("off") ) { $(".blue").css("display","none"); $(".bluebg").css("display","none"); } else { $(".blue").css("display",""); $(".bluebg").css("display",""); } //yellow if( $("ol li:nth-child(4)").hasClass("off") ) { $(".yellow").css("display","none"); $(".yellowbg").css("display","none"); } else { $(".yellow").css("display",""); $(".yellowbg").css("display",""); } }); }); History of Cocktail Red Cocktail Green Cocktail Blue Cocktail Yellow Cocktail History View/Hide Red Cocktail "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" History View/Hide Green Cocktail "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" History View/Hide Blue Cocktail "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" History View/Hide Yellow Cocktail "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" ↑ TOP ↑ 1 2 3 4 5 1:OFF 2:OFF 3:OFF 4:OFF

from http://kimgom2.tistory.com/148 by ccl(A) rewrite - 2021-12-01 13:01:56