이자다의 기록

아래의 코드가 html 파일에 작성됐다고 가정한다. 딸기 수박 오렌지 망고 사과 1. first-child ABC:first-child 형태로 작성한다. 선택자 ABC가 형제 요소 중 첫째라면 선택한다. .fruits span:first-child 라고 작성하면 span 요소 중 첫째인 '딸기'를 선택한다. .fruits 클래스를 가진 선택자와 그 하위 선택자인 span의 조건을 충족하는 요소 중 '딸기'가 조건에 부합한다. .fruits div:first-child 라고 작성하면 아무것도 선택하지 못한다. fruits 클래스를 가진 div태그의 형제들 중 하위 선택자div는 첫째가 아니고, 때문에 첫째를 선택하는 first-child는 작동하지 않는다. 이때 처음 공부하면 오해할 수 있는게, .frui..

CSS 선택자는 앞에서부터 읽어나가는 게 아니라 뒤부터 읽어나가는 게 좀 더 직관적이고 알아먹기 편하다. input:focus, a:active 처럼 짧다면 문제가 없지만 .fruits span:first-child 같이 하위 선택자도 선택하게 된다면 선택자를 오해할 수 있다. 위의 선택자는 .fruits 선택자의 하위 선택자 span을 만족하는 요소가 형제 요소 중 첫째라면 선택하고, 아니라면 선택하지 않는 선택자이지만 앞에서부터 읽어 나간다면 .fruits 선택자의 하위 선택자 span 요소 중 첫째를 선택하는, span 요소 중에 형제 요소 중 첫째인 선택자가 없더라도 span 요소의 첫째를 선택하는 선택자라고 오해할 수 있다. 뒤에서부터 읽는다면 형제 요소들 중 첫번째 요소를 고르는데 조건이 .f..

CSS의 가상 클래스(의사 클래스)는 선택자에 추가하는 키워드이다. 1. hover a:hover { color: red; } 처럼 사용. a는 선택자(태그, 클래스 선택자 등 여부 상관 없음) 태그 옆에 :hover 를 붙여서 사용. 선택자 a 요소에 마우스 커서가 올라가 있는 동안 활성화. 2. active a:active { color: red; } 선택자 a 요소에 마우스를 클릭하고 있는 동안에 활성화. 3. focus 포커스가 될 수 있는 요소는 몇가지로 정해져 있다. 대표적으로 input 요소가 그렇고 그 외에도 사용자에게 정보를 입력받는 'html 대화형 콘텐츠'가 해당한다. INPUT, A, BUTTON, LABEL, SELECT 등 여러 요소가 있다. 그리고 html 대화형 콘텐츠 요소가..