'전체 글'에 해당되는 글 128건

안드로이드에서 레이어팝업 (0)	2011.03.21
안드로이드 - dip -> pixel (0)	2010.12.22
모바일웹사이트 제작시 고려사항 (0)	2010.12.02
뷰포트(VIEWPORT) (0)	2010.11.30
css3 media 쿼리 예시(모바일웹) (0)	2010.11.30

반응형웹의 시작 (0)	2012.03.19

이벤트 설정 시에 jQuery의 .on()을 사용하자. (0)	2014.10.13
[jquery] ajax 방법 (0)	2014.04.11
width가 100%인 이미지에 맵 걸기 (0)	2013.04.22
좌우(상하) 슬라이드 (0)	2012.02.29
lnb 슬라이드메뉴 (0)	2012.02.21

width가 100%인 이미지에 맵 걸기

출처 : https://github.com/stowball/jQuery-rwdImageMaps

c stowball / jQuery-rwdImageMaps

JavaScript

Responsive Image Maps jQuery Plugin — Read more

http://mattstow.com

HTTP SSH Git Read-Only

Read-Only access

Tags

10 commits

Support images with no width/height attributes (HT @blueyed )

latest commit 13ec7dc613

stowball authored 5 months ago

README.md	a year ago	Added link to demo [stowball]
jquery.rwdImageMaps.js	5 months ago	Support images with no width/height attributes (HT @blueyed ) [stowball]
jquery.rwdImageMaps.min.js	5 months ago	Support images with no width/height attributes (HT @blueyed ) [stowball]

README.md

jQuery RWD Image Maps

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize

Usage:

$('img[usemap]').rwdImageMaps();

Demo:

http://www.mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

[jquery] ajax 방법 (0)	2014.04.11
jQuery Slider plugin (0)	2014.01.09
좌우(상하) 슬라이드 (0)	2012.02.29
lnb 슬라이드메뉴 (0)	2012.02.21
수평네비게이션 기초 (0)	2012.02.13

Posted by 수라

div에 글을 써넣으면 '\n'이 먹히지 않는다. 그리고 같은 글자가 반복되어서 나오면("+++++++++..." 같은것)
div영역을 뚫고 나가버린다. 이를 해결하기 위해서 CSS의 white-space와 word-break를 써야한다.

white-space
줄바꿈 해주는 property로 normal, nowrap, pre, pre-line, pre-wrap이 있다.

normal은 보통의 경우로 옵션을 주지 않아도 된다.
nowrap은 줄바꿈을 하지 않는다.(div를 뚫고 나간다.)
pre는 html의 <pre>태그처럼 내부의 태그를 실행시켜주지만 이역시 줄바꿈은 하지 않는다.
pre-line은 normal + pre. 줄바꿈도 해주고 태그도 실행한다.
pre-wrap는 pre-line과 비슷 하지만 pre-line은 연속되는 공간(" ")을 한칸으로 압축하지만
pre-wrap는 압축하지 않고 그대로 보여준다.

word-break
한단어가 길게 이어질때 자동으로 잘라주는 property이다.

normal은 자르지 않는다.
break-all은 영역을 넘어가면 무조건 자른다.
hyphenate는 영역을 넘어가더라도 단어를 유지해준다.
keep-all은 한글일 경우 띄어쓰기 기준으로 자른다.(only IE)
현재 word-break는 5대 브라우저중 FF와 Opera만 지원하지 않는다.

word-wrap
normal은 자르지 않는다.
break-word는 단어단위로 자른다.

(CSS3를 지원하는) 모든 브라우저에서 단어별로 줄바꿈하고 반복되는 단어를 자르려면(한글 제외)

white-space: pre-wrap;

word-wrap: break-word;
옵션을 추가하면 된다.

출처1:
[CSS] 텍스트 줄바꿈 처리 word-break, white-space

출처2:
pre-line과 pre-wrap 차이

출처3:
word-break와 word-wrap

저작자표시 비영리

'web standard > css' 카테고리의 다른 글

브라우저 핵 종결자 (0)	2016.10.06
파폭용핵 (0)	2010.11.17
CSS 이야기: overflow 속성의 float 해제 효과 (0)	2010.03.05
css 핵 (0)	2008.07.29
css제대로 사용하기 (0)	2008.07.29

Posted by 수라

반응형웹의 시작

http://remysharp.com/2009/01/07/html5-enabling-script/
ie8 이하에서 html5 tag인식을 위한 스크립트 추가
<!–[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

새로 추가된 요소의 속성 정의를 위한 css reset
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block
}

모바일에서 페이지뷰를 할때 적절히 확대를 하기 위한 viewport 예시 (font 등을 %나 em으로 정의해도 될듯)
<meta
  name="viewport"
  content="
    width=device-width,
    initial-scale=1,
    minimum-scale=1,
    maximum-scale=1,
    user-scalable=no"
/>

n-screen에 대응하기 위한 css3 media queries

