JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="header">
  <div id="gnb">
    <ul>
      <li><a class="btn_nav1" data-nav="menu1" href="#section1">메뉴1</a></li>
      <li><a class="btn_nav2" href="#section2">메뉴2</a></li>
      <li><a class="btn_nav3" href="#section3">메뉴3</a></li>
      <li><a class="btn_nav4" href="#section4">메뉴4</a></li>
    </ul>
  </div>
</div>
<!-- // #header -->

CSS

#gnb{position:relative;padding:10px;}
#gnb a{border:1px solid red}
#gnb .btn_nav1{border-color:blue;}
#gnb .btn_nav2{border-color:green;}
#gnb .btn_nav2{border-color:red;}

JavaScript

/***** [ 위치 및 크기 다루기 ] *****/



// 기준좌표가 되는 부모(position:relative)를 반환
// http://findfun.tistory.com/220
$('#gnb ul').offsetParent().css('border', '1px solid blue');

// 지역좌표 위치 구하기
var posNum = $('#gnb a:eq(0)').position();
// 절대좌표 위치 구하기
var offsetNum = $('#gnb a:eq(0)').offset();
console.log('position: ', posNum.left, posNum.top);
console.log('offset: ', offsetNum.left, offsetNum.top);



/* [크기 구하기] */
// 기본 크기 구하기
$('#gnb').width();
$('#gnb').height();
// 기본 크기 + padding값 구하기
$('#gnb').innerWidth();
$('#gnb').innerHeight();
// 기본 크기 + padding + border값 구하기
$('#gnb').outterWidth();
$('#gnb').outterHeight();
// 기본 크기 + padding + border + margin값 구하기
$('#gnb').outterWidth(true);
$('#gnb').outterHeight(true);



/* [크기 설정하기] */
// 기본 크기 설정
$('#gnb').width(100);
$('#gnb').height('200%');
// 기본 크기 + padding값 설정
$('#gnb').innerWidth(100);
$('#gnb').innerHeight('200%');



/* [요소의 스크롤 위치 다루기] */
// 스크롤 위치 구하기
$(window).scrollLeft();
$(window).scrollTop();
// 스크롤 위치 설정하기
$(window).scrollLeft(200);
$(window).scrollTop(500);