안녕하세요. 문범우입니다.
이번 포스팅은 지난 3월 28일 일요일 서울시립대학교에서 진행된 강의를 바탕으로 작성되었습니다.
해당 강의를 진행해주신분은 서울시립대학교 멋쟁이사자처럼 5기 김도현님 입니다.
이번 포스팅에서는 먼저 지난포스팅에서 했던 내용을 간단하게 복습해보고 jQuery라는 것에 대해 알아본 후에 간단한 실습 몇가지를 진행합니다.
1. 복습
먼저 지난 수업때 학습했던 내용들에 대해서 간단히 복습을 하겠습니다.
우리는 지난 강의들을 통해 Class와 Id에 대해서 알아 보았습니다.
각각이 어떻게 사용되는지 한번 더 생각해보면, 하나의 태그에 Class는 여러개 적용시킬 수 있으며 Id는 하나만 적용시킬 수 있습니다.
이를 응용해본다면, Navigator와 같이 한번만 사용되는 것은 Id로 스타일을 만들어서 적용시키면 되겠죠?
또한 스타일을 적용시키는 방법은 총 3개가 있었습니다.
1. html의 태그내에서 직접 적용시키는 방법
2. html의 head태그 안에서 style 태그를 통해 적용시키는 방법
3. css파일을 만들어서 이를 html와 연결시켜 적용시키는 방법
그리고 이런 세가지 방법에 대해 스타일이 적용되는 우선순위도 알아보았습니다.
1 > 2 > 3 순위로 우선순위가 높습니다. 즉 css파일에서 A요소의 height를 100으로 적용시켰어도, 실제로 html파일에서 해당 요소에 대한 태그에 height를 200으로 적용시키면 A요소의 height는 200이 됩니다.
또한 clearfix는 화면의 폭을 줄였을 때 글씨가 잘리지 않고 아래로 예쁘게 내려가게 해주는 역할을 합니다.
반응형 웹(화면의 크기에 따라 반응하는 웹)을 만들때 주로 사용되기도 합니다.
2. jQuery란?
이번에는 jQuery에 대해서 알아보도록 하겠습니다.
아, 물론 새로운 걸로 넘어왔다고 앞으로 html과 css에 대해서 안하는건 아닙니다. 앞으로의 수업들에서 지속적으로 웹페이지를 만들고 따라해보면서 그때 그때 필요한 것들은 계속 설명드릴 예정입니다.
그럼, jQuery에 대해서 알아보기 전에 간단하게 나마 알아야 하는 것이 있습니다. 바로 JavaScript라는 것인데요, 자바스크립트(JavaScript)란 웹 페이지를 동적으로 만들어 주는데 사용하는 언어입니다.
즉, 우리가 그동안 다루었던 html이나 css는 동적인 언어입니다.
웹페이지에서 구현했을 때 말그대로 멈춰있다, 라고 생각할 수 있습니다. 이와 달리 자바스크립트는 동적언어로써, 어떤 요소가 움직이거나 경고창을 띄우거나 등의 구현을 할 수 있도록 하는 언어입니다.
그래서? 오늘 우리가 배울 jQuery는 도대체 무엇일까요?
jQuery는 위에서 설명드린 자바스크립트의 라이브러리 중 하나입니다.
라이브러리란, 간단하게 도서관을 생각하시면 됩니다. 즉, 자바스크립트를 보다 쉽고 강력하게 사용하기 위한 도구라고 생각하시면 됩니다.
jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나라고도 합니다.
3. jQuery 사용하기
그럼 바로 jQuery를 사용해보도록 하겠습니다.
먼저 아래에 있는 jQuery 공식 사이트에 접속해서 다운로드를 누릅니다.
그럼 아래와 같은 화면이 뜰텐데 여기서 파란색으로 표시되어 있는 것을 눌러 jquery를 다운 받습니다.
만약 해당 링크를 눌렀을 때 파일로 다운받아지지 않고 웹으로 켜지시는 분들은 Ctrl(맥은 command)을 누른 상태에서 해당 링크를 눌러주세요.
그럼 jquey-3.3.1.min.js 라는 파일이 다운 받아질텐데 해당 파일을 우리가 작업할 html 파일과 같은 위치로 옮겨주도록 합시다.
( jQuery, JavaScript의 문법등에 대해서는 codecademy를 활용합시다! )
4. 페이지 뼈대 잡기
그럼 이제 jQuery를 사용하기전에 기본적인 뼈대를 잡기위해 html과 css를 작성해보도록 하겠습니다.
아래와 같은 화면을 만들 것이고 해당 코드도 바로 첨부하지만 그대로 복붙 하지 마시고 꼭 하나씩 작성해가면서 손에 익히도록 연습하시길 바랍니다.
위의 코드에서 몇가지만 추가적으로 설명드리도록 하겠습니다.
전체적으로는 우리가 그동안 알아보았던 태그나, 속성들이 사용되었는데 style내용의 초반부에 a 태그에 관해 a:visited, a:hover 가 있습니다.
먼저 a:visited에 대해서 알아보면, a 태그는 어떤 링크를 걸어주는 태그로써 태그된 내용을 누르면 우리가 지정한 페이지 등으로 이동하게 됩니다.
그런데 여러분께서 가끔 이런 링크들을 클릭했을 때를 생각해보면 누르기 전과 눌러서 다른 페이지를 다녀오고 나서 해당 링크의 색상이 바뀌었을 때가 있었을 것입니다. 이러한 속성을 설정하는 것이 a:visited 입니다. 즉, a태그에 대해 방문한 후에는 어떻게 할 것인가를 설정하는 것입니다.
그리고 a:hover는 여러분께서 마우스 포인터를 해당 링크 위로 가져갔을 때를 의미합니다. 위의 코드에서는 두개다 color: black;으로 설정되어 있기에 마우스를 위로 가져가도 포인터가 변할 뿐 색상은 그대로이고 링크를 클릭하여 해당 사이트를 방문하고난 뒤에도 해당 링크는 그대로 검은색입니다.
~:hover는 보다 밑에 있는 main_btn이라는 class에서도 사용됩니다. 해당 설정에서는 마우스 포인터를 바꾸는 설정을 진행하였습니다.
추가적으로 a 태그 내부에 있는 text-decoration은 링크에 밑줄이 쳐져 있는 등의 효과를 설정합니다. 해당 코드에서는 text-decoration: none;으로 설정하여 a태그를 통한 링크에서 밑줄 등의 효과가 없습니다.
5. jQuery 적용시키기
이제 3번에서 다운 받았던 jQuery를 실질적으로 적용시켜보도록 하겠습니다.
실제 수업에서는 마우스를 특정 요소위에 두었을 때 다른 요소가 보이게 하거나 사라지게 하는 것, 글 색깔이 바뀌는 것, 특정 요소를 클릭하면 다른 요소가 사라지는 것 등 총 4개에 대해 실습을 진행하였습니다.
전체적인 코드는 맨아래에 첨부하겠지만, 해당 포스팅에서는 마우스를 어떤 요소에 올렸을 때 해당요소의 색이 바뀌는 것과 클릭 했을때 다른요소가 사라지는 것, 두개에 대한 설명만 진행하겠습니다.
먼저 jQuery의 기본적인 형태는 아래와 같습니다.
$(document).ready(function(){
<jQuery 내용>
});
위의 코드의 의미를 살펴보면, document, 즉 해당 페이지가 인코딩이 완료되어 준비가 되었을 때, 를 의미합니다.
즉, 우리가 작성 중인 해당 웹페이지의 인코딩이 전부 완료된 다음에 이제 내부에 우리가 작성하는 jQuery의 코드가 실행되는 것입니다.
그럼 이제 실제로 jQuery에 대한 내용을 작성해보도록 하겠습니다.
먼저 첫번째는 마우스를 메인버튼(main_btn)에 가져갔을때 해당 요소의 바탕화면과 글자색이 변하는 것입니다.
완성되는 코드는 아래와 같습니다.
$(".main_btn").mouseover(function(){
$(".main_btn").css("background-color","black");
$(".main_btn").css("color","white");
});
$(".main_btn").mouseout(function(){
$(".main_btn").css("background-color","white");
$(".main_btn").css("color","black");
});
위의 코드에 대해서 살펴보면, 첫번째 문장에서 ".main_btn" 으로 main_btn 이라는 클래스( . )에 대해서 mouseover가 발생했을때, 즉 해당 클래스가 적용된 요소위에 마우스가 올라왔을때 아래 내용을 실행합니다.
2,3번째 문장을 보면 main_btn 클래스가 적용된 요소의 css를 설정하는데, 배경화면을 검정으로 그리고 글자색을 흰색으로 설정합니다.
즉, 1~3번째 문장을 정리해보면, 마우스가 main_btn 이라는 클래스가 적용된 요소의 위에 위치하게 되면 같은 클래스를 적용받는 요소의 배경화면은 검정색, 글자색은 흰색으로 만들어 주는 내용입니다.
이어서 5번째 문장은 똑같이 main_btn 클래스가 적용된 요소에 대해 서술되고 있으며 이때 mouseout, 즉 마우스가 해당 요소의 위에 있지 않을 때에 대한 동작을 서술합니다.
6,7번째 문장이 그 동작인데, main_btn 클래스를 적용받는 요소의 배경화면을 흰색, 글자색을 검정색으로 만드는 것입니다.
물론 해당 코드는 처음에 알아보았던
$(document).ready(function(){
<jQuery 내용>
});
에서 <jQuery 내용> 안에 들어가야 합니다.
이어서 두번째로 만들어볼 jQuery는 마우스로 클릭했을 때 다른 요소가 사라지도록 하는 효과입니다.
먼저 코드는 아래와 같습니다.
$(".main_btn").click(function(){
$(".image3").fadeOut(700);
});
좀 전의 코드보다 짧고 간단합니다. 한번 살펴볼게요.
해당 코드에서도 main_btn 클래스를 적용받는 요소에 대해 동작을 이야기 합니다. main_btn 클래스를 적용받는 요소가 click 되었을 때, 그 다음 효과를 하게 되는데 그 효과는 2번째 문장입니다.
그것은, image3라는 클래스를 적용받는 요소가 fadeOut을 700ms동안 하게 됩니다. fadeOut이란 요소가 바로 사라지는게 아니고 시간이 지나면서 사라지도록 하는 효과인데 그 시간을 괄호에 작성하여 설정합니다. 이때 시간의 단위는 ms로써 1000을 적으면 1초가 됩니다.
이렇게 2가지의 jQuery효과를 만들어 보았습니다. 물론 위의 코드들을 익혀서 자신이 스스로 만들어 볼 수도 있습니다.
jQuery는 인기있는 만큼 인터넷에서도 구글링을 통해 많은 정보를 얻을 수 있으니 해당 포스팅에서 이야기하는 것들 뿐 아니라 더 찾아보면서 익히시면 금방 실력을 높이실 수 있을 것 입니다.
마지막으로 3월 28일 수업에서 작성된 최종 코드를 첨부합니다.
추가적으로 궁금하거나 잘 해결이 되지 않는 점들은 댓글 및 이메일로 연락주세요 :)
'LikeLion' 카테고리의 다른 글
| LikeLion at UOS #6_ Cloud9으로 Ruby on Rails 시작하기 (0) | 2018.04.09 |
|---|---|
| LikeLion at UOS #5_ 페이지 제작 실습(2) (0) | 2018.04.02 |
| LikeLion at UOS #3_ 페이지 제작 실습(1) (0) | 2018.03.28 |
| LikeLion at UOS #2_ HTML 태그들과 CSS 기초 (0) | 2018.03.22 |
| LikeLion at UOS #1_ 웹 프로그래밍 시작하기 (0) | 2018.03.21 |