[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 |
[웹표준] 디자이너와 웹 기획자가 고려해야할 웹접근성
항상 웹접근성이라는 말은 많이 들었는데
어떤건지 설명하기 어려울 때가 많았다
다행히 최근에는 강사님이 보다 명확한 내용을 알려주셔서
이전보다는 구체적으로 알고 있는 편이다
웹접근성은 쉽게 말해서
어느 누구나 웹에 표시되어있는 정보에 쉽게 접근할 수 있는 것을 말한다.
단적인 예로, 시력이 약한 사람의 경우 글자를 눈으로 못보는 상황이 발생하는데
이런 분들을 위해 글자를 "읽어주는" 브라우저가 있다고 한다.
하지만 이러한 브라우저도 이미지의 경우에는 대체 텍스트가 적혀있지 않으면
아무런 내용을 전달해 주지 못한다
그래서 "웹접근성"이 중요하다고 한다.
오늘 보던 다음 웹표준 가이드에
웹접근성에 관한 주요한 내용이 적혀있어서 가지고 왔다.
이 내용은 미국의 웹접근성 전문 비영리단체에서 발표한 내용을
정리해주신 부분이다.
많은 내용들이 있지만
그 중에서도 정말 중요하다고 생각되는 부분을
몇 가지 소개하겠다.
전체 내용을 보시려면
ui.daum.net
다음 웹표준 가이드로 접속하시면 된다
기획자가 있다면 당연한 부분이지만
나같은 초보의 경우에는 포트폴리오용이나 혹은 테스트 삼아 만드는 부분은
메뉴 구조를 만들면서 수정을 하기 때문에
간과하기 쉬운 부분이라 생각된다.
탄탄한 기획만큼 좋은 것은 없으니까!
그 다음 중요하다고 생각되는 부분은
잘 보이냐 안 보이냐이다.
푸터부분의 경우 명암이 상당히 낮아서 드래그해서 읽는 경우도 있다.
포털의 경우 당연히 지침을 따르고 있지만,
랜딩페이지나, 이벤트 페이지의 경우
가끔은 너무나 어둡게 표현된 페이지가 있다.
내가 어떤 부분을 클릭하고 있는지에 대한 내용은 상당히 중요하다
글씨 색깔이 바뀌는 부분은 그래도 많은 편이지만, 언더라인의 경우 없는 경우도 상당수이다.
색과 언더라인 말고도 다른 강조를 통해 명확한 구분이 가능하도록 하면 좋을듯 하다.
이 내용을 고른건 상당히 웃픈 일때문인데,
어릴때 안 좋은 마우스를 사서 제대로 작동하지 않을 때가 많았다.
항상 키보드는 고장이 안나서 링크 포커스를 확인하고 "탭" 키를 이용해
웹페이지를 사용할 때도 많았는데..
내가 만든 내용에도 키보드 포커스는 꼭 적용해야겠다
ㅠㅠ
나는 아직 초보라서 많은 것을 지킬 수는 없겠지만(노력해도)
점점 더 많이 지킬 수 있도록 해야겠다
