웹디자이너 웹퍼블리셔란? 자바스트립트,제이쿼리에 관하여

홈페이지제작/일러스트레이터 2018. 7. 6. 09:11

 
웹디자이너 웹퍼블리셔란? 자바스트립트,제이쿼리에 관하여

 

 

 

 


요즘은 웹디자인이 인기있는 직업으로 뽑히고 있습니다!

웹디자인,웹퍼블리셔 쪽으로 취업을 하시면 매우 전망이 좋기 때문이죠!!

그래서 오늘은 웹퍼블리셔에 대해 알아볼까합니다!


★Jabascript,JQruey 웹퍼블리셔★알아보기!

 
다양한 디바이스의 웹표준 호환성에 이해!

 

웹퍼블리셔는 2008년 4월 11일부터 시행된[장애인차별금지 및 권리 구제 등에 관한 법률] 및 동법 시행령들 관련 규정을 준수 할 수있게 되면서 웹 접근성에 대한 인식이 높아졌습니다.누구나 어디에서나 동일한 정보를 얻을 수 있는 신체적,환경적 영향을 받지 않고 정보를 얻을 수 있어야 한다는 규정이 만들어졌습니다. 기존 웹페이지를 만들던 방식이 3개의 구조로 나누어지면서 웹디자이너나 웹 프로그래머가 작업이 불가능해지며 전문웹퍼블리셔가 등장했고, 현재 웹퍼블리셔는 전문적인 지식을 가지고 있으면서 디자인에 대한 기본적인 이해도를 가지고 있어야 가능합니다. 전문적인 웹 퍼블리셔 인력이 매우 부족한 상태입니다.

 

웹퍼블셔를 배울려면 기본적으로 웹을 디자인을 할수 있어야 합니다!

포토샵과 일러스트로 툴을 익힌후에 HTML/드림위버 프로그램을 배워야 웹디자인을 할 수가 있습니다.

포토샵과 일러스트 툴은 많이들 알고 계시니까! 오늘은 생략하도록 하겠습니다!!

 

 

 

 

 

 

★HTML/드림위버

 

홈페이지의 전달 기능, 미적 기능, 인터렉티브한 기능을 충족할 수 있는 홈페이지를 작성하는 프로그램으로서 홈페이지 제작의 기본을 이루는 HTML을 기초로 웹 페이지를 만들고 웹에 게시할 수 있도록 합니다.

또한, 홈페이지 저작 도구인 드림위버로 서버와 클라이언트 간의 상호작용으로 멀티미디어,스타일시트,템플릿, 라이브러리, 자바스크립트를 효과적으로 다룰 수 있도록 합니다.HTML 과 드림위버의 핵심기능을 체계적으로 심도있게 다루는 부분입니다.

최근에 나온 버전들은 CSS,자바스크립트, 다양한서버 사이드 스크립팅, 그리고 ,ASP.NET, 콜드퓨전,자바 서버 페이지,PHP 등의 프로그래밍 언어 및 프레임워크와 같은 웹 기술에 대한 지원을 포함하고 있습니다.

드림위버는 위지웍 프레스토 기반의 편집기이며 사용자에 의해 HTML 코드의 상세한 정보를 숨길 수 있으며,이로써 코드를 잘 모르는 사람들이 웹 페이지와 사이트를 만들 수 있게 도와줍니다!


★웹표준&접근성

 
공공및 민간 웹 사이트의 웹 접근성 준수화가 의무화 되었으며, 웹 표준을 준수했을 때 어떤 브라우저에서든 똑같은 웹 페이지를 보여 줄 수 있게됩니다(크로스 브라우징) 웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML,CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻합니다. 웹 접근성과 표준화 코드를 구현하기 위해 HTML,CSS 자바스크립트의 기본 원리와 활용 방법을 체계적으로 진행하며 실무 예시로 페이지를 제작, 구현하는 과목입니다. 웹 접근성과 웹 2.0의 표준화 코드 구현, 다양한 방식의 레이아웃구현, 자바스크립트를 사용한 동적 페이지 설꼐 등을 통해 웹 사이트 구축에 필요한 실무 예제로 배울 수 있습니다.

 

 


 
★JQUERY( 제이쿼리)

자바스크립트의 기능을 함축시킨 일종의 프레임워크(라이브라리)입니다.

제이쿼리는 코딩의 양을 대폭 줄일 수 있으며, 다음과 같은 시능을 포함하고 있습니다. HTML 엘리먼트를 선택/HTML 엘리먼트를 조작/

