반응형 페이지 1-7

결과

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">
									이메일문의 &nbsp;<span>support@mangoboard.net</span> <br>
									전화문의 &nbsp;&nbsp;&nbsp;&nbsp;<span>[자주묻는질문]FAQ 답변에 문의 별</span> <br>
									<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;전화번호가 안내되어 있습니다.</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 사용하기

favicon 적용방법

favicon 은 웹페이지 탭화면에 title과 함께 나오는 웹페이지 아이콘이다.

  1. https://www.favicon-generator.org/ 에 들어간다.

  1. 넣고자 하는 아이콘의 이미지를 선택하고 첫번째 선택란은 1번을 선택한다. 웹, 태블릿, 모바일 크기별로 선택 두번째 체크박스는 1번을 체크한다.

  1. 다운로드 링크를 눌러 사이즈별로 나오는 이미지를 받고 link와 meta html을 넣어준다.

  1. html에 붙여넣은 모습


  1. 결과


JQuery

on , click 메서드

결과

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');
});

trigger

결과

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(강제로 이벤트를 실행)

preventDefault

결과

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를 넣어 해당링크로 가는것이 멈추었다.


JQuery menu

vertical 메뉴 만들기

결과

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;
    }
    }); 

rollover 메뉴 만들기

결과

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으로 변경하게 만든다.

0개의 댓글