JQuery #02 CSS 적용의 기본 개념_선택된 요소들의 설정

제이쿼리를 시작할 때 가장 기본적으로 알아야 할 것들이 있다면, 제이쿼리는 어떻게 명령문을 작성하는지, 혹은 메서드를 어떻게 사용하는지, 혹은 css는 어떻게 적용하는지이겠죠.

1. css 간단하게 적용하기

let list = $('#list').css('color','red');

2. 페이지의 시작과 출력하기.

$(document).ready(function(){
    console.log('hello');
})

 

2-1 위의 공식이 싫다면? 아래로 표현해서 출력해 보기

$(function(){
    console.log('ready2');
});

3. 자바스크립트와 제이쿼리의 CSS 적용의 차이점 보기

자바스크립트에서는 지정한 아이디의 너비를 바꾸거나 스타일을 바꾸기 위해서는  아래와 같은 코드를 작성해야 합니다.

문서를 불러오고 그의 태그나 네임들을 불러온 뒤 배열을 정해주고 스타일을 지정해줘야 하는 번거로움이 있죠. 

document.getElementsByTagName('img')[0].style.width='100px';

하지만 제이쿼리를 사용할 경우에는 위의 식을 간단하게 정리할 수 있습니다. 비교적 자바스크립트보다 간단한 식을 볼 수 있습니다. 이전과 같이 $을 이용해서 '속성' 값을 추가해 주고 원하는 CSS를 입력해 줍니다. 속성과 값 사이에는 (,)를 잊지 말아 주세요.

$('img').css('width','100px');

$('img').css('height','100px');

한 줄에 가지고 가고 싶다면?

$('img').css('width','100px').css('height','200px');

 

그런데 이렇게 여러 줄이 생기는 게 싫으시다면 물론 방법이 있는데요 이는 중괄호를 이용한 방법입니다.  그리고 css에 추가적으로 버튼을 누르면 투명하게 만들어주는 설정도 추가해 봅니다.

$('img').css({'width':'100px','height':'200px'}).
css('opacity','0.5');

 

4. 선택한 요소만 지정해서 CSS 적용해 주는 방법

4-1. 선택된 요소 중 가장 첫 번째 요소를 선택하는 방법

$('#list > li').first().css('backgroundColor','orange');

4-1. 선택된 요소 중 가장 마지막 요소를 선택하는 방법

$('#list > li').last().css('backgroundColor','orange');

4-2.  선택된 요소 중 인덱스 번호를 활용해 원하는 인덱스만을 접근해서 적용해 주는 방법

$('#list > li').eq(1).css('backgroundColor','white');

4-3. 선택된 요소를 지정해서 적용시키는 방법 : solice(시작, 끝)

여기서부터 조금은 집중하셔야 하는 이유는 solice함수의 경우에는 인덱스 범위를 이용해서 해당하는 범위의 스타일을 변경할 수 있다는 장점을 가지고는 있지만, 모든 배열에서 슬라이싱, 슬라이스 문자를 자르거나 범위 값을 지정할 때 시작 번호 값은 포함하지만 끝나는 번호는 포함하지 않는다는 점입니다.

 

그럼 마지막 번호는 우리가 임의로 정해줘야 한다는 점인데요. 5개의 배열이 존재한다면, 5를 적고 +1을 적어주면 됩니다.

아래를 보시면 slice(2,5+1)이라고 적혀있는 것이 보이시죠? 이 코드를 간단하게 설명한다면 아래와 같습니다.

 

"리스트 안에 있는 li목록 중에, 2번째부터, 5번째까지 css를 적용시킬래. 모두 초콜릿 색깔로 말이야.

$('#list > li').slice(2,5+1).css('backgroundColor','chocolate');

 

만일 위와 같이 작성했다면 이렇게 색칠이 되는 것을 볼 수 있습니다.

4-5. 필터링 메서드 ( >)

위의 함수들을 보았다면, ">"은 갑자기 왜 사용하지?라고 생각할 수 있는데요. 선택된 요소들 안에 있는 다른 요소를 가져올 때 사용하여  이를 필터링 메서드라고 부릅니다.. ul로 예를 든다면, ul이라는 리스트 요소들 안에 있는 li 요소들을 모두 가져올 수 있는 것이죠. 아래의 코드를 이용해서 말이죠.

 

