Steady and right

탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한번 더 탐색하여 좀 더 세밀하게 선택할 수 있다 위치 탐색 선택자 기본 선택자로 요소(태그)를 선택했을 경우 배열에 담기게 된다, 이때 배열의 인덱스(index)를 사용하면 특정 요소를 더 세밀하게 선택할 수 있는데 위치 탐색 선택자는 바로 이 인덱스를 활용하여 특정 요소를 선택하게 된다 구분 종류 사용법 설명 위치 탐색 선택자 first 선택자 $("선택 요소:first") $("선택 요소").first() 선택된 요소 중 첫번째 요소를 선택 예시 $("#menu li:first") $("#menu li").first() last 선택자 $("선택 요소:last") $("선택 요소").last() 선택된 요소 중 마지막 ..

인접 관계 선택자 인접 관계 선택자의 경우 직접 선택자로 요소(태그)를 먼저 선택하고 그다음 선택한 요소와 상관이 있는 (가까이에 있다던지 이전 혹은 그다음에 위치하고 있는) 요소를 선택할 때 사용한다. 구분 종류 사용법 설명 인접 관계 선택자 부모 요소 선택자 $("선택 요소").parent() 선택한 요소를 감싸고 있는 부모 요소를 선택 예시 $("#menu").parent(); 상위 요소 선택자 1. $("선택 요소").parents() 2. $("선택 요소").parents("선택 요소") 1. 선택한 요소 기준으로 모든 상위 요소 선택 2. 선택한 요소 기준으로 상위 요소 중 선택한 요소만 선택 예시 1. $(".example1").parents() 2. $(".example2").parents..

선택자 선택자는 HTML 요소를 선택해서 가져오는 역할을 한다. jQuery(제이쿼리)는 이 선택자를 통하여 HTML의 요소를 보다 쉽게 선택하여 동적인 CSS, 이벤트, 애니메이션 등을 적용할 수 있다. 매우 많은 선택자가 존재하며 본글에서는 기본선택자 중에 직접 선택자에 대하여 알아보고자 한다. 직접 선택자 구분 종류 사용법 설명 직접 선택자 전체 선택자 $("*") 모든 요소를 선택 예시 $("*").css("border", "1px solid black"); 아이디 선택자 $("#아이디명") id 태그에 지정한 값을 선택 예시 $("#menu").css("border", "1px solid black"); 클래스 선택자 $(".클래스명") class 태그에 지정한 값을 선택 예시 $(".categ..

제이쿼리(jQuery)의 탄생 이전에는 HTML의 Elements(요소)를 접근하는 것이 쉽지 않았다고 한다. 또한 웹브라우저마다 호환성이 떨어져 개발한 내용을 다른 브라우저에 적용하기가 어려웠다, 이에 제이쿼리가 요소의 접근을 물론 각 웹브라우저의 호환 더 나아가서는 애니메이션과 이벤트 등에도 편의 기능을 제공하며 자바스크립트에서 필수적인 존재로 자리 잡았다. (지금은 제이쿼리의 입지가 점점 더 좁아져 가는 상황이라고 한다.) 제이쿼리(jQuery)의 장점 제이쿼리가 왜 자바스크립트에서 많이 사용할 수 밖에 없었는지 장점을 통해 간단하게 알아보고자 한다. 1. HTML DOM의 접근성과 조작성 쉽게 말해 각 태그들에 접근하기가 용이하다, 제이쿼리의 선택자를 사용하면 클래스, 아이디 더 나아가서는 해당 ..

마크업 언어(Markup Language)란 마크업 언어는 태그 등을 이용하여 문서 혹은 데이터의 구조를 기록하는 언어로, 대부분 '기록'의 용도로 사용되기 때문에 프로그래밍 언어로 취급하지는 않는다고 한다. 조금 더 풀어서 살펴보기 위해 예를 들어보자면 클라이언트가 잡지를 읽는다고 가정해보자, 이때 1-10페이지 까지는 의류, 11-20 페이지 까지는 액세서리의 내용이 들어있다고 한다면, 이 페이지들은 하나하나 마크업으로 작성이 되어서 존재하는 것이다(인터넷에서는 웹페이지) 이것을 프로그래밍 언어로 각 페이지를 요청에 맞게 방문할 수 있게 하면 그것이 바로 서비스가 된다. 즉 클라이언트가 사용하는 웹서비스는 마크업언어를 기반으로 쌓아 올린 페이지들의 묶음인 것이다. 가장 대표적인 마크업의 사용 예는 아..

데이터를 위한 객체를 만들다 보면 항상 DTO와 VO를 혼용해서 쓰고 하는데, 어떤 것이 맞는 것인지 항상 헷갈렸다. 한번 정리해보면서 이 둘의 차이는 무엇이고 어떤 상황에서 쓰는 것이 가장 이상적인지 정리해보고자 한다. DTO(Data Transfer Object) 순수하게 데이터를 담아 계층 간으로 전달하는 객체이다. 로직을 갖고 있지 않은 순수한 데이터 객체이며 메서드로는 getter/setter 만을 갖는다. 여기서 getter/setter 이외에 다른 로직이 필요 없는 이유를 좀 더 자세히 살펴보자면, 만약 DTO가 데이터 전달 만을 위한 객체라고 한다면 완전히 데이터 '전달' 용도로만 사용하기 때문에 getter/setter로직만이 필요하지 다른 로직이 필요하지 않은 것이다. //getter와..