Javascript에서 $ 기호는 뭘까?
우리는 자바스크립트 코드를 볼 때 $ 기호가 있는것을 자주볼수있다.
다른 코드는 대충 이해하겠는데 대체 $ 기호는 무엇이며 왜 사용하는것일까?
결론부터 말하자면 $기호는 자바스크립트 라이브러리인 JQuery(제이쿼리)의 '선택자'이다.
잉? 라이브러리는 무엇이고, JQuery는 무엇이며, 선택자는 또 무엇이냐?
지금부터 설명들어간다. 머릿속에 때려박자. (외울필요는 없다. 이해만 하자.)
라이브러리는 프로그래밍 언어에서 사용자가 자주 사용하는 (또는 필요로하는)
함수의 집단이라고 생각하면 된다.
쉽게말해, 내가 웹으로 계산기를 만들고 싶은데 해야할일을 대충 나열해보자.
HTML과 CSS를 사용하여 화면 레이아웃을 구성하고 각종 컴포넌트(버튼과 같은)의
위치와 크기를 지정한 후 자바스크립트 함수를 통해 각각의 컴포넌트들이 사용자로부터
눌러졌을 때 값을 받아오거나 출력한다.
이를 실제로 코딩한다고 가정하면 프로그래머에 따라 짧게는 몇시간,
길게는 며칠이 걸릴지도 모른다.
그중 가장 시간이 오래걸리는 부분이 당연 UI(UX)부분이다.
UI는 User Interface의 약자로 사용자가 보이는 화면을 말하는것이다.
UX는 User Experience의 약자로 사용자의 경험을 위주로 개발하는것이다.
비슷하긴하지만 엄밀히 따지면 조금 다르다.
아무튼, 화면구성에서 시간이 많이 차지하는것을 빠르고 편리하게 만들어주는것이 바로
라이브러리이다. (물론 내부 로직, 프로그래밍에서도 마찬가지다.)
(적게쓰고 많이한다... 라고 적혀있다. 같은 기능인데 코드가 짧아진다는 뜻인가보다..)
JQuery는 자바스크립트의 대표적인 라이브러리이며 가장 많이 사용되는 라이브러리이기도 하다.
JQuery Mobile도 존재하는데, 이는
JQuery를 기반으로한 모바일 환경에서 사용하기 최적화된 라이브러리이다.
JQuery를 사용하는방법은 아주 간단하다.
홈페이지에 접속하여 직접 다운받아서 프로그램에 삽입하는 경우가 있으며
다운받지않고 코드내에서 링크를 걸어 사용하는 방법이 있다.
둘의 차이점은 프로그램에 직접 삽입하는 경우 인터넷이 연결되어있지 않아도 작동하는것이고,
링크로 걸려있는 경우에는 인터넷이 연결되어있어야 작동된다는 점이다.
사실 웹 프로그래밍은 인터넷에 연결해서 사용되는 경우가 많으므로
귀찮을때나 규모가 작거나 테스트할때는 링크로 연결해서 사용한다.
아무튼 지금까지 라이브러리랑 JQuery에 대한 설명을 마쳤다.
그렇다면 '선택자'는 무엇일까?
JQuery(또는 JQuery Mobile)에서 선택자는 $기호를 사용하며,
DOM의 객체들을 편리하게 호출하는 기능을 한다.
예 1) $('*').css("Color", "red");
예 2) $('.myh1).css("블라블라...") - id로 선택하기(. : 점 사용)
예 3) $('#myul).블라블라... - class(클래스)로 선택하기(# : 샾 사용)
JQuery 선택자 목록과 자세한 설명은 다음 포스팅에서 소개하겠다.
질문사항이나 잘못된 점은 댓글로 지적바란다. 그럼 수고링!
'HTML, CSS, JS' 카테고리의 다른 글
| 자바스크립트 SyntaxError: missing 오류 해결 방법 (1) | 2019.04.10 |
|---|---|
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
| [프론트엔드 개발자] ECMAScript란? (0) | 2019.03.20 |
| HTML div 태그 사용법 (0) | 2018.11.13 |
| HTML에 CSS 적용하기 (0) | 2018.10.03 |
| Atom Editor 설치 (0) | 2018.10.01 |