아래의 경우에는 전체 요소를 가지고 왔지만, 이 방법으로 "어느 태그 안에 있는 어느 태그의 첫 번째 요소를 불러올 거야" .혹은 " 어느 태그 안에 있는 어느 태그의 마지막 요소를 불러올꺼야" 도 가능하다는 것이죠.

let temp = $('#list > li').css('backgroundColor','skyblue');
console.log(temp);

5. DOM의 모든 요소 정리

DOM의 모든 요소(element)를 정리해 보면 전체 선택자 $(*)와 태그 선택자 $('tag'), 지정된 클래스 $(". class명")으로 나뉩니다.

5-1. 태그 선택자 $('tag')

태그선택자는 지정된 태그와 일치하는 모든 요소를 선택합니다.

5-2. 지정된 클래스 $(". class명")

지정된 클래스 명과 일치하는 모든 요소를 선택합니다.

5-3. 선택된 요소의 내부에 추가하는 함수

선택된 요소의 내부에 추가하는 함수들은 아래와 같습니다. 주로 사용하는 함수들은 adppend, prepend(), before(), hide()가 있는데요. 각각의 예제를 보면서 적용해 보도록 할게요.

.adppend() //선택된 요소의 마지막에 추가합니다.
.prepend() //선택된 요소의 첫번째에 추가합니다.
.after() //선택한 요소의 뒤에 추가합니다.
($('div').) //선택된 요소의 외부에 추가합니다.

.before() //선택된 요소의 앞부분에 추가합니다.
.hide() //선택된 요소의 css 를 자동으로 조정해서 사라지게합니다.

저는 실습 예제를 위해서 루피 이미지들을 많이 가져왔는데요. 물론, 여러분 이런 사진 명령어들을 입력하기 전에 html을 작성해야 하는 거 아시죠?

5-4. 함수의 적용방법

$('div').append('<img alt="루피3" src="./images_jQuery/img3.png" />');
$('div').prepend('<img alt="루피4" src="./images_jQuery/img4.png" />');
$('div').before('<img alt="루피5" src="./images_jQuery/img5.png" />');
$('div').after('<img alt="루피" src="./images_jQuery/img2.png"/>');
$('div').after('<p>이쀼다!');

 

5-5. 이미지 혹은 텍스트 숨기기 달인 되기

우리가 자바스크립트를 이용하다 보면, 버튼이 눌렀을 때 어느 특정 이미지, 혹은 텍스트를 감추고 싶었을 경우가 있으실 텐데요. 이때 사용되는 hide함수 어떻게 쓰게 될까요? 아래와 같은 코드는 너무 간단하죠?

$('img').hide();

 

위의 함수에서 원하는 값을 정하고 싶다면 아래와 같이 작성해 주면 됩니다.

$('img').eq(1).hide();

---

hide함수 말고 다른 방법은 없을까?

그럼 이건 어떠세요? 아래를 보면 우리에게 익숙한 display가 나타난답니다. 근데, 이렇게 하면 이미지 자체를 가지고 있는 태그가 숨겨질 테니, 몇 번째 아이만 숨기고 몇 번째 아이는 살려두고 싶다 생각하시겠죠?

$('img').css('display','none');

 

"나는 모든 이미지가 아니라 첫 번째 요소 중에 가장 첫 번째만 숨기기 하겠다."

 $('img').first().css('display','none');

"모든 이미지가 아니라 마지막 요소의 사진만 없애겠다.

$('img').last().css('display','none');

"나는 중간에 있는 요소의 사진만 없애겠다"

$('img').eq(1).css('display','none');

 

---

 

 

"없애긴 할 건데 천천히 없애고 싶어."

 $('img').hide('slow');

제이쿼리 왜 쓸까? 위의 서식에 이미지를 삭제하는 방법을 자바스크립트로 바꾼다면?

이렇게 긴 문장을 한 줄로, 정리할 수 있기때문이죠.

let imgs = document.getElementsByTagName('img');
for(let img of imgs){
img.style.display='none';
}