[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 |
[HTML5 API&AJAX] JDK 설치와 이클립스 개발 툴 설치
이 강좌도 JDK와 이클립스를 설치해야한다
하핫 어제도 설치 동영상 봤는데...ㅎㅎㅎㅎ
처음부터 끝까지 그냥 NEXT 클릭하면 됨...
하하....... 지루하다
개발툴은 이클립스 써도 되고, 메모장이나 에디트 플러스 사용해도 됨
나는 브라켓이 편했음....
어쨌든 이 강좌에선 이클립스를 설치함......ㅎ.....
쓸데없는 것도 세세하게 설명해주시네..대단해
이클립스 설치시 생성 파일의 저장 위치를 설정하라고 함
편하신 곳으로..ㅎ
설치는 완료...!
아무래도 이클립스 불편해......
뭐 설정할게 많아...........................
'매일매일 공부 > HTML&CSS' 카테고리의 다른 글
| HTML5 API & AJAX 를 이용한 홈페이지 꾸미기 기초강좌 수강 (0) | 2017.11.22 |
|---|
HTML5 API & AJAX 를 이용한 홈페이지 꾸미기 기초강좌 수강
이전 회사 개발실장님이 항상 아작스, 아작스라고 말씀하셨는데
온라인 취업지원서비스 꿈날개를 둘러보다보니 HTML 5 API 와 AJAX를 이용한 홈페이지 꾸미기라는
강좌가 있어서 수강하게 되었다
HTML5 API란 무엇일까??
HTML 보완를 위한 플러그인!
HTML5를 쉬운 기술과 어려운 기술로도 나눌 수 있다
쉬운 기술은 바로 태그를 이용한 화면 디자인
어려운 기술은 API를 사용한 디자인!
예 : 구글 지도 삽입 / 화면에 그림 삽입 / 동영상, 음악 삽입 등등
개발자들이 고생해서 만든 것을 몇 줄로 제어할 수 있는..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 강사님 설명이 웃기당
구글 지도나 다음 우편주소 등등을 쓰는 것들!
최근에는 새로운 기능들도..!
데이터 저장 , 데이터 베이스 역할 등도 있넹...
기초 과정이라 쉽게 배울 수 있을듯!
천천히 강의 봐야겠다
'매일매일 공부 > HTML&CSS' 카테고리의 다른 글
| [HTML5 API&AJAX] JDK 설치와 이클립스 개발 툴 설치 (0) | 2017.11.22 |
|---|
[PHP 기초] PHP 기본 문법 배우기
php의 개괄적인 설명을 듣고나서, "쉽다"고 하는 PHP의 기본 문법을 배웠다
PHP의 기본 문법!
시작 태그는 <?php 끝 태그는 ?>
물음표가 들어간다는 것이 특이한 점!
꺽쇠의 경우 html에서 많이 썼었으니...
그리고 당연히 php 파일은 확장자가 php라는 점!
html 파일은 더블 클릭하면 웹 브라우저에서 확인이 가능하지만,
php 파일의 경우 서버에서 열었을때만 확인이 가능하다는 것!
주석처리의 경우
// 라인주석
/* 블록주석 */ css에서도 똑같이 쓰니까..
#쉘 형식 라인 주석
개발실장님은 라인주석을 많이 사용하셨다
// 로그인 처리
뭐 이런식으로
명령 구분은 세미콜론 ;
블록 마지막 줄에는 생략이 가능하다
대소문자를 구분하지 않는다는 것
태그와 함께 사용이 가능하다는 것
1. echo 함수 // 간단한 문자열 출력
c언어의 printf 라는...!
Hello World! 만 출력하면 반은 배운거라던데
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
PHP 실습하기
설치할 것이 많다아...
1. JAVA 설치
2. 이클립스 설치
https://www.eclipse.org/downloads/
3. 아파치 서버에 프로젝트 폴더 설정
wamp 프로그램 > httpd.conf 파일 열고
찾기로 documentroot 입력 "${install_DIR}/www" 부분을 주석처리하고, 만든 프로젝트내용으로 변경
저장 후, wamp 프로그램에서 httpd-vhosts.conf 열기
위 내용처럼 수정후 저장 > 서버 리스타트!
이클립스 실행해서 wamp가 설치된 아파치와 php 셋팅하기
이름 설정후, Browse 클릭하여 php.exe 열기 클릭
next 클릭!
Debugger 설정하기
XDebug로 선택후 피니시!
php 바로 아래의 sever 클릭 후 위 내용을 입력하고 next,
똑같이 XDebug로 선택후 피니시!
뭔가 엄청 많다.......
이전에 LAMP로 해서 이런거 안 깔았는데....뭔가...더 복잡하다아.....
'매일매일 공부 > 백엔드' 카테고리의 다른 글
| [PHP기초] print , echo , print_r 등 기본 출력 (0) | 2017.11.27 |
|---|---|
| 백엔드 공부! PHP 공부 시작 (0) | 2017.11.21 |
백엔드 공부! PHP 공부 시작
공부를 시작하는 글..
상당히 거창하지만 내 나름대로의 목표는 풀스택!까지는 아니지만 DB 제어 부분을 자유로 다루는 것! 이다
내가 이제껏 가장 많이 작업한 것은 랜딩사이트인데, 랜딩 사이트만 봐도 입력 받는 폼이 있어서 백엔드쪽을 알아야 했다
최근에 앞뒤 다 작업한 랜딩페이지의 경우 MySQL은 3일 배워서 어찌어찌 DB저장/연결은 했는데
솔직히 계속 쳐다보지 않는 이상 자꾸 까먹게 된다
사실 PHP도 수정만 조금 하지, 하드코딩이 안되서 처음부터 공부해보려한다.
PHP 기초 공부는 "꿈날개" 라는 취업지원사이트에서 강의를 보기로 했다.
*
스크립트의 유형
1. 클라이언트 사이드 스크립트
사용자가 입력한 값이나 서버가 전달한 결과를 클라이언트 측의 웹 브라우저에서 처리되는 스크립트
예 . 자바스크립트, 비주얼베이직 스크립트 등
2. 서버 사이드 스크립트
데이터 처리를 웹 서버가 수행
클라이언트 측으로부터 받은 요청의 처리 결과를 웹 브라우저에게 반환
예 . PHP, JSP, ASP 등
PHP의 발전
현재(2017.6.22) PHP 7.2.6 버전 나옴
PHP의 특징
1. 쉬운 프로그램 문법
대중화로 인해 문법 습득이 쉬움
텍스트 기반으로 프로그래밍 시간이 적게 걸림
오류 디버깅이 쉬움
단기 개발에 적합
2. 데이터베이스와의 자연스러운 연계
어떤 종류의 데이터베이스와도 연결 가능
3. 웹 어플리케이션 개발 전문
HTML과 혼합하여 사용 가능
파일의 데이터 저장 및 불러오기가 간편함
PHP의 활용
1. 웹 폼 메일 구현
2. 쇼핑몰, 물건 구입 사이트의 장바구니 구현
3. 웹 로그 작성
4. 액세스 카운터 어플리케이션 작성
5. 게시판 ,RSS Reader 사용 가능
PHP의 플랫폼
웹 서버 : 아파치 / PHP
웹 시스템 : MySQL
리눅스는 누구나 무료로 자유롭게 수정, 재배포가 가능하다 => LAMP 플랫폼...
나는 WAMP 사용....ㅎㅎ..
WAMP 다운로드 하면 사용이 가능합니다
'매일매일 공부 > 백엔드' 카테고리의 다른 글
| [PHP기초] print , echo , print_r 등 기본 출력 (0) | 2017.11.27 |
|---|---|
| [PHP 기초] PHP 기본 문법 배우기 (0) | 2017.11.21 |
배색 / 어울리는 컬러찾기 / 배색의 여러가지 종류
배색에 관한 과제를 수행했다.
생각보다 아주 많은 종류의 배색 방법이 있었는데,
결론부터 말하자면 거의 모든 디자인의 결과물은 이러한 여러가지 배색 방법을 혼합하여
컬러를 선택해 나왔다는 것이다.
나의 과제물을 보면 알겠지만, 딱 한가지에 부합하는 배색 결과물은
좀처럼 적은 편이다.
사실 색고자(...)인 1인으로써 상당히 유용한 과제였다고 생각한다.
(물론 과제의 퀄리티는 낮은 편이다....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ)
강사님 말씀으론 여러가지 유형의 디자이너가 존재하는데
선천적으로 컬러를 잘 선택하는 사람이 있다고 한다.
나도 그런 눈이 있으면 좋으련만
마비노기 할때도 잡색으로 염색하거나
아예 신경 안 쓰고 다녀서......
진짜 색은 잘 볼 줄 모른다...ㅠㅠ
슬프다
웹 코더 JS Bin / HTML 코드 작성하기 / 실시간 코딩하기
어쩌다보니 일주일이나 글을 안 썼다
오늘은 아아아아아아아아주 유용한 웹 코딩 사이트를 알게 되어 공유한다.
JS Bin
접속하면 이렇게 기본 태그가 적혀있다.
HTML 부분에 내용을 적으면 오른쪽에 실시간으로 반영이 된다.
여러가지 사이트가 있겠지만 오늘은 JS Bin을 추천!
CSS 도 추가하여 내용을 적으면 이렇게 실시간으로 반영이 된다.
자꾸 로그인을 하라고 하는데, 특별히 유료는 아닌걸로 보인다.
File > Download 를 누르면 위와 같이 작성한 html 파일을 다운로드 받을 수 있다.
열어보면 작성한 부분과 동일하게 나타난다
하지만 css의 경우 html파일에 포함된 상태로 나온다
그치만 뭐 이것도 다시 저장해서 하면 되니까...!
여러 사이트가 있겠지만 아주 간편하면서도
다른 사이트보다 리젠이 빠른거 같아서 좋은 것 같다!
JS Bin
'매일매일 공부 > 유용한 자료' 카테고리의 다른 글
| 브라우저 기능검사 / 브라우저 호환성 / SVG 지원 불가일 때 대체 이미지 띄우기 (0) | 2017.11.27 |
|---|---|
| [웹표준] 다음 웹표준 가이드 (0) | 2017.11.09 |
| 웹디자이너 포트폴리오 참고자료 / 웹디자인 포트폴리오 / 웹사이트 디자인 사이트 (0) | 2017.11.03 |
| 그라디언트 쉽게 사용하기 / webgradients / 그라디언트 CSS 코드 생성기 / 그라데이션 (0) | 2017.11.02 |
| 포토샵 플러그인 / 쉽게 포토샵 사용하기 / Assistor PS (0) | 2017.11.01 |
[웹표준] 다음 웹표준 가이드
웹표준을 지켜서 코딩을 해야하는데
솔직히 제대로 찾아보지를 못해서
맞게 하는건지 의문이 들 때가 많다
오늘의 경우에도 PC버전 완성해서 모바일로 상태를 봤는데
완전 중구난방이었다
오늘도 웹표준을 검색하고 있는데
다음에서 웹표준 가이드를 제시했다는 내용을 확인하고
접속해보았다.
다음 웹표준 가이드
ui.daum.net
뭔가 메뉴가 많다.
HTML 가이드, CSS 가이드는 물론
네이밍이나 체크리스트 까지 제공하고 있다.
꼼꼼히 읽어보았는데, 나에게는 naming 규칙이 상당히
흥미로운 내용이었다.
어떤 사람도 자신만의 규칙을 가져야 하는데
나의 경우 가르치는 사람에게서 영향을 많이 받는 편이라
이제껏 전 회사의 개발팀장님의 방식을 따랐었다
이젠 가이드대로 하면 헷갈릴 필요가 없을것 같다
체크리스트 내용을 클릭해 보면
아래의 세부 내용으로 이동한다.
음..
아직 나에게는 필요 없는 내용인 듯 하다
너무도 멀고 먼 ..
CSS 가이드 쪽에서
이부분이 가장 흥미로운 내용이었다.
이미지 대체 텍스트에 관한 부분인데
권장하는 첫번째 방법이 상당히 인상적이었다
-9999px 이라니
이거 웹페이지로 말고 책이나 pdf 로 정리해줬으면 좋겠다
책장에 꽂아두고싶다
처음 보는 사람들도 쉽게 공부할 수 있는
CSS Property 내용도 제공을 하기 때문에
나같은 초보에게는 딱 좋을거 같다
오늘도 프론트엔드 개발자를 위해 화이팅!
(오늘따라 오글거린다)
'매일매일 공부 > 유용한 자료' 카테고리의 다른 글
| 브라우저 기능검사 / 브라우저 호환성 / SVG 지원 불가일 때 대체 이미지 띄우기 (0) | 2017.11.27 |
|---|---|
| 웹 코더 JS Bin / HTML 코드 작성하기 / 실시간 코딩하기 (0) | 2017.11.16 |
| 웹디자이너 포트폴리오 참고자료 / 웹디자인 포트폴리오 / 웹사이트 디자인 사이트 (0) | 2017.11.03 |
| 그라디언트 쉽게 사용하기 / webgradients / 그라디언트 CSS 코드 생성기 / 그라데이션 (0) | 2017.11.02 |
| 포토샵 플러그인 / 쉽게 포토샵 사용하기 / Assistor PS (0) | 2017.11.01 |