CSS핸들링- 이벤트/자바스크립트 애니메이션/DOM 탐색과 수정/AJAM/ 유틸 제이쿼리는 문법이 간결하고 사용하기가 쉬우며, 습득속도가 빠릅니다. 다양한 운영체제와 디바이스에서 작동하는 이식성이 뛰어난 언어로써 별다른 셋팅없이 HTML과 동시에 사용하여 일반 사용자가 손쉽게 인터랙티브한 웹페이지를 제작할 수 있도록 해줍니다.이러한 자바스크림브를 기반으로 라이브러리를 구축한것이 바로 JQuery 이며 HTML과 javascript 사이의 상호작용을 강조하는 웹 어플리케이션 프레임워크입니다.Ajax와 HTML을 제어함으로써 동적이고 화려한 효과를 낼 수 있다는 장점이 있습니다.!


★Javascript(자바스크립트)

미국의 넷스케이프 커뮤니테이션스사가 개발한 스크립트언어

스크립트 언어란? 컴파일(compile)을 하지 않고 작성해서 바로 실행 시킬수 있는 언어

컴파일이란?원시언어로된 프로그램으로 부터 그와 동등한 일을 하는 목적언어로 된 프로그램을 생성하는 작업!프리르포세싱.메크로처리 등등의 언어처리작업을 통칭
 

 

 

저작자표시

'홈페이지제작 > 일러스트레이터' 카테고리의 다른 글

일러스트레이터 프로그램 없이 ai 파일 열기  (0) 2017.05.02
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

jQuery 기본 구조

홈페이지제작/JQuery 2017. 10. 6. 10:57

먼저 JQury 사이트에 접속하셔서 여러가지 정보를 알아 보시는 것도 좋을 듯합니다.

바로기기 여기를 클릭하세요

 

jQuery 기본 구조

제이쿼리란?

우리가 웹에서 여러가지 효과를 나타낼때 자바스크립트를 활용해 아주 어렵고 복잡하게 기능 구현 하는것을 제이쿼리는 아주 간단하게 구현하게 도와주는 자바스크립트 라이브러리 입니다.

 

제이쿼리의 소스는 <head></head> 사이에 위치 하게 됩니다. 그냥 사용해서는 안되며

<script type="text/javascript"></script>사이에 써 넣게 됩니다.

<!DOCTYPE html>

<html>

<head>

<title>제이쿼리</title>

<script type="text/javascript">

// 이곳에 작성

</script>

</head>

<body>

</body>

</html>

 

그럼 script태그 안에 제이쿼리의 소스 기본형을 써넣어 봅시다.

<script type="text/javascript">

$(function(){

});

</script>

위의 소스가 기본형입니다.

 

html기본 문서형에 합쳐본다면

<!DOCTYPE html>

<html>

<head>

<title>제이쿼리</title>

<script type="text/javascript">

$(function(){

});

</script>

</head>

<body>

</body>

</html>

 

 

위와 같이 작성을 하면 됩니다. 하지만 저곳 안에 제이쿼리소스를 작성하는것만으로는 아직 제이쿼리는 작동할 준비가 끝나지 않았습니다. 자바스크립트를 쉽게 표현하기 위해 바꿔놓은 제이쿼리 라이브러리 파일을 같이 불러와야 합니다. 현재 작성중에 있는 제이쿼리 라이브러리 소스의 버젼은 최신버젼이 3.2.0 이네요 시간이 흐름에 따라 버젼은 더 올라갈 것입니다. 가급적 최신버젼을 사용해 주시는게 좋습니다. 현재 최신버젼의 제이쿼리 라이브러리 파일의 경로는 http://code.jquery.com/jquery-3.2.0.min.js 입니다.

이 주소는 제이쿼리 홈페이지에 들어가셔서 다운로드에 들어가시면 보실 수 있습니다. 그 소스를 복사해서 자신만의 서버에 보관하고 사용하셔도 무관합니다. 이 소스도 스크립트 태그를 이용해서 불러 오면 됩니다.

사용방법은

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>

 

위와 같습니다.

전체 소스로 본다면

<!DOCTYPE html>

<html>

<head>

<title>제이쿼리</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>

<script type="text/javascript">

$(function(){

});

</script>

</head>

<body>

</body>

</html>

 

위 예제 실행 하며  아직은 아무것도 나타나지 않음이 정상입니다.

 

그럼 다음 강좌에서는 셀렉터 선택에 대해서 배워보겠습니다.

저작자표시

'홈페이지제작 > JQuery' 카테고리의 다른 글

JSON(제이슨, JavaScript Object Notation)이란 ?  (0) 2018.07.03
[jQuery 기초] jQuery 선택자 (Selector) 목록 정리  (0) 2018.07.02
블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

공지사항



카테고리

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바