[jQuery] 클릭 이벤트로 드롭다운 메뉴 나타내기 / 토글 / 슬라이드 토글
항상 이미 누가 처음부터 끝까지 만들어놓은 스크립트를
수정만해서 진짜 쉬운 부분은 모르는게 많았다
오늘은 강사님 왈 "장난 수준인" jQuery 스크립트를 작성해 보았다
1. 아래와 같은 메뉴가 있다.
보통 볼 수 있는 드롭다운 메뉴처럼 일단은 소개 아래의 소개, 매장안내, 오시는길은 보이지 않아야 한다.
jQuery 라이브러리를 불러오고 (구글에 jquery google cdn 치면 나옴)
위와 같이 스크립트를 작성한다.
보이지 않아야 하는 #gnb .sub를 선택하고 hide 명령을 하면 서브메뉴가 보이지 않게 된다
클릭 이벤트와 클릭시 작동될 부분을 적어준다
그러면 클릭시 서브메뉴가 보이게 된다.
하지만 이 경우 계속 보이게 되어서 처음 클릭하면 보여주고, 다시 클릭하면 사라지게 만들어보았다.
단지 show를 toggle로 바꾸기만 해도 적용이 된다는게 신기(..ㅎㅎㅎㅎ)
이번에는 보통 메뉴처럼 슬라이드를 시켜보자.
슬라이드 시키는 경우도 클릭하면 슬라이드되고, 다시 클릭하면 보이지 않게도 할 수 있다.
slideDown 대신 slideToggle을 적으면된다!
신기해....................하지만 너무쉬워...아직 멀었어ㅠㅠㅠ
[PHP기초] print , echo , print_r 등 기본 출력
주말에 공부를 좀 했어야 했는데
너무 게으르게 그냥 쉬고만 있었다
PHP기초 2번 강의를 꿈날개에서 들었다.
기본 출력 함수에 관한 내용이다
가장 기본이 되는 print()
프린트 함수의 경우 워낙 많이 들어봤다보니
그나마 조금 친근한 편
몰랐는데 괄호 없이도 되는구나.
이렇게 html이랑 섞어쓰니까
나같은 사람은 꼭 배워야 한다는거..ㅠ
뭐 배워서 도움 안 되는게 어디있겠음!
몰랐던 내용..!
echo 함수가 print 함수보다 빠르구나..
반환값에 대한 내용도 체크!
취할 수 있는 인수의 개수도 확인!
이건 처음 보는 함수
print_r의
r은 return의 r 이라고 한다
기본 프린트 함수에 return에 관한 속성을 넣을 수 있다
기본값은 false (반환 없음)
예시로 설명을 해 주시다보니
보다 알기 쉬웠당 ㅎㅎ
리턴속성에 false를 넣으면 출력이 되지만
true를 넣으면 출력이 안 된다는거!
세 번째의 경우도 print 함수로는 출력이 안됨!
대신 맨 마지막 줄에 echo 함수로 변수를 불러와서 출력이 된다는 것!
신기하당
신기신기
아... 이렇게 기초적인거 밖에 모르는데..
언제 하고 싶은거 만들 수 있을까 모르겠네 ㅠㅠ
'매일매일 공부 > 백엔드' 카테고리의 다른 글
| [PHP 기초] PHP 기본 문법 배우기 (0) | 2017.11.21 |
|---|---|
| 백엔드 공부! PHP 공부 시작 (0) | 2017.11.21 |
브라우저 기능검사 / 브라우저 호환성 / SVG 지원 불가일 때 대체 이미지 띄우기
제일 속상할때가
열심히 만들어놨는데
익스에서 동작 안 할때...........ㄱ-...
우리나라에서 가장 많이 쓰는 인터넷익스플로러가 지원하는 내용이 적어서
항상 브라우저 호환성을 염두에 두고 작업을 해야한다
하지만 만들고 발견하는 경우가 허다하니..
이런 부분을 보완해주는 것이 바로 Modernizr 모더나이저이다
구글에서 modernizr.com 을 입력하면 바로 들어간다
사용하는 브라우저의 특성에 대응해준다고 한다.
영어로 되어있지만 당황하지 않고
Add your detects 버튼을 눌러준다
그럼 이렇게 지원이 필요한 기능을 선택할 수 있다
오늘의 경우 SVG 이미지가 지원 안 되는 브라우저일 때
SVG 이미지 대신 대체 이미지를 띄울 부분을 보완하는 것이라
SVG만 클릭했다
클릭하면 이렇게 오른쪽에 SVG에 관한 내용이 나온다.
그냥 그 위의 BUILD 버튼을 눌러주면된다
그럼 이렇게 팝업이 뜨는데,
Build 부분의 DOWNLOAD 를 눌러주면 된다.
js 파일을 다운 받는 것이라 경고창이 나타난다
무시하고 계속 받으면 된다
다운로드 받은 modernizr!
이를 보완이 필요한 페이지에 link태그로 연결하고
스크립트 내용을 넣어주면 된다.
만약 muffin.svg 이미지가 표시되지 않는경우
pf.png 를 보여주라는 내용의 스크립트!
자바 스크립트 잘 못 쓰는 나도
이건 쉬웠다..헤헿
'매일매일 공부 > 유용한 자료' 카테고리의 다른 글
| 웹 코더 JS Bin / HTML 코드 작성하기 / 실시간 코딩하기 (0) | 2017.11.16 |
|---|---|
| [웹표준] 다음 웹표준 가이드 (0) | 2017.11.09 |
| 웹디자이너 포트폴리오 참고자료 / 웹디자인 포트폴리오 / 웹사이트 디자인 사이트 (0) | 2017.11.03 |
| 그라디언트 쉽게 사용하기 / webgradients / 그라디언트 CSS 코드 생성기 / 그라데이션 (0) | 2017.11.02 |
| 포토샵 플러그인 / 쉽게 포토샵 사용하기 / Assistor PS (0) | 2017.11.01 |
