자유롭고 싶은 직장인

JQuery 에서는 다양한 애니메이션 효과를 함수로 제공하는데, 오늘은 슬라이드 효과에 대해서 알아보자. JQuery에서는 함수를 이용하여 간단하게 요소를 숨기거나 슬라이드 효과를 줄 수 있다. slide 관련 함수는 .slideDown(), .slideUp(), .slideToggle() 총 3가지가 있다. slideDown() 아래로 슬라이드 되면서 요소를 보여줌 slideUp() 위로 슬라이드 되면서 요소를 숨김 slideToggle() 요소의 상태에 따라 위로 혹은 아래로 슬라이드 보통 우리가 보는 댓글 더보기나 FAQ 같은 곳에서 많이 쓰이고 있다. 간단하게 예제로 확인해 보자 슬라이드 슬라이드 내용 위와 같이 HTML을 작성 해준다. .component-title을 클릭시 component-c..

모달창이란? 우리가 흔히 화면을 개발할 때 많이 쓰는 요소로, 보통 레이어 팝업이라고도 합더 모달은 화면 위에 레이어를 더 만들어 부가적인 일을 처리할 수 있게 만드는 기능이다. 먼저 html을 만들겠습니다. 모달창 나와랏! 모달창을 열고 닫을 button이 필요 합니다. 다른 태그로 만들어도 상관은 없습니다. 이제 모달창이 필요 하니, 모달창을 만들어 줍니다 그리고 이어서 모달창을 만들어 줍니다.

제이쿼리 셀렉터란? 제이쿼리를 선택하는 가장 큰 이유는 제이쿼리 선택자이다. CSS의 선택자를 그대로 사용할 수 있기 때문에 CSS를 해왔던 사람한테는 거부감이 덜 할 것이다. 제이쿼리의 선택자는 $(선택자)의 형태를 띄고 있다. 제이쿼리에 중독되는 이유 제이쿼리에 중독되는 이유는 간단하다. 너무나도 쉬운 선택자 때문이다. 예를들어 title이라는 태그를 선택할때를 살펴보면 알 수 있다. javascript = document.getElementById('title'); jquery = $("#title") 위의 두개를 비교했을 때 너무나도 간단하게 엘리먼트를 선택 할 수 있다. 물론 javascript es5버전 부터는 querySelector가 나오긴 했지만 제이쿼리 선택자를 보고 있으면 이마저도 길..

오늘은 간단하게 동작하는 탭메뉴를 만들어 보려고 합니다. 홈페이지에서 많이 쓰이는 탭메뉴인데 제이쿼리를 이용해서 간단히 만들어 보겠습니다. 먼저 HTML을 작성해 줍니다. 탭1 탭2 탭2 탭1 내용 탭2 내용 탭3 내용 html만 입력했더니, 너무 볼품없어 보이니깐, css를 입혀줍니다. .tabs{list-style:none;} .tabs {display:flex;border:4px solid #dfdfdf;border-radius: 20px;padding:0 14px;} .tabs li {position:relative;text-align: center;} .tabs li + li::before {content:" ";position:absolute;left:0;top:50%;width:1px;hei..