My Tech Blog (선택자)

탐색선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 예로 배열의 인덱스를 사용해서 선택하는 `위치탐색 선택자`와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 `속성 탐색 선택자`가 있다.  1. 위치 탐색 선택자 ▼기본 선택자로 선택한 요소는 배열에 담기게 된다.그래서 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있게 되는 것이다. 종류용법설명$("요소 선택:first")$("요소 선택").first()$("li:first")$("li").first()전체 요소 중 첫번째 요소만 선택$("요소 선택:last")$("요소 선택").last()$("li:last")$("li").last()전체 요소 ..

함께 보면 좋은 관련 포스팅 ▼ [JavaScript] jQuery를 사용할 때 유의해야 할 사항들⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최awesomepossum.tistory.com [JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습1. Object (객체)  2. DOM (Document Object Model)2-1. DOM(문서객체모델) 문서객체모델(DOM) HTML CSS JS  2-2. innerHTML vs textContent 오늘은 문서객..

CSS Diner는 CSS 선택자를 학습하고 연습할 수 있는 재미있는 웹 기반 게임이다.사용자가 HTML 코드에 적용할 올바른 CSS 선택자를 작성하면, 게임의 각 레벨을 클리어하며 점점 더 복잡한 선택자를 익힐 수 있다. 이 게임은 CSS를 배우거나 복습하고 싶은 초보자와 중급자를 위한 좋은 도구이고특히 선택자 공부를 하고 싶은 사람들께 추천한다.크롤링 연습하시는 분들께도 많은 도움이 될 것 같다.  https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io 가장 쉬운 난이도인 1번부터 가장 어려운 32번까지 있다.ㅋㅋ 화면에서 고르라고 하는 물건을 고르는 CSS..

1. CSS 선택자 한 눈에 보기 선택자예시설명태그 선택자h1태그로 요소를 선택전체 선택자* (유니버셜 선택자)모든 요소를 선택div *특정 요소의 자식 요소 모두 선택클래스 선택자.slide클래스명으로 요소를 선택아이디 선택자#logo아이디명으로 요소를 선택후손 선택자.slide h2, .slide .btn후손(자손) 요소를 선택자식 선택자.slide > div앞 선택자의 바로 밑 자식 요소 선택인접형제 선택자.banner + div앞 선택자의 형제 요소 바로 다음 요소 선택.banner ~ div앞 선택자의 형제 요소 중 두 번째 요소 모두 선택그룹화h1, h2color: red콤마로 선택자를 나열하여 선택속성 선택자a[target], a[target="_blank"]속성명 또는 속성명의 값으로 요소..

​ CSS 처음 배우시는 분들께 가상요소는 다소 어려운 개념입니다. 중급자들 과정에서 배우는 것이 적당하지만, CSS에서 자주 사용되는 트렌드이기 때문에 간단한 개념과 활용법 정도는 알아두시는게 좋습니다. 📌1. 가상요소 ::before과 ::after CSS로 선택한 대상 HTML요소 앞이나 뒤에 새로운 요소를 추가 할 수 있는 선택자입니다. 가상요소는 페이지 안에 실제로 존재하는 것은 아니지만, 기존 태그 요소의 앞이나 뒤쪽에 새로운 요소가 '있는 것처럼' 사용 할 수 있어서 자주 사용됩니다. 특히 실무에서 고급 CSS 작성 기법으로 활용도가 높고, 자바스트립트로만 구현할 수 있는 HTML요소의 이동 효과를 CSS로 비슷하게 만들어 볼 수 있다는 점에서 아주 유용하게 쓰입니다. 간단히 아이콘을 추가..