@charset “utf-8″;
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px){
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px){
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px){
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

or

<link rel="stylesheet" type="text/css" href="layer.css" />
<link rel="stylesheet" media="screen and (min-width: 687px) and (max-width: 1000px)" type="text/css" href="mediaq_pad.css" />
<link rel="stylesheet" media="screen and (max-width: 686px)" type="text/css" href="mediaq_m.css" />

저작자표시 비영리

'web standard > responsive web' 카테고리의 다른 글

media query 정의방법 예제 (0)	2014.01.20

Posted by 수라

좌우(상하) 슬라이드

[좌우]
<script type="text/javascript">
var pagging = 0;
$(document).ready(function() {
    var contWidth = $('.thumList').width();
    var cnum = ($('.slide > div').size())-1;
    var slideLeft = 0 - contWidth;
    $('.slide').css('width',contWidth*(cnum+1));
    $('.btnLeft').click(function() {
        pagging--;
        if (pagging < 0) {pagging = 0; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
    $('.btnRight').click(function() {
        pagging++;
        var max=cnum;
        if(pagging > max) {pagging = max; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
});
</script>

<div class="container">
    <div class="slide clfix">
        
        <div class="thumList cont1">
        </div>
        
        
        <div class="thumList cont1">
        </div>
        
        
        <div class="thumList cont1">
        </div>
        
    </div>
</div>

[상하] (페이징이 추가되고, 소스만 조금 다를뿐 방식은 위와 동일)
<script type="text/javascript">
var page = 1;    //시작페이지 카운트
var slideNum = 3;    //슬라이드 갯수

function pagging(num){
    var $slide = $('.slide');    //슬라이드할 class
    var $pagging = $('.pagging a');    //페이징 class
    var slideHeight = 0 - ($('.slide > ol').height());    //슬라이드에 필요한 수치값
    page = num;
    listTop = slideHeight * (num-1);
    $slide.animate({marginTop:listTop}, {duration:500});
    $pagging.removeClass('on');
    $pagging.eq(num).addClass('on');
}

$(document).ready(function() {
    $(".left").click(function(){
        page--;
        if (page < 1) {page = 1; };
        pagging(page);
        return false;
    });
    $(".right").click(function(){
        page++;
        var max=slideNum;
        if(page > max) {page = max; };
        pagging(page);
        return false;
    });
});

<div class="area">
    <div class="slide clfix">
        <ol>
            <li onclick="link(1);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(11);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(21);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
    </div>
</div>

저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

jQuery Slider plugin (0)	2014.01.09
width가 100%인 이미지에 맵 걸기 (0)	2013.04.22
lnb 슬라이드메뉴 (0)	2012.02.21
수평네비게이션 기초 (0)	2012.02.13
수직네비게이션 기초 (0)	2012.02.13

Posted by 수라

lnb 슬라이드메뉴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/inc/css/common.css" />
<script type="text/javascript" src="/inc/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function lnb(hn,sn){

    var $lnb = $('#lnb > ul > li');
    var $lnb_depth = $('.lnbDepth > li');

    $lnb.eq(hn-1).addClass('on');
    $lnb.eq(hn-1).find('.lnbDepth').children().eq(sn-1).addClass('sel');

    $lnb.find('ul').hide();

    $lnb.each(function(){
        if($(this).hasClass('on')){
            if($(this).find('div').next().is('ul')){
                $(this).find('div').next().slideToggle(300);
            }else{
                $(this).find('div').addClass('brnone');
            }
            $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
        }
    });

    $lnb.click(function(){

        if($(this).hasClass('on')) return false;

        $lnb.removeClass('on');
        $(this).addClass('on');


        $lnb.find('ul').slideUp(300);

        if($(this).find('div').next().is('ul')){
            $(this).find('div').next().slideToggle(300);
        }else{
            $(this).find('div').addClass('brnone');
        }

    });

    $lnb_depth.each(function(){
        if($(this).hasClass('sel')){
            $(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
        }
    });

    $('.lnbDepth li img').hover(function(){
        if($(this).parent().hasClass('sel')) return false;

        $(this).parent().addClass('over');
        $(this).attr('src', $(this).attr('src').replace('_off.gif', '_on.gif'));
    }, function(){
        if($(this).parent().hasClass('sel')) return false;

        $(this).attr('src', $(this).attr('src').replace('_on.gif', '_off.gif'));
        $(this).parent().removeClass('over');
    });

}
</script>
</head>
<body>
<div id="wrap">

    <div id="container">
        <div id="lnb">
            <ul class="menu">
                <li><a href="#"><img src="/images/news/lmenu_01_off.gif" alt="공지사항" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li><img src="/images/news/smenu_01_off.gif" alt="1" /></li>
                        <li><img src="/images/news/smenu_02_off.gif" alt="2" /></li>
                        <li><img src="/images/news/smenu_03_off.gif" alt="3" /></li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_02_off.gif" alt="Silk" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_03_off.gif" alt="진행 중 이벤트" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_04_off.gif" alt="당첨자 발표" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li><a href="#"><img src="/images/news/lmenu_05_off.gif" alt="지난 이벤트" /></a>
                    <div></div>
                    <ul class="lnbDepth">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
            </ul>
            <script type="text/javascript">lnb(1,1);</script>

        </div>
        <div id="contWrap">
        </div>
    </div>

</div>

</body>
</html>

저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

width가 100%인 이미지에 맵 걸기 (0)	2013.04.22
좌우(상하) 슬라이드 (0)	2012.02.29
수평네비게이션 기초 (0)	2012.02.13
수직네비게이션 기초 (0)	2012.02.13
이미지 순차적으로 스위칭 (0)	2012.01.26

Posted by 수라

수평네비게이션 기초

출처 : http://naradesign.net/wp/2011/07/02/1634/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    var gnbHr = $('.gnbHr');
    gnbHr.find('>ul>li>ul').hide();
    gnbHr.find('>ul>li>a')
        .mouseenter(function(){
            gnbHr
                .find('>ul>li>ul:visible')
                .slideUp(200)
                .parent('li')
                .removeClass('active')
                .find('>a')
                .css('fontWeight','');
            $(this)
                .next('ul:hidden')
                .slideDown(200)
                .parent('li')
                .addClass('active')
                .find('>a')
                .css('fontWeight','bold');
        })
        .focus(function(){
            //$(this).mouseover();
        })
        .end()
        .mouseleave(function(){
            gnbHr
                .find('>ul>li>ul')
                .slideUp(200)
                .prev('a')
                .css('fontWeight','');
        });
});
</script>
</head>

<body>
<div class="gnbHr">
    <ul>
        <li><a href="#">#1</a>
            <ul>
                <li><a href="#">#1-1</a></li>
                <li><a href="#">#1-2</a></li>
            </ul>
        </li>
        <li><a href="#">#2</a>
            <ul>
                <li><a href="#">#2-1</a></li>
                <li><a href="#">#2-2</a></li>
            </ul>
        </li>
        <li><a href="#">#3</a>
            <ul>
                <li><a href="#">#3-1</a></li>
                <li><a href="#">#3-2</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

좌우(상하) 슬라이드 (0)	2012.02.29
lnb 슬라이드메뉴 (0)	2012.02.21
수직네비게이션 기초 (0)	2012.02.13
이미지 순차적으로 스위칭 (0)	2012.01.26
스크롤 따라다니는 퀵메뉴 (0)	2011.11.21

Posted by 수라

수직네비게이션 기초

출처 : http://naradesign.net/wp/2011/07/02/1634/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    var gnbVr = $('.gnbVr');
    gnbVr.find('>ul>li>ul').hide();
    gnbVr.find('>ul>li>a[href=#]')
        .click(function(){
            gnbVr
                .find('>ul>li>ul:visible')
                .slideUp(200)
                .parent('li')
                .removeClass('active')
                .find('>a')
                .css('fontWeight','');
            $(this)
                .next('ul:hidden')
                .slideDown(200)
                .parent('li')
                .addClass('active')
                .find('>a')
                .css('fontWeight','bold');
            return false;
        })
        .focus(function(){
            //$(this).click();
        });
});
</script>
</head>

<body>
<div class="gnbVr">
    <ul>
        <li><a href="#">#1</a>
            <ul>
                <li><a href="#">#1-1</a></li>
                <li><a href="#">#1-2</a></li>
            </ul>
        </li>
        <li><a href="#">#2</a>
            <ul>
                <li><a href="#">#2-1</a></li>
                <li><a href="#">#2-2</a></li>
            </ul>
        </li>
        <li><a href="#">#3</a>
            <ul>
                <li><a href="#">#3-1</a></li>
                <li><a href="#">#3-2</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

저작자표시 비영리

'web standard > jquery' 카테고리의 다른 글

lnb 슬라이드메뉴 (0)	2012.02.21
수평네비게이션 기초 (0)	2012.02.13
이미지 순차적으로 스위칭 (0)	2012.01.26
스크롤 따라다니는 퀵메뉴 (0)	2011.11.21
iframe 다루기 (0)	2011.11.16

Posted by 수라

수라의 티스토리

'전체 글'에 해당되는 글 128건

모바일기기 해상도 체크

'web standard > mobile' 카테고리의 다른 글

media query 정의방법 예제

'web standard > responsive web' 카테고리의 다른 글

jQuery Slider plugin

'web standard > jquery' 카테고리의 다른 글

width가 100%인 이미지에 맵 걸기

c stowball / jQuery-rwdImageMaps

jQuery RWD Image Maps

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize

'web standard > jquery' 카테고리의 다른 글

줄바꿈 완련 style

'web standard > css' 카테고리의 다른 글

반응형웹의 시작

'web standard > responsive web' 카테고리의 다른 글

좌우(상하) 슬라이드

'web standard > jquery' 카테고리의 다른 글

lnb 슬라이드메뉴

'web standard > jquery' 카테고리의 다른 글

수평네비게이션 기초

'web standard > jquery' 카테고리의 다른 글

수직네비게이션 기초

'web standard > jquery' 카테고리의 다른 글

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바