팔로우

★디자인 개선 Tips

목차

※ 다음 코드는 모두 예제이오니, 각 사이트와 환경에 맞게 적절히 변경하여 사용 해주세요.

요소의 교체

CASE'요소C'를 '요소A'의 앞으로 이동한다.

SAMPLE

HTML


<p class="insert-a">요소A</p>
<p class="insert-b">요소B</p>
<p class="insert-c">요소C</p>

JavaScript


$(".insert-c").insertBefore(".insert-a");

※ '요소C'를 '요소A' 뒤로 이동하는 경우는 insertAfter를 사용합니다.

DEMO

Before

요소A

요소B

요소C

After

요소A

요소B

요소C

요소의 추가

CASE'요소A'의 앞에 '요소C'를 추가한다.

SAMPLE

HTML


<p class="before-a">요소A</p>
<p class="before-b">요소B</p>

JavaScript


$(".before-a").before('<p class="before-c">요소C</p>');

※ '요소A'의 뒤에 '요소C'를 추가하는 경우 after를 사용합니다.

DEMO

Before

요소A

요소B

After

요소A

요소B

요소의 복제

CASE'요소A'를 복사하여 '요소C'의 뒤에 추가한다.

SAMPLE

HTML


<p class="copyafter-a">요소A</p>
<p class="copyafter-b">요소B</p>
<p class="copyafter-c">요소C</p>

JavaScript


$(".copyafter-a").clone().insertAfter(".copyafter-c");

DEMO

Before

요소A

요소B

요소C

After

요소A

요소B

요소C

이미지 변경

CASE '요소A'의 사과 이미지를 오렌지 이미지로 변경한다.

SAMPLE

HTML


<img src="/hc/article_attachments/115000181521/apple.png" alt="요소A" />

JavaScript


$("img[src*=apple.png']").attr("src","/hc/article_attachments/115000187142/orange.png");

