$$config title: 구조 가상 셀렉트 / 모던 웹을 위한 상세한 모던 css selector 정리 3 keywords: - IT - ... $$ ### 구조 가상 클래스 셀렉터 - fist-child : 부모의 첫 번째 자식인 요소를 선택 - last-child : 부모의 마지막 자식인 요소를 서택 - nth-child(n) : 부모의 첫 번째 요소부터 시작해서 n 번째 요소 선택 - nth-last-child(n) : 부모의 마지막 자식 요소부터 뒤에서 시작해서 n 번째 요소 선택 - n에 대한 것은 (2n-1을 하면 서로 짝수들 끼리 자동으로 계속 색을 변환시킴) ##not 부정문 ``` ㅔㅔhead style에 h2:not(.dave) { color : red;} << 면 body에 h2 class="dave" test h2 test를 작성시 dave가 아닌 h2인 것에 적용 됌 ``` ### ruquired 속성 - input 태그로 생성된 입력창 (ex 아이디 생성란 )에 데이터를 무조건 넣어야 됌. 검사시스템같은거임 아이디 비밀번호 만들 때 조건 같은거를 성립 해야하듯이.. - 만약 정합성에 검증된 input 또는 form은 valid 검증이 실패한 것은 invalid 셀렉터를 넣어준다 ```

Dave Lee

잔재미코딩

``` - pen이나 컴파일러로 돌려보셈 ### pattern 속성 - input 태그로 생선된 입력창에 넣은 데이터가 원하는 데이터 포맷에 맞으면 정합성(required)이 검증ㄷ 판단 . 아까 말한 조건 성립 - 패턴 값은 정규표현식 ```

Dave Lee

잔재미코딩

``` http://www.w3bai.com/ko/tags/att_input_pattern.html#gsc.tab=0 << 양식 0 -9 즉 숫자를 의미인 6자리인 번호를 생성해야함 . 조건이 성립되면 valid 성립 되지 않으면 invalid ### 가상 요소 셀렉터 # 다른 가상 셀렉터와 달리 두개의 클론 :: 을 사용 - first-letter:요소의 첫 글자 선택 - first-line 요소의 첫 라인 선택 - after 요소의 content 뒤에 위차하는 공간 선택 content 프로퍼티와 함께 사용 - before: 요소의 content 앞에 위치하는 공간 선택 content 프로퍼티와 함께 사용 - selection: 요소에서 드래그한 부분을 선택 약간 강조 느낌 ios safari 에서 호환이 안될 수도 있음 ```

시니어 프론트엔드 엔지니어를 구하기 어려운 이유

프론트엔드 엔지니어라고 별도 분야로 불려진지 얼마 안되었음. 개발자와 디자인은 극과 극임에도, 프론트엔드 엔지니어는 디자인을 온전히 구현할 수 있을만한 CSS등의 역량과 프로그래밍 역량, 여기에 다양한 프론트엔드 프레임워크를 활용할 수 있어야 함. 예전과 달리 굉장히 탁월한 역량을 가지고 있어야 함

```