선택자5 속성 선택자 속성 선택자는 기본 선택자 뒤에 붙여 사용한다. 더보기 선택자 형태 설명 요소[속성=값] 속성과 값이 같은 문서 객체를 선택 요소[속성|=값] 속성 안의 값이 특정 값과 같은 문서 객체를 선택 요소[속성~=값] 속성 안의 값이 특정 값을 단어로 시작하는 문서 객체를 선택 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택 요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택 속성 선택자는 입력 양식과 관련된 태그를 선택할 때 많이 사용한다. body 구성 이럴때 사용하는 것이 속성 선택자이다. val() 메서드는 매개변수를 입력하면 input 태그의 value 속성을 지정하였고, 매개변수를 입력.. 2020. 5. 11. 자손 선택자, 후손 선택자 body 구성 Apple Bag Cat Dog Hello 전체적인 문서 객체를 모델에 나타내면 위처럼 나타낼 수 있다. body태그를 기준으로 body 태그 바로 아래 있는 div 태그가 자손이며, body 태그의 아래에 있는 모든 문서 객체를 후손이라고 한다. 자손 선택자 자손 선택자를 선택하는 선택자이며 '요소A > 요소B'의 형태로 사용한다. 위 코드처럼 body 태그의 자식으로 범위를 한정해 전체가 선택된다. ( div에만 style="color: red" 가 적용된다. ) 후손 선택자 후손 선택자는 이름 그대로 후손을 선택하는 선택자이다. '요소A 요소B'의 형태로 사용하며, 요소A의 후손으로 범위를 한정한다. ( body 태그의 아래에 있는 모든 후손들에게 스타일이 적용된다. div, ul, .. 2020. 5. 9. 아이디 선택자, 클래스 선택자 아이디 선택자 body 구성 Header 2 Header 1 Header 2 script 구성 HTML 웹 표준에 따르면 id 속성은 HTML 페이지 내에서 유일한 값을 가져야 한다. 즉, 위 구성에서 id 속성으로 target은 무조건 한 개만 존재해야 한다. ( 실레 실행에는 2개 이상이어도 문제없음. ) h1 태그 중 id 속성이 target인 문서 객체 선택하기 클래스 선택자 body 구성 Header Header 1 Header 2 script 구성 두 클래스 속성이 모두 있는 문서 객체만 적용하기 현재 body 태그에서 두 클래스 속성이 모두있는 문서 객체는 두 번째 위치한 h1 태그이므로 두 번째 h1 태그에만 스타일이 적용된다. 2020. 5. 6. 태그 선택자 태그 선택자 : 특정한 태그를 선택하는 선택자이다. 태그 선택자는 태그의 이름을 그냥 사용한다. 태그 선택자 Hello World 안녕하세요 헬로월드에 오신것을 환영합니다. 이렇게하면 h1 태그에만 스타일이 적용된다. 여러 개의 태그 선택 2020. 5. 2. 이전 1 2 다음