패스트캠퍼스 환급챌린지 10일차 미션 (2월 10일) : 프론트엔드개발 강의 후기

오늘의 목표

Ch 7. CSS 개요. 나머지 부분을 마저 들어야지

 

오늘은 연휴 2일차인데 오늘도 역시나 카페에 왔다

강의를 듣는다는 이유로 카페에 온 건 정말 좋은데

어제오늘 몸이 안좋아서 컨디션이 많이 안좋아서..좀 힘드네ㅜㅜ

호오 그래도 시작해봅니다요..!

 

 

어제는 선택자 종류를 알아보고 기본과 복합 선택자를 알아봤었다.

이어서 오늘은 5,6,7,8,9, 10까지 도전!인데 안되면 내일까지..!

 

선택자_가상클래스1,2

선택자_가상 요소

선택자_속성

스타일 상속

선택자 우선순위-는 내일..>!!

 

 

css에는 정말 많은 선택자가... 있다.

css를 하면서 느끼는건..디자이너가 css 코딩을 어느정도 할 줄 알면 내가 그냥 원하는대로 뚝딱 만들면 되겠구나 싶었다.

어느정도 기본적인 움직임(예를 들면, hover 같은 움직임)도 코드로 한두줄만 입력하면 바로 컬러랑 움직임 그리고 border 값이 완성되니까.. 너무 신기하다.

input 으로 어느정도 로그인 화면도 나타낼 수 있을 거 같다 !! 신기하넹ㅎㅎ

 

 

가상 선택자

ABC : hover

마우스 커서를 대고 떼지 않으면 이 상태가 유지된다.

 

ABC: focus

마우스로 클릭했을 때, 클릭된 부분이 어딘지를 보여주는 거다.

ex) input 과 같은 입력창 형태(포커스가 가능한 것들)에만 적용 가능함.

 

1)가상클래스 선택자

ABC: firtstchild

ABC: lastchild

ABC: nth child(n)

ABC: nth child(2n) >> 짝수번째 선택

ABC: nth child(2n+1) >> 홀수번째 선택

ABC: nth child(n+2) >> 첫번째만 제외

1-1)부정선택자

ABC: not(XYZ) >> ABC 중에 XYZ가 아닌 선택자

 

2) 가상요소선택자

ABC::before > ABC 요소 내부 앞에 붙이는 거

ABC::after > ABC 요소 내부 뒤에 붙이는 거

 

3)선택자_속성

[ ABC ] _대괄호 사용 

[ ABC +"XYZ" ] 

 

타입이 password 인 거만 오렌지 색 배경으로 나태내기 

 

4) 스타일 상속

강제 상속은 부모 요소에서 값을 변경했는데, 자식 요소를 미처 수정하지 못해서 오류가 나지 않도록 값을 넣는 자리에 inherit 를 넣는 거다.

 

오늘은 이만하고 자야겠다.

내일 이어서 마지막 선택자우선순위를 보고 다음 ch8 으로 넘어가야겠다.

조만간에 실습을 하게되겠고먼

꺄아

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]