[html/css] 선택자 퀴즈

구조선택자의 기본형 중 맞는것을 고르시오

:first-of-child{속성명: 속성값;} 오답 :first-child
:end-child{속성명: 속성값;} 오답 :last-child
:nth-of-child(숫자 혹은 숫자n){속성명: 속성값;} 오답
:nth-Last-child(숫자 혹은 숫자n){속성명: 속성값;} 정답

ul안에 3개의 li가 들어있다. 그 중 첫번째 li를 선택하는데 틀린방식을 고르시오.

ul>li:first-child 오답 : 맞는방식입니다.
li:first-type 정답 : first-of-type 입니다.
li:nth-child(1) 오답 : 맞는방식입니다.
ul li:nth-child(2n+1) 오답 : 맞는방식입니다.

부모태그div 안에 p태그 1개, a태그 2개, div 태그 한개가 들어있다. 3번째 자식 태그를 선택하는 방법을 고르시오.

div:nth-child(3) 오답 : nth-child는 구조선택자로, 동일한 태그의 자식들 일때 사용하는 태그입니다.
div:nth-last-child(2) 오답 : nth-last-child는 구조선택자로, 동일한 태그의 자식들 일때 사용하는 태그입니다.
div:nth-last-of-type(3) 오답 : nth-last-of-type(1)이 정답입니다.
div:nth-of-type(3) 정답

부모태그div 안에 p태그 2개, a태그 1개, div태그 3개가 들어있다. 이 중 각 태그의 첫번째 태그의 색을 파란색으로 바꾸는 방법을 고르시오.

div:first-child{color:blue;} 오답 : nth-child는 동일한 태그일 때 사용하는 방법입니다.
div:nth-of-type(1){color:blue} 오답 : 세미콜론이 없습니다.
div:first-of-type{color:blue;} 정답
div>p,a,div{color:blue;} 오답 : 모두 다 선택됩니다.

type이 text인 input 태그를 입력 불가하게 만드는 방법을 고르시오.(정답2개)

input type="text" enabled 오답 : enabled는 사용가능한 상태를 말합니다.
input type="disabled" text 오답 : text와 disabled의 위치를 다시 한번 확인해보세요.
input type="text" disabled="disabled" 정답
input type="text" disabled정답

부모태그 con1 안에 input type="checkbox"태그와 div태그 p태그가 순서대로 들어있다. 이 때, input의 체크박스를 클릭했을 때 p태그를 사라지게 만드는 방법을 선택하시오.

con1>input[type="checkbox"]:checked + p{display:none;} 오답 : +로 이어주는 동위 선택자는 형선택자의 바로 밑에 있는 동생선택자1개만 선택할 수 있습니다. 위의 상황에서는 div만 적용이 가능합니다.
con1>input[type="checkbox"]:checked ~ p{display:none;} 정답
con1>input[type="checkbox"]:checked p {display: none; } 오답 : p는 동위선택자이지 후손 선택자가 아닙니다.
con1>input[type="checkbox"]:active ~ p {display: none;}오답 : active는 클릭 했을 때를 말합니다.

p태그에 쓰여진 apple의 a의 색을 파란색으로 바꾸는 방법중 맞는 것을 고르시오.

p:start-letter{color:blue;} 오답 :를 ::로 두번 써야합니다.
p:first-line{color:blue;} 오답 ::로 써야하고, line은 한 줄을 말합니다.
p::first-line{color:blue} 오답 : line은 한 줄을 말합니다.
p::first-letter{color:blue;} 정답

가상요소 선택자에 관련된 내용 중 틀린 것을 고르시오.

가상 요소를 만들 때 div 속성을 이용한다. 정답 : content 속성 가상 요소를 만듭니다.
특정 요소의 앞에 ::before 속성을 사용해 가상 요소를 만듭니다. 오답 : 올바른 내용입니다.
가상요소 선택자는 inline 속성이다. 오답 : 올바른 내용입니다.
html 코드에는 존재하지 않지만 html 구조에서 가상 요소를 만들어 스타일을 부여하는 것이다. 오답 : 올바른 내용입니다.

 

 

+) 추가 다른 퀴즈 추천

https://codepen.io/pehaa/full/ROapJZ

QUIZ: Well aimed? How well do you know CSS selectors?