웹퍼블리셔-입문]제이쿼리

웹사이트는 HTML, CSS, 자바스크립트 등을 이용해서 만듭니다. 

HTML은 정적인 웹페이지를 CSS는 HTML에 디자인을 더해줍니다.

자바스크립트는 다양한 기능을 이용하여 웹페이지를 역동적으로 만들어주는데

이때 제이쿼리라는 자바스크립트 라이브러리를 사용하여 보다 쉽게 여러 기능을 사용할 수 있습니다.

 

제이쿼리는 자바스크립트에서 여러 명령을 함수화시켜서 만들어진 함수의 라이브러리 형태 언어로

  선택자.명령( );

구조를 가지고 있습니다.

 

1. 제이쿼리 다운

제이쿼리를 사용하기 위해서는 먼저 구글에서 jquery 사이트를 검색하여 jquery 파일을 다운받으면 됩니다.

다운받기를 누르고 나오는 목록 중 첫번째 OR 두번째를 클릭하여 저장하면 됩니다.

 

2. 제이쿼리 연결

제이쿼리를 사용하기 위해서는 "src" 로 연결을 시켜줘야합니다.

 

3. 제이쿼리 사용

제이쿼리는,,

1. style을 먼저 작성한 후 연결
2. 외부 스크립트 파일을 연결한 스크립트 태그 내부에는 어떤 내용도 삽입하면 안됨
3. 연결한 제이쿼리 라이브러리가 스크립트 최상단에 작성합니다.

 

제이쿼리 기본틀은 아래와 같습니다.

$(document).ready(function(){});

 

4. 제이쿼리 표기

 

1. " - " 하이픈을 자동인식하지 않고 문자로 인식
2. " - " 하이픈으로 이어지는 영어는 대문자로 작성
    ex) font-size => fontSize
       background-color => backgroundColor
3. 선택자는 기본 css 선택자 모두 활용 가능
   : 선택자는 따옴표에 삽입하여 사용하면 되는데 나중에 사용할 document/window/this는 만들어져있는 선택자라서 따옴표를 넣을 필요는 없습니다.

 

▶ 태그선택 => $('태그선택자').명령( );
▶ 아이디선택 => $('#아이디명').명령( );
▶ 클래스선택 => $('.클래스명').명령( );
▶ 구조선택 => $('선택자:nth-child(순서)').명령();
▶ $(window).명령( ); 

 

4. css( );

   : 스타일 속성을 활용할 수 있게 하는 명령

$(선택자).css({
     다중속성 : 속성값,
     다중속성 : 속성값
});

 

이를 바탕으로 다음과 같은 화면이 브라우저에 나타나도록 문제를 한번 풀어보도록 하겠습니다.

 

 

먼저 여백값을 먼저 빼주기 위해 style안에 *{margin: 0; padding: 0} 을 작성해줍니다.

그리고 <script src>으로 제이쿼리를 연결시켜준 후, body안쪽에 <div></div>로 만든 상자 3개를 작성합니다. 

이제 script 내부에 원하는 스타일을 작성해주면 됩니다.

 

먼저 제이쿼리의 기본틀부터 작성해야되겠죠??

'div'박스를 선택하기 위해 $(document).ready(function(){ }); 안쪽에 $('div').css({ });를 작성해줍니다.

 

선택한 div내부에 width(가로값) / height(세로값) / fontSize(폰트사이즈) / textAlign: 'center'(텍스트정렬-가로:가운데) / lineHeight: '400px'(텍스트정렬-세로:가운데) 를 작성합니다.

$(document).read(function(){

    $('div').css({
         width: 400,
         height: 400,
         fontSize: 100,
         textAlign: 'center',
         lineHeight: '400px'
    });

});

 

 

 

div 크기를 정했으면 각 div 마다 색상을 넣으면 끝이 납니다. 이때 div에는 id를 따로 주지않았기 때문에 "nth-child"를 사용하여 색상을 넣어주면 됩니다.

 

$(document).read(function(){

    $('div').css({
         width: 400,
         height: 400,
         fontSize: 100,
         textAlign: 'center',
         lineHeight: '400px'
    });

    $('div:nth-child').css({
         backgroundColor: 'red'
    });
    $('div:nth-child').css({
         backgroundColor: 'red'
    });
    $('div:nth-child').css({
         backgroundColor: 'red'
    });

});

이런식으로 작성이 끝내고 웹브라우저로 돌아가면,, 완성입니다.