$$config title: day7,web3 keywords: - jquery 탐색 메소드 - tailwind로 반응형 만들기 $$ # 메모 # jquery 탐색 메소드 1. 형제 요소의 탐색 - `.siblings()` : 선택한 요소의 형제 요소 중에서 지정한 선택자(괄호 안 요소, 작성하지 않을 경우 모든 형제)에 해당하는 요소를 모두 선택 ```js $this.removeClass("active"); //siblings()는 remove보다 아래에 작성해도 된다. $this.siblings().addClass("active"); ``` - `.next()` : 선택한 요소의 바로 다음에 위치한 형제 요소 선택 - `.prev()` : 선택한 요소의 바로 앞에 위치한 형제 요소 선택 ```js $(".box-1 > *").click(function(){ let $this = $(this); $this.removeClass("active"); $this.prev().addClass("active"); //클릭 당한 요소의 앞 요소 $this.next().addClass("active"); //클릭 당한 요소의 다음 요소 }); ``` 2. 하위 요소의 탐색 - `.children()` : 선택한 요소의 자식 요소를 모두 선택 - `.find()` : 선택한 요소의 자손 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택 - 자식, 후손 다 선택 가능 - ()괄호 안을 비워두면 안됨 - ex) .find("*") : 선택한 요소의 모든 자손 선택 / ("> *") : 자손 전체 선택 / (":nth-child(2)") : 둘째 자손 선택 ```js $this.parent().find("> *").addClass("active"); //$this.parent().children().addClass("active"); 와 같음 ``` 3. 상위 요소의 탐색 - `.parent()` : 선택한 요소의 부모 요소를 선택 - 유사개념 `.parents()` 는 선택한 요소의 상위 요소를 모두 선택 ```html

첫번째

두번째

``` ```js $(".box-1 > *").click(function(){ let $this = $(this); $this.parent().children().addClass("active"); //클릭 당한 요소의 부모(같은 class를 가졌더라도, 클릭당한 자식을 가지고 있는 첫번째 또는 두번째 div만 선택됨)를 찾고, 그 자식들을 다시 찾음 $this.removeClass("active"); }); ``` # tailwind로 반응형 만들기 1. 미디어 쿼리를 이용한 반응형 만들기 ```html

top-bar

mobile-top-bar

``` ```css @media(max-width: 767px){ /* 767px 이하 */ .visible-on-md-up { display: none; } } @media(min-width: 768px){ /* 768px 이상 */ .visible-on-sm-down { display: none; } } ``` 2. tailwind를 이용한 반응형 만들기 ```html

top-bar

mobile-top-bar

``` - [codepen](https://codepen.io/midm/pen/XWzoJrW) ///