jQuery 연습 메뉴 펼치기 / 접기 아이콘 변경 addClass / removeClass / hasClass / if문 홈페이지 같은 데서 흔히 보이는... 리스트에 아이콘을 넣어서 메뉴를 펼치면 아이콘이나 스타일이 변하고 어쩌고 저쩌고... 그런 리스트를 만들고 싶었다. 간단해 보였는데... 처음에는 slideToggle(), toggleClass() 이 두 개로 뻘짓하다가 이건 뭔가 아니다 싶었다. 그 위치에 있는 요소를 바꿔치기 하고 싶은 거라 원래 있던 클래스는 없애고 새로운 클래스를 넣어줘야 했고, 슬라이드 옵션과 스타일 바꾸기를 동시에 구현, 그리고 클릭할 때마다 이벤트가 발생해야 됐다. 무작정 저기다 클래스를 넣는다고 능사가 아니더라(당연하지만...). 그래서 다른 방법을 찾아보았다. C..
jQuery 연습 3단 메뉴 slideToggle로 펼치기/접기 메뉴 슬라이드라고는 마우스 올리면 튀어나오고 치우면 숨겨주는 것밖에 모르고 있었던 나... 이번엔 메뉴를 클릭하면 나오게 구현하고 싶은데 2단 메뉴는 그렇다 치고 3단을 만들려니 이유도 모르게 자꾸 꼬여서 하루종일 머리를 굴렸다. slideToggle도 처음에 써봤을 때 자꾸 서브 메뉴를 누르면 엉뚱한 메뉴까지 말려들어가버려서 if문으로 한참 뻘짓하다가 드디어 방법을 찾았다. WEB Design Hue Saturation Value Share INTERIOR MARKETING POSTER 3단 메뉴 HTML 구조 nav { width: 150px; } ul { padding: 0; } li { list-style: none; line-hei..
태그가 들어간 요소를 누를 때마다 화면 번쩍번쩍 새로고침 되는 게 열 받아서 스크립트를 찾아봤다. 나한테 필요해서 박제해둔다. $('a').click(function(e) { e.preventDefault(); }); 잠시 헤맨 게 어이없을 정도로 아주 초간단...😉 웹디자인기능사 시험의 영향으로 이미지건 뭐건 일단 a 태그부터 박고 보는 버릇이 생겼는데, 여러모로 찾아보니까 그게 꼭 필수는 아닌 것 같다. 오히려 불필요하게 남발된 a 태그가 웹페이지 동작에 불편함을 주기도 하고 코딩도 복잡해지고... 아무 생각 없이 넣다가도 이게 왜 필요하지? 싶을 때가 많았다. 그래도 아직까진 태그 넣고 보는 게 권장사항인가? 몰겠다..... 언젠간 알게 되겠지
Javascript 연습용 문제 객체 오름차순 정렬과 출력 문제부터 어떻게 설명해야 할지 모르겠다. 배열 공부하면서 풀어보라고 문제 받은 순간 오브젝트가 뭐인지부터 찾아봤다. 자주 쓰인다고 하니 이번에 풀었다고 그냥 넘어가면 나중에 기억 못 할 것 같아서 정리한다. 찾아보고 배우면서 내 맘대로 이해한 방법을 낼름 적어보았다, 말 그대로 객체를 특정 요소 기준으로 오름차순으로 정렬한 뒤, 정렬한 객체 중 1등인 객체만 출력해보는 것이다. 정렬은 sort()를 사용하지 않고, 버블 정렬 알고리즘을 이용해 구현할 것이다. 전엔 콘솔 창 쓰는 법을 잘 몰라서 html에서 값을 가져오고 거기다가 다시 출력을 했었는데, 이번엔 좀 익히고 와서 결과 확인용 html은 만들지 않는다. 🥳 콘솔 창에 쳐보는 게 더 간단..
jquery 연습용 문제 for문을 활용해 input 태그 두 개에서 입력한 범위 내로 구구단 만들기 확인 일단 HTML에서 숫자를 입력할 input box 두 개와 버튼을 하나 만들어준다. 버튼을 클릭하면 출력이 되게 할 것이다. 그리고 밑에 결과값이 출력될 텍스트 영역을 생성해둔다. 스타일은 맘대로. // JQEURY $("#btn_table").click(function () { var num = $("#input_table").val(); //첫 번째 값 var num2 = $("#input_table2").val(); //두 번째 값 var dan = []; //임시 배열 //num2의 값이 num보다 작으면 실행 if(num < num2) { //num단부터 num2단까지 for(; num
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- Total
- Today
- Yesterday
- JavaScript
- 웹디자인기능사실기
- box-shadow
- a
- jQeury
- switch
- 구구단
- html
- 사이트추천
- 자격증
- Class
- 웹디자인기능사
- input
- 첫글
- float
- jquery
- Gradient
- border
- css
- 객체정렬
- if문
- object
- slideToggle
- hammy
- 3단메뉴