결과
HTML
<footer id="footer" class="footer-box">
<div class="container">
<div class="footer-inner-wrap">
<div class="footer-inner">
<ul>
<li class="foot1">
<div class="tit">COMPANY</div>
<div class="txt">(주)리아모어소프트<br>
대표 심재홍 사업자등록번호
105-87-15982<br>
통신판매번호 2016-서울영등포-0438<br>
사업자번호조회
</div>
</li>
<li class="foot2">
<div class="tit">INFORMATION</div>
<div class="txt">
이용약관/ 개인정보처리방침<br>
저작권(라이선스)규정
</div>
</li>
<li class="foot3">
<div class="tit">CLIENT CENTER</div>
<div class="txt">
이메일문의 <span>support@mangoboard.net</span> <br>
전화문의 <span>[자주묻는질문]FAQ 답변에 문의 별</span> <br>
<span> 전화번호가 안내되어 있습니다.</span>
</div>
</li>
</ul>
</div>
<div class="util">
<ul>
<li><a href="#"><img src="./images/foot_b_ico.png" alt="blog" title="망고보드 블로그북 바로가기"></a></li>
<li><a href="#"><img src="./images/foot_f_ico.png" alt="facebook" title="망고보드 페이스북 바로가기"></a></li>
<li><a href="#"><img src="./images/foot_n_ico.png" alt="naver" title="망고보드 네이버 바로가기"></a></li>
<li><a href="#"><img src="./images/foot_p_ico.png" alt="naver post" title="망고보드 네이버 포스트 바로가기"></a></li>
<li><a href="#"><img src="./images/foot_y_ico.png" alt="youtube" title="망고보드 유튜브 바로가기"></a></li>
</ul>
</div>
</div>
<div class="copy">MANGOBOARD INFOGRAPHICS, ALL RIGHTS RESEVED</div>
</div>
</footer>
CSS
#footer{width: 100%; height: auto; background: #fff;}
/* footer */
.footer-box > div{display: flex; flex-direction: column; padding: 60px 0;}
.footer-box .footer-inner-wrap{display: flex;}
.footer-box .footer-inner-wrap .footer-inner{flex-basis: 75%;}
.footer-box .footer-inner-wrap .footer-inner ul{display: flex;}
.footer-box .footer-inner-wrap .footer-inner ul li{flex-basis: 33.333%; padding: 0 20px;}
.footer-box .footer-inner-wrap .footer-inner ul li .tit{font-size: 14px; color: #1e1e1e; margin-bottom: 23px; font-weight: bold;}
.footer-box .footer-inner-wrap .footer-inner ul li .txt{font-style: 14px; color: #666; letter-spacing: -1px;}
.footer-box .footer-inner-wrap .footer-inner ul li.foot1{}
.footer-box .footer-inner-wrap .footer-inner ul li.foot2{flex-basis: 30%;}
.footer-box .footer-inner-wrap .footer-inner ul li.foot3{flex-basis: 36.667%;}
.footer-box .footer-inner-wrap .util{flex-basis: 25%;}
.footer-box .footer-inner-wrap .util ul{display: flex;}
.footer-box .footer-inner-wrap .util ul li{flex-basis: 20%; text-align: center;}
.footer-box .footer-inner-wrap .util ul li a{}
.footer-box .copy{margin-top: 20px;}
@media screen and (max-width: 1100px){
.footer-box .footer-inner-wrap{display: flex; flex-wrap: wrap;}
.footer-box .footer-inner-wrap .footer-inner{flex-basis: 100%;}
.footer-box .footer-inner-wrap .util{flex-basis: 100%; margin-top: 20px;}
.footer-box .footer-inner-wrap .util ul li{flex-basis: 50px;}
}
@media screen and (max-width: 720px){
.footer-box .footer-inner-wrap .footer-inner ul{flex-wrap: wrap;}
.footer-box .footer-inner-wrap .footer-inner ul li.foot1{flex-basis: 100%;}
.footer-box .footer-inner-wrap .footer-inner ul li.foot2{flex-basis: 100%;}
.footer-box .footer-inner-wrap .footer-inner ul li.foot3{flex-basis: 100%;}
.footer-box .footer-inner-wrap .footer-inner ul li{border-bottom: 1px solid #ddd; padding-bottom: 10px;}
}
favicon 은 웹페이지 탭화면에 title과 함께 나오는 웹페이지 아이콘이다.
- 넣고자 하는 아이콘의 이미지를 선택하고 첫번째 선택란은 1번을 선택한다. 웹, 태블릿, 모바일 크기별로 선택 두번째 체크박스는 1번을 체크한다.
- 다운로드 링크를 눌러 사이즈별로 나오는 이미지를 받고 link와 meta html을 넣어준다.
- html에 붙여넣은 모습
- 결과
결과
HTML
<button class="btn1">버튼</button>
<span></span>
<br>
<br>
<button class="btn2">버튼</button>
<p></p>
<br>
<br>
<hr>
<div><button class="btn3">click</button></div>
<em class="em">내용1</em>
<br>
<br>
<div><button class="btn4">그룹메서드 버튼</button></div>
<em class="em1">내용2</em>
Script
$('.btn1').on("mouseover focus",function(){
$('span').text('welcome');
});
$('.btn1').on({"mouseout blur": function(){
$('span').text('');
}})
$('.btn2').on({"mouseover":function(){
$('p').html('<strong>그룹메서드</strong>')
}, "focus":function(){
$('p').html('focus 이벤트')
}, "mouseout":function(){
$('p').html('<strong>나감</strong>')
}})
$('.btn3').click(function(){
//$('.em').css({color:'red'});
$(this).parent().next().css('color','red');
});
$('.btn4').on({"mouseover focus":function(){
$(this).parent().next().css({color:'green'});
}, "mouseout blur":function(){
$(this).parent().next().css({color:'yellow'});
}
})
선택자 .btn1에 mouseover focus를 하면 바로 밑 span태그에 'welcome'을 나타나게 한다.
$('.btn1').on("mouseover focus",function(){ $('span').text('welcome'); });
결과
HTML
<p><button class="btn1">버튼1</button></p>
<p>내용1</p>
<p><button class="btn2">버튼2</button></p>
<p>내용2</p>
CSS
p{width: 300px; margin: 50px auto;}
button{border: none; background: #f00; color: #fff; padding: 20px;}
Script
$('.btn1').click(function(){
$('.btn1').parent().next().css({"color":"blue", "background":"yellow"});
});
$('.btn2').on({"mouseover focus":function(){
$('.btn2').parent().next().css({"color":"blue", "background":"yellow"})
}})
$('.btn1').off("click"); //강제로 끌때
$('.btn2').trigger("mouseover") //강제로 이벤트를 실행
강제로 이벤트를 끄거나 강제로 이벤트를 실행하게 한다.
- off(강제로 이벤트를 종료)
- trigger(강제로 이벤트를 실행)
결과
HTML
<p><a href="http://www.daum.net" class="btn1">버튼1</a></p>
<p class="txt1">내용1</p>
<p><a href="http://www.naver.com" class="btn2">버튼2</a></p>
<p class="txt2">내용2</p>
<p><a href="javascript:void()" class="btn4">버튼4</a></p>
<p class="txt4">내용4</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용</p>
CSS
p{width: 300px; margin: 50px auto;}
button{border: none; background: #f00; color: #fff; padding: 20px;}
Script
$('.btn1').on("click",function(e){
e.preventDefault();
$('.txt1').text('나는 하이퍼링크 가는곳으로 가지 않겠다').css({"background":"green"})
});
$('.btn2').on({"click": function(){
$('.txt2').text('나는 하이퍼링크 가는곳으로 가지 않겠다').css({"background":"teal"})
return false;
}});
$('.btn3').on("click",function(){
$('.txt3').text('나는 하이퍼링크 가는곳으로 가지 않겠다').css({"background":"pink"})
});
기존 html에서 a태그에 href를 다음, 네이버로 링크를 걸어두었지만 preventDefault 값으로 텍스트가 나오게 만들었다. click 함수를 이용하여 retrun false를 넣어 해당링크로 가는것이 멈추었다.
결과
HTML
<ul id="nav">
<li class="group"><a href="#" class="title">Title 1</a>
<ul class="sub">
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
</ul>
</li>
<li class="group"><a href="#" class="title">Title 2</a>
<ul class="sub">
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
</ul>
</li>
<li class="group"><a href="#" class="title">Title 3</a>
<ul class="sub">
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
</ul>
</li>
<li class="group"><a href="#" class="title">Title 4</a>
<ul class="sub">
<li><a href="#">sub1</a></li>
<li><a href="#">sub1</a></li>
</ul>
</li>
</ul>
CSS
*{margin: 0; padding: 0;}
a{text-decoration: none; color: #fff;}
body{width: 200px; margin: 20px auto; padding: 0; font-style: 13px;}
#nav{list-style: none;}
#nav>li{margin-bottom: 3px; background: tomato; text-align: center; line-height: 30px;}
#nav>li>a{display: block; width: 100px; height: 30px; background: tomato; }
#nav>li>ul{/* display: none; */ list-style: none;}
#nav>li>ul>li{height: 35px; background: midnightblue; margin-bottom: 2px;}
Script
방법1
$('.sub').hide();
$('.title').click(function(e){
e.preventDefault();
let th=$(this).next();
$('.sub').slideUp();
if(th.is(":visible")){
th.slideUp();
}else{
th.slideDown();
}
});
방법2
$('.sub').hide();
let subs=true;
$('.title').click(function(e){
e.preventDefault();
let th=$(this).next();
$('.sub').slideUp();
if(subs){
th.slideDown();
subs=false;
}else{
th.slideUp();
subs=true;
}
});
결과
HTML
<div class="header">
<ul class="menu">
<li><a href="#"><img src="./img/menu01_off.png" alt=""></a></li>
<li><a href="#"><img src="./img/menu02_off.png" alt=""></a></li>
<li><a href="#"><img src="./img/menu03_off.png" alt=""></a></li>
</ul>
</div>
CSS
@charset "utf-8";
*{margin:0; padding: 0;}
.header{background: #222; padding: 40px 0 0 42px; border-bottom: 8px solid tomato;}
.menu{list-style: none; height: 38px;}
.menu li{float: left; padding-left: 8px;}
Script
$('.menu>li>a').each(function(){
let a=$(this);
let img=a.find('img')
let src_off=img.attr('src');
let src_on=src_off.replace('_off','_on')
a.hover(function(){
img.attr('src',src_on);
},function(){
img.attr('src',src_off);
})
});
each 문을 사용하여 img의 src를 찾아서 replace 하여 _off _on으로 변경하게 만든다.