안녕하세요 JJU_DEVELOPER입니다.
이번 시간에는 자바스크립트 사용자 환경 개발 예제에 대해 알아보겠습니다.
간단하게 자바스크립트는 이렇게 쓰는구나?라고 볼 수 있습니다.
HTML의 구조 및 구성 요소
동적인 페이지를 만들기 위해서는 자바스크립트를 써야 합니다.
만들어볼 페이지의 프로젝트 폴더 및 파일 구성은 아래와 같습니다.
프로젝트 파일과 폴더 설명
**js 폴더는 두 가지로 나뉘어 있습니다.common.js에는 모든 페이지에 공통으로 적용되는 스크립트 코드가 작성되어있습니다. main.js는 페인페이지에만 적용되는 스크립트만 포함하였습니다.
**css 폴더도 많이 나뉘어져 있습니다.
모든 스타일을 초기화시키거나, 공통으로 적용되는 스타일이 있거나, 메인에만, 터치 시 필요한 CSS를 각각 나눠놨습니다.
그렇다면 모든 스타일을 초기화시킨다는 것은 무엇을 의미할까요?
-> 초기 세팅 스타일(css/reset.css)은 본격적으로 스타일을 적용하기 전에 모든 웹 페이지에 반드시 설정해야 하는 초기 스타일 속성이라고 보시면 됩니다. 즉 불필요한 속성을 제거하거나 속성의 값을 초기화해 주는 작업입니다.
만일 이 작업을 거치지 않으면, 나중에 스타일을 적용했을 때 의도했던 대로 표현이 되지 않을 수 있습니다.
<reset.css>
|
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,input,
textarea,p,blockquote,th,td{margin:0;padding:0;}
img{border:none;vertical-align:top;}
fieldset{border:none;}
li{list-style:none;}
input,select,button,select{vertical-align:middle;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
address,caption,cite,code,
dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
|
-> 초기 스타일 설정!
프로젝트 기본 레이아웃 만들기
전체적인 페이지 레이아웃을 볼 수 있습니다.
이 레이아웃을 이제 index.html에 적용시켜 볼까요?
body 부분에 wrap이 두 개가 있는 것만 보시면 됩니다.
영역울 표시 할 때에는 div로 영역을 나누어 레이아웃을 잡은 것을 볼 수 있습니다.
기본 디자인 서식 꾸미기
각 레이아웃의 너비 또는 높이값을 지정한 후, 배치도에 맞게 정렬하고 배경색을 적용합니다.
글꼴, 글자색, 배경색, 링크 텍스트 등 웹 문서에 필요한 기본 서식을 스타일로 적용합니다.
보통 공통으로 들어가는 부분은, 헤더랑 풋터의 스타일을 적용합니다.
헤더 영역 UI 디자인 및 개발하기
각각의 목록들을 dd로 감쌌습니다.
유틸메뉴는
헤더 안에 로그인에 관한 스타일을 숨겨놨기 때문에 현재 로그인 메뉴를 클릭해도
아무것도 보이지가 않습니다.
top에 -500px라는 것이 적용되어 있는데요,
이것은
로그인 화면 아래 500픽셀에 있는 것을 화면 위로 안 보이게 올려놓은 것입니다.
그렇다면 top:-500px를 막아보면 어떻게 나올까요?
이렇게 뜨게 됩니다.
저희는 이것을 로그인 메뉴를 클릭할 때에만 아래로 내려오게 작성하고 싶은데 그럴 때에는 어떻게 해야 할까요?
애니메이션이 위에서 아래로 내려오게끔 자바스크립트로 구현해주어야 합니다.
레이블을 이용해 로그인 폼 안내 가이드 제작하기
입력 요소에 레이블(label)을 이용하여 아이디와 비밀번호 안내 가이드를 디자인한다.
현재 아무런 기능이 없는 common.js에 기능을 하나씩 넣어보도록 하겠습니다.
1. 로그인 버튼을 클릭했을 때 로그인 화면이 아래로 나오게 구현하기
로그인 wrap 아래에 있고> a 아래에 있는 애를 .on(clikc) 클릭했을 때 function을 실행합니다!!
폼이름은 아이디 선택자인 #longin_f 를 선택하고 animate의 기능을 쓸건대, 스타일로 적용할 것입니다.
스타일 적용은 {}안에 쓰며, 500은 몇 초 동안 애니메이션을 작동할 것 인지를 쓴 것입니다.
top 픽셀을 -500에서 20으로 변경하였습니다.
a 태그는 아무것도 없지만 아무것도 없는 곳으로 돌아가지 않도록 return false를 해주었습니다.
.
2. 로그인 화면에서 close를 누르면 다시 닫힙니다. (로그인버튼을 눌러도 닫힘)
3. 로그인 부분의 아이디에는 이미지를 사용하였는데요? 무슨 이미지인지 보겠습니다.
이렇게 바탕으로 이미지를 넣었고,
얘를 클릭하면 이미지 속성을 없애고 실제로 아이디를 칠 수 있도록 구현하여야 합니다.
위에서 레이블이 이미지를 감싸기 때문에 레이블을 포커스 하면 스타일을 없애게 해 보겠습니다.
$("#user_id, #user_pw").on("focus",function(){
$(this).prev().css("left","-9999px");
});유저아이디와, pw를 선택하고 내가 포커스를 두었을 때 이 이미지를 제거할 것입니다.
어떻게 제거하냐면 요 이미지를 화면 밖으로 내보내는 방식을 사용했습니다.
prev는 아이디 바로 앞 태그 즉, 레이블을 뜻합니다. 이 레이블의 css를 없애버린것이죵!
이제 아이디와 비밀번호 칸을 클릭하면 이미지 스타일이 없어진 것을 볼 수 있습니다.
그럼 이제!!! 블러 이벤트도 처리해야겠죠?
만약, 아이디와 비번을 클릭하지 않은 blur일 때 다시 이미지가 나와야 한다는 것입니다.
※여기서 중요한 점은 값이 있을 때 blur 하더라고 적용되지 않도록 해야 합니다.
즉, if를 사용하여 this값이 비어있는 경우에만 해당 코드를 실현하게 구현합니다.
$("#user_id, #user_pw").on("blur",function(){
if($(this).val()=="") $(this).prev().css("left","2px");
});
(press hold 기능을 쓰면 이 모든 것을 더욱 간단하게 구현할 수 있습니다...)
4. 로그인 버튼 선택도 마찬가지로 이미지입니다.
로그인 버튼을 클릭할 시에도 마찬가지로 창을 닫는 것입니다. (2번 참조)
이처럼 동적인 움직임을 처리하기 위해서는 자바스크립트가 필수입니다~!
이제 위의 줌버튼을 한번 봐볼까요?
ZOOM 버튼 만들기
<js로 구현한 것을 보겠습니다.>
| /*zoom 버튼*/
var base = 100;
//기본이 100사이즈입니다.
var mybody=$("body");
// 전체 테그를 감싸고 있는것이 body이기 때문에 바디를 변수에 담습니다.
//Zoom의 a태그는 총 3개입니다. +,-,100
$("#zoom a").on("click", function () {
var zNum = $("#zoom a").index(this);
//선택한 줌의 a의 인덱스 중에서 현재this를 누른거를
//인덱스 0,1,2 중 하나
if (zNum == 0) {
//인덱스 0번째는 확대 영역
base += 10;
} else if (zNum == 1) {
//인덱스 1번째는 100%
base = 100;
} else {
//인덱스 2번째는 축소 영역
base -= 10;
}
|
이렇게 기본을 적용시키고
mybody의 css를 볼까요?
|
mybody
.css("overflow-x", "auto")
.css("transform-origin", "0 0")
.css("transform", "scale(" + base / 100 + ")")
.css("zoom", base + "%");
return false; // 클릭한 <a>의 이동을 막습니다.
});
|
프린트 버튼 만들기
검색창 안내 가이드 만들기
아까랑 동일한 원리로 여기에 있는 '검색어를 입력하세요'의 이미지를 날립니다.
검색창은 두 가지로 나눠서 포커스가 발생하였을 때와 포커스가 아웃되었을 때 어떻게 지정하는지를
초점을 두었습니다. 여기서도 마찬가지로 this의 벨류가 == "" 값이 비어있을 때에만 다시 나타나도록 하였습니다.
Google 번역기 API 사용하기
이것은 사실 티스토리에도 반영을 할 수 있을 것 같아서
한번 도전해보려고 하는데요
웹사이트의 텍스트들을 선택한 언어로 번역할 수 있도록 만듭니다.
여기서 언어가 너무 많기 때문에 원하는 몇 개만 지정하겠습니다.
기본은 코리안입니다~!!
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'en,ja,ko,zh-CN', layout:
google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
GNB 메뉴 만들기
-마우스를 올리는 행위 = 마우스오버
-키보드로 tab 하여 접근하는 행위 = 포커스
-GNB(Global Navigation Bar)이란?
사이트의 모든 페이지에 노출되는 메뉴를 가리킵니다.
위 메뉴는 다 이미지로 각각 만들어진 것입니다.
이때 out은 흰색 글씨이고 over는 글씨가 노란색인 것을 의미합니다.
즉, 이 문장은 글씨가 흰색인 메뉴들을 뜻하는 것 이죠.
1. 변수 beforeEl을 선언합니다.
-> var beforeEl;
2. 아이디 선택자 밑에 태그를 선택 -> 마우스를 올리거나 포커스가 될 때
-> $("#gnb>li>a").on("mouseover focus", function () {
3. 흰색이었던 색깔을 노란색인 이미지로 변경합니다.
$("img", this).attr("src", $("img", this).attr("src").replace("out.gif", "over.gif"));
//this 밑에 있는 이미지의 소스를 바꾼다, this밑에 있는 이미지의 소스를 가져와서 replace 합니다. out.gif를 over 이미지로
4. 마우스를 올리면 서브 메뉴가 내려오도록 설계합니다.
$(this).next().stop().slideDown("normal");
//a태그.동생(ul태그).=> 서브메뉴.stop(기존애니매 중지).slideDown(새로운 애니매이션 설계)
5. 이제 beforEl에 this를 넣습니다.
beforeEl = $(this);
즉, 마우스를 올리는 것이 beforeEl이 됩니다. (자기 자신)
6. 노란색으로 바꾸는 코드만 있는데, 이거를 다른 값으로 옮길 때 원상복구 하는 것을 설계합니다.
beforeEl이 다른 것으로 이동한다면, 그전에 값은 다시 흰색으로 돌아옵니다.
if (beforeEl)
beforeEl.children("img").attr("src", beforeEl.children("img").attr("src").replace("over.gif", "out.gif"));
비포El의 이미지를 찾아서 그 이미지의 소스를 노랑이에서 흰색으로 다시 바꿔라!
7. 슬라이드 다시 올리기 설정
gnb밑에 있는 하위 선택자 ul들 4개를 한꺼번에 선택합니다.
<CSS에서 gnb를 안 보이게 설정하였습니다.>
8. 마우스를 위로 올리면 아래 보였던 메뉴가 빠지게 설정!
이것은 마우스가 leave 한다는 이벤트입니다.
$("#gnb").on("mouseleave", function () {
$("#gnb ul:visible").slideUp("fast");
if (beforeEl) beforeEl.children("img").attr("src", beforeEl.children("img").attr("src").replace("over.gif", "out.gif"));
});
슬라이드 전체 메뉴 만들기
현재는 전체 메뉴의 이미지만 있는 상태입니다.
이 전체메뉴를 클릭하면 css에 숨겨놓은 것을 보이게 할 것입니다.
무엇을 숨겨 놓았는지 css 가서 볼까요?
1. css에서 none으로 설정한 메뉴를 slideDown 하도록 바꿔보겠습니다.
$("#total_btn a").on("click", function () {
//일단 토탈 버튼을 클릭하면 css에 숨겨놓은 것을 보이게 할 거임
$("#total_menu").slideDown("normal");
그럼 이렇게 보일 것입니다.
그다음
2. 전체메뉴의 사진을 바꿔보겠습니다.
그럼 화살표가 아래에서 위로 변경된 것을 볼 수 있습니다.
3. 전체 메뉴 닫기 버튼
이렇게 하면 슬라이드를 닫기를 누르면 잘 닫힙니다 ^^
날짜 표기
1. t라는 데이터 내장객체를 생성합니다.
이처럼 다양한 자바스크립트를 이용하여 웹의 다양한 부분을 기초만 맛보았습니다~!
다음시간에는 부트스트랩 테마를 이용하는 방법에 대해 알아보겠습니다~!
오늘도 수고 많으셨습니다.
감사합니다.
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| [JSP] 전화번호 입력시 자동 하이픈 넣기 (0) | 2024.06.27 |
|---|---|
| 제이쿼리(jQuery) 비동기 방식 연동, Apache Tomcat설명 및 Ajax 중요 메서드 설명 (1) | 2023.01.14 |
| ⭐지식공유⭐_클라이언트 사이드와 서버 사이드의 개념과 차이점 Client-side / Server-side & Ajax 장단점, 구성요소 총정리!!! (4) | 2023.01.14 |
| 제이쿼리(jQuery) 이벤트 등록 메서드, 마우스, 키보드, 포커스 이벤트 개념 및 종류 설명!! (0) | 2023.01.12 |
| 제이쿼리(jQuery) 객체 조작, 속성 조작 메서드 (0) | 2023.01.12 |