본문 바로가기

coding/jQuery

(8)
[jQuery] 버튼 누르면 리스트 나오게 안녕하세요. 플입니다. 오늘은 버튼을 누르면 보이지 않던 리스트를 나오게 만들어볼게요. 1. 준비 이 더보기 버튼을 누르면 아래로 리스트가 더 나오는 작업을 해줄 거예요. 저는 구분하기 쉽게 나중에 나타나는 리스트 즉, 태그에 class를 적어주었어요. 2. 클릭 $(function(){ $('.more').click(function(){ }) }); 먼저 더보기 버튼에 클릭 메서드를 넣어줄 거예요. .click()이 클릭 메서드예요. 말은 어렵지만 클릭을 하면 이러이러한 작업을 실행해줘 라는 명령어라고 생각하시면 된답니다. 클릭 뒤에 오는 함수 function()은 이제부터 함수 안에 있는 것을 실행하겠다는 말이에요. 여러 기능을 그룹으로 묶는다고도 생각할 수 있겠네요. .more은 뭔가요? .more..
[jQuery] 햄버거 메뉴 만들기 4 - animate() 안녕하세요. 플입니다. 오늘은 햄버거 메뉴 만들기 마지막 포스팅입니다. 1. fadeIn() 2020/05/12 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 3 - fadeIn() fadeIn()은 이전 포스팅에서 확인해주세요~ 2. 전체 코드 $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) $('.exit').click(function(){ $('.mnb button').fadeIn(); $('.mnb_inner').animate({ marginRight : '-40%' }, 1000 ); }) 먼저 햄버거 만들기 1부터 전체 코드를 ..
[jQuery] 햄버거 메뉴 만들기 3 - fadeIn() 안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 이어서 만들어볼게요. 1. animate() 2020/05/11 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 2 - animate() 이전 포스팅을 먼저 보고 오면 더 쉬우실 거예요. 2. fadeIn() $('.exit').click(function(){ $('.mnb button').fadeIn(); }) 햄버거 메뉴는 아이콘을 눌렀을 때 메뉴가 나오면서 아이콘이 사라지게 만들어야 해요. 그리고 사라진 아이콘은 메뉴가 없어지면 다시 나타나야 해요. 이번 포스팅에서는 fadeIn()을 이용해 아이콘이 다시 나타나게 만들어볼게요. $('.exit').click(function(){ // x 버튼을 클릭하면 $('.mnb button').f..
[jQuery] 햄버거 메뉴 만들기 2 - animate() 안녕하세요. 플입니다. 오늘은 지난 포스팅에 이어서 햄버거 메뉴를 만들어볼게요. 1. fadeOut() 2020/05/06 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 1 - fadeOut() 이전 포스팅을 같이 올려둘게요. 2. animate() $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) 일단 전체 코드를 보여드리고 시작할게요. 지난 포스팅에 있었던 fadeOut()도 보이네요. 반가워라 바로 아래 animate()로 넘어가 볼게요. $('.mnb button').click(function(){ // 아이콘 클릭할 때 $(this..
[jQuery] 햄버거 메뉴 만들기 1 - fadeOut() 안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 만들어볼게요. 1. 햄버거 메뉴 햄버거 메뉴란 보통 위의 이미지처럼 가로로 긴 둥근 모서리의 직사각형 모양이 세 개 정도 있는 모양의 메뉴를 말합니다. 모바일이 익숙한 사람은 보자마자 메뉴 버튼이라는 것을 쉽게 알 수 있죠. 모양이 햄버거와 비슷해서 햄버거 메뉴라고도 부릅니다. 기본적인 저런 모양 말고도 다양한 모양이 존재합니다. 원 세 개를 가로로 나열한 모양이라던가 혹은 홈페이지 디자인에 따라 개성 넘치는 모양들이 존재합니다. 오늘은 기본적인 모양으로 만들어봤어요. 2. 햄버거 메뉴 fadeOut 설명에 들어가기에 앞서 코딩은 개인마다 쓰는 방식이 조금씩 다르고, 또한 계속 발전해 나가고 있어요. 만약 이 글을 보는 당신이 지금 제가 알려드리는 코드보다 좀..
[jQuery] this를 이용해 버튼 색 바꾸기 안녕하세요. 플입니다. 오늘은 this를 이용해 클릭한 버튼의 색상을 바꿔보겠습니다. 1. 기본 색상 설정 $(".w_btn li button").css({ background:"#fff2d8" , color:"#065471" }); 먼저 기본 색상을 미리 설정해줍니다. 기본 색상 설정은 css로 설정함으로 css() 메서드를 이용해 배경색과 글자색을 정해줍니다. jQuery에서는 값을 ""(따옴표) 안에 넣어주시고, 각각 구분은 ,(쉼표)를 이용합니다. 2. 클릭한 버튼 색상 변경 $(".w_btn li:eq("+$(this).index()+") button").css({ background:"#065471" , color:"#ffc045" }); 클릭한 해당 버튼의 색을 변경하기 위해서는 this를 ..
[jQuery] 클릭하면 사라지는 더보기 버튼 안녕하세요. 플입니다. 오늘은 더보기 버튼을 클릭하면 사라지게 해 보겠습니다. 1. .click() 메서드 활용 먼저 클릭하면 사라지게 만들 것이니까 click() 메서드를 사용합니다. $(".sub2 .btn").click(function(){ }); ""(따옴표) 안에 있는 것은 더보기 버튼의 클래스명입니다. 클릭을 했을 때 일어날 동작을 적어주어야 하니까 click() 메서드 괄호 안에 함수를 만들어줍니다. 함수는 function(){ }을 적어서 중괄호 안에 원하는 동작을 적어줍니다. 쉽게 말해 click을 했을 때 일어나는 일을 적을 주머니라고 생각해주세요. 2. .fadeOut() 메서드 활용 더보기 버튼이 없어졌습니다. 숨기는 것은 fadeOut() 메서드를 이용해 할 수 있습니다. $("...
[jQuery] 아코디언 패널 만들기 안녕하세요. 플입니다. 오늘은 .slidDown()을 이용해 아코디언 패널을 만들어보겠습니다. 1. html 작성 태그를 이용해 아코디언 패널에 적을 내용을 만들어줍니다. 태그란 description list의 약자로 개념을 서술하는 리스트라고 생각하시면 됩니다. 가장 큰 특징은 태그에 입력한 글은 자동으로 들여 쓰기가 되어 태그의 설명이라는 것을 알려주는 것입니다. 2. 스타일 넣기 스타일은 예시 컨텐츠를 만들거라 간단하게 넣어줬습니다. 각각 프로젝트에 맞게 설정해주면 됩니다. css 적용 화면은 위와 같습니다. 3. $(function(){ }); jQuery를 사용하기 위해 $(function(){ }); 를 입력합니다. { } 안쪽에 코드를 입력합니다. 4. 감추기 영역은 처음에는 감춰져있어야 합..