※ 이미지 속성도 함께 변경하려면 다음과 같이 작성합니다.
　예 [width] → $(“＊＊”).attr({"src”:”＊＊.png","alt":"","width”:”＊＊”});

DEMO

Before

After

요소A

요소의 보이기/숨기기

CASE'요소A'를 클릭하면 '요소A-1' '요소A-2' '요소A-3'이 표시된다.

SAMPLE

HTML


<p class="demo-title">요소A</p>
<ul class="demo-toggle">
<li>요소A-1</li>
<li>요소A-2</li>
<li>요소A-3</li>
</ul>

CSS


.demo-toggle {
    display: none;
}
.demo-title {
    margin:0;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #4c566c;
    padding: 8px 20px;
}
.demo-title:hover {
    background: #4c566c;
    color: #fff;
}
.demo-title:after {
    content: "＋";
    display: inline-block;
    margin-left: 10px;
}
.demo-title.open:after {
    content:"－";
}

JavaScript


$(function() {
    $(".demo-title").click(function(){
    $(this).next().slideToggle();
    $(this).toggleClass("open");
}); 
});

DEMO

Before

요소A

  • 요소A-1
  • 요소A-2
  • 요소A-3

After

요소A

  • 요소A-1
  • 요소A-2
  • 요소A-3

부드러운 스크롤

CASE'요소A'를 클릭하면 페이지 상단에 부드럽게 스크롤한다.

SAMPLE

HTML


<p class="smooth-scroll-title">
<a id="smooth-link" href="#">요소A</a>
</p>

JavaScript


$(function(){
   $('a#smooth-link').click(function() {
      var time = 400;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, time, 'swing');
      return false;
   });
});

DEMO

Before

요소A

After

요소A

요소를 고정 위치에 표시

CASE페이지를 스크롤하면 '요소A'가 페이지 왼쪽의 고정 위치에 표시된다.

SAMPLE

HTML


<ul class="anchor">
<li><a href="#insert">요소의 교체</a></li>
<li><a href="#add-content">요소의 추가</a></li>
・
・
・
</ul>

CSS


.anchor {
    margin-bottom: 0;
    position: fixed;
    top: 60px;
    left: 0;
}
.anchor li {
    list-style: none;
    margin: 0 0 10px 0;
}
.anchor li a:after {
    content: "≫";
    display: inline-block;
    position: absolute;
    right: 10px;
    font-size: 12px;
}
.anchor li a {
    text-decoration: none;
    border: 1px solid #4c566c;
    padding: 0 25px 0 5px;
    color: #4c566c;
    background:#fff;
    display:block;
    font-size:12px;
    border-left:none;
    position: relative;
}
.anchor li a:hover {
    background: #4c566c;
    color: #fff;
}

JavaScript


setInterval(function(){
   var scroll = $("body").scrollTop();
   var scrollY = 150;
   if(scroll > scrollY) {
      $(".anchor").show();
   } else {
      $(".anchor").hide();
   }
},100);

DEMO

Before

After

페이지 왼쪽의 목차

요소를 탭으로 전환

CASE여러 내용을 탭 메뉴에서 전환하여 표시한다.

SAMPLE

HTML


<ul class="tab-menu-area">
<li class="active">탭 요소A</li>
<li>탭 요소B</li>
<li>탭 요소C</li>
</ul>
<div class="tab-content active">내용 요소A</div>
<div class="tab-content">내용 요소B</div>
<div class="tab-content">내용 요소C</div>

CSS


ul.tab-menu-area{
    list-style: none;
}
ul.tab-menu-area li {
    float: left;
    padding: 8px 30px;
    background-color: #f2f2f2;
    cursor: pointer;
    line-height: 2em;
}
ul.tab-menu-area li:hover {
    color: #ff0000;
}
ul.tab-menu-area li.active {
    background-color: #4c566c;
    color: #fff;
}
div.tab-content {
    clear: both;
    border: 1px solid #ccc;
    padding: 20px;
    width: 636px;
    display: none;
}
div.active {
    display: block;
}

JavaScript


$(function() {
    $(".tab-menu-area li").click(function() {
        var num = $(".tab-menu-area li").index(this);
        $(".tab-content").removeClass('active');
        $(".tab-content").eq(num).addClass('active');
        $(".tab-menu-area li").removeClass('active');
        $(this).addClass('active')
    });
});

DEMO

Before

  • 탭 요소A
  • 탭 요소B
  • 탭 요소C
내용 요소A
내용 요소B
내용 요소C

After

  • 탭 요소A
  • 탭 요소B
  • 탭 요소C
내용 요소A
내용 요소B
내용 요소C

슬라이드 쇼 추가

CASE여러 이미지를 하나의 슬라이드 쇼로 표시한다.

SAMPLE

HTML


<div class="slide-in">
<img src="/hc/ja/article_attachments/202717702/Slack_for_iOS_Upload._null_.jpeg" alt="이미지1" width="300px" />
<img src="/hc/ja/article_attachments/202717662/Slack_for_iOS_Upload-2._null_.jpeg" alt="이미지2" width="300px" />
<img src="/hc/ja/article_attachments/202717682/Slack_for_iOS_Upload-1._null_.jpeg" alt="이미지3" width="300px" />
</div>

CSS


.slide-in { position:relative; width:300px;  }
.slide-in img { position:absolute; left:0; top:0; }

JavaScript


$('.slide-in img:gt(0)').hide();
setInterval(function() {
    $('.slide-in :first-child').fadeOut().next('img').fadeIn().end().appendTo('.slide-in');
}, 4500);

DEMO

Before

After

검증의 추가

CASE입력값이 없을 때 에러 메시지를 표시한다.

SAMPLE

HTML


    <p id="errer"></p>
    <input id="input" maxlength="20" name="chkinput" size="30" type="text" />
    <button id="check">확인</button>

CSS


    #errer { border: 1px solid #ccc; }

JavaScript


    $("#check").click(function() {
      if($("#input").val() == "") {
        $("#errer").text('입력값이 없습니다.');
        $("#errer").css('color','red');
      } else{
        $("#errer").text('OK!!');
        $("#errer").css('color','green');
      }
    });

DEMO

Before

 

After

 

도움이 되었습니까?
0명 중 0명이 도움이 되었다고 했습니다.
또 다른 질문이 있으십니까? 문의 등록

0 댓글

이 문서에는 댓글을 달 수 없습니다.