web standard/css2012. 8. 23. 13:58

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 수라
web standard/responsive web2012. 3. 19. 15:13

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 수라
web standard/jquery2012. 2. 29. 09:45
[좌우]
<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">
        <!-- contents01 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents01 -->
        <!-- contents02 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents02 -->
        <!-- contents03 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents03 -->
    </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 수라
web standard/jquery2012. 2. 21. 17:25
<!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 수라
web standard/jquery2012. 2. 13. 15:57
출처 : 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 수라
web standard/jquery2012. 2. 13. 15:55
출처 : 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 수라
web standard/jquery2012. 1. 26. 11:42
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<script type="text/javascript">
var num = 1;
$(document).ready(function() {
    $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    $("ul.paging li.prev").click(function() {
        num--;
        if (num < 0) {num = 0; };
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
    $("ul.paging li.next").click(function() {
        num++;
        var max=($("ul.tabMenu01 li").size())-1;
        $("div.tabCont > div.cont img").attr("src", "sian_"+num+".jpg");
    });
});
</script>
<style>
* {margin:0;padding:0;}
img {width:100%;border:none;}
</style>
</head>
<body>
<div class="tabCont">
    <div class="cont"><img src="sian_01.jpg" usemap="#link1" alt="" /></div>
</div>
<ul class="paging">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
</body>
</html>

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

수평네비게이션 기초  (0) 2012.02.13
수직네비게이션 기초  (0) 2012.02.13
스크롤 따라다니는 퀵메뉴  (0) 2011.11.21
iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
Posted by 수라
web standard/layout2011. 12. 30. 11:32
<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var RollingRcount = 1;
 var RollingRstatus = 1;
 jQuery().ready(function ($) {
 
  $("#mailRolling ul li.rollSelected").animate({width: '642'}, 400);
  setInterval(fn_Rolling,500);
 
  $("#mailRolling ul li").click(function(){
   if(!$(this).hasClass("rollSelected"))
   {
    RollingRstatus = 0;
    RollingRcount = parseInt($(this).attr("rel")) + 1;
    $("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
   
    $(this).animate({width: '642'}, 500).addClass("rollSelected");
    setTimeout(function(){RollingRstatus = 1;}, 5800);
   }
  });
 });

 function fn_Rolling()
 {
  if(RollingRstatus == 1)
  {
   jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
  
   var liNum = RollingRcount % 5; 
   jQuery("#mainRolling"+liNum).animate({width: '642'}, 500).addClass("rollSelected");
   //jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
 
   RollingRcount += 1;
  }
 } 
</script>


<style>
div#mailRolling {}
div#mailRolling ul{}
div#mailRolling ul li{float:left; width:80px;overflow: hidden;}
div#mailRolling ul li.rollSelected{}
div#mailRolling ul li img{cursor:pointer;}


</style>
</head>

<body>
<div class="visual_box" id="mailRolling">
    <ul>
     <li class="rollSelected" id="mainRolling0" rel="0"><img src="sm5_intro.flv_01.jpg" /></li>
     <li class="pdl2" id="mainRolling1" rel="1"><img src="sm5_intro.flv_01.jpg" /></li>
     <li class="pdl2" id="mainRolling2" rel="2"><img src="sm5_intro.flv_02.jpg" /></li>
     <li class="pdl2" id="mainRolling3" rel="3"><img src="sm5_intro.flv_03.jpg" /></li>
     <li class="pdl2" id="mainRolling4" rel="4"><img src="sm5_intro.flv_04.jpg" /></li>
     <li class="pdl2" id="mainRolling5" rel="5"><img src="sm5_intro.flv_05.jpg" /></li>
    </ul>
   </div>


</body>
</html>

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

상하스크롤시 따라다니는 박스(none script)  (0) 2010.11.10
레이아웃에 사용되는 두가지 속성 position 과 float  (0) 2008.07.29
layout (블로그형)  (0) 2008.07.29
layout  (0) 2008.07.29
Posted by 수라
web standard/script2011. 11. 21. 20:30

<script type="text/javascript">

frmUrl = 'http://www.naver.com/a.htm?ace=1214&enter=6001'  //예문용 경로입니다. 사용하실때는 아랫줄의 경로를 이용하세요
//frmUrl = location.href                 //사용하실대는 이줄의 주석을 지우고 상단의 예문을 지우세요


varCut = frmUrl.indexOf("?")               //전송된 값을 받기위해 ?의 순서를 찾습니다.

varCheck = frmUrl.substring(varCut+1)           //?의 뒷값을 구하여 사용할 값을 뽑아냅니다.

var varList = varCheck.split("&")              //&를 기준으로 배열변수로 만들어놓습니다.

forCount = varList.length                //총배열갯수를 구합니다.

for(i=0; i < forCount; i++)                 //배열갯수만큼 포문을 돌려 변수를 정의합니다.
 {
  eval(varList[i])                  //경로의 특성을 살려 eval로 그냥 쉽게 뽑아놨습니다.
  /*
  변수를 새로 지정하고 싶다면
 
  포문 위에 var 변수명 = new Array 을 쓰고

  도는 포문앞에 변수명[i] = varList[i]

  로 바까쓰시면 됩니다.
  */
 }

 


/*
해당 경로의 받아온값을 바로 변수화 해서 사용합니다.

request("ace")로 받아야할값은 ace의 변수로 저장이되고 값은 1214그대로 사용됩니다.

아래 처럼 변수가 지정되어 값을 가지고있습니다.
*/

alert(ace)     //테스트용 얼럿창
alert(enter)    //테스트용 얼럿창

</script>


Posted by 수라
web standard/jquery2011. 11. 21. 16:20

참조 : http://blog.nettor.com/jquery_quick/quick.html

<script type="text/javascript">
var quick_menu = $('#quick_menu');
var quick_top = 100;
/* quick menu initialization */
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
    quick_menu.css('top', quick_top );
    //quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 500 ); //스크롤중간에서 refresh할떄 이동
    $(window).scroll(function(){
        quick_menu.stop();
        quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 1000 );
    });
});
</script>


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

수직네비게이션 기초  (0) 2012.02.13
이미지 순차적으로 스위칭  (0) 2012.01.26
iframe 다루기  (0) 2011.11.16
로그인 입력폼 description 제어  (0) 2011.11.09
이미지 슬라이드  (0) 2011.11.08
Posted by 수라