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

오늘의 목표

Ch 7. CSS 개요. 를 듣는다.

본격적인 CSS 문법부터!! 가보쟈고오오!

 

오늘은 연휴 첫날

두둥! 오늘 아침은 집 앞 카페에 왔다

일찍 쉬는 날이라서 아침에 강의를 들을 수 있다는 게 별거 아닌데 소소하게 행복하네 ㅎㅎ

 

오늘은 본격적으로 css 기본적인 내용, 실제로 사용되는 내용을 확인해본다.

 

 

해석

선택자로 어떤 요소를 찾아서

속성은 에서 '은' 이 - 콜론 (:)

값이다 에서 '이다'가 - 세미콜론(;)

 

 

중괄호로 범위를 잡아 선택자 스타일을 지정한다.

코드를 작성할 때, 정말 반드시..!

항상 기본적인 규칙이나 추천받은 방식에 맞게 코드를 처음부터 예쁘게 쓰는 습관을 들여놓아야한다.

그래야 협업을 하거나 함께 작업을 할 때, 힘들지 않다.

 

그리고 메모를 꼭 해야한다!!

주석!!! 잘 정리해야한다.

 

아이패드에 정리했다.

css 선언방식 4가지와 선택자 기본, 복합 내용을 정리했다.

이렇게 한 번씩 정리하니까 아주그냥 눈에 귀에 쏙쏙 잘 들어오넹ㅎㅎㅎ

 

기본 선택자

전체 선택자

모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다. 구문: * ns|* *|* 예제: *은 문서 내의 모든 요소와 일치합니다.

유형 선택자

주어진 노드 이름을 가진 모든 요소를 선택합니다. 구문: elementname 예제: input은 모든 <input> (en-US) 요소와 일치합니다.

클래스 선택자

주어진 class 특성을 가진 모든 요소를 선택합니다. 구문: .classname 예제: .index는 "index" 클래스를 가진 모든 요소와 일치합니다.

ID 선택자

id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다. 구문: #idname 예제: #toc는 "toc" ID를 가진 요소와 일치합니다.

특성 선택자

주어진 특성을 가진 모든 요소를 선택합니다. 구문: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.

 

그룹 선택자

선택자 목록

,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다. 구문: A, B 예제: div, span은 모든 <span>과 <div> (en-US) 요소와 일치합니다.

 

결합자

자손 결합자

""(공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. 구문: A B예제:div span은 <div> (en-US) 요소 안에 위치하는 모든 <span> 요소와 일치합니다.

 

자식 결합자

> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다. 구문: A > B 예제: ul > li는 <ul> 요소 바로 아래에 위치하는 모든 <li> 요소와 일치합니다.

 

일반 형제 결합자

~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다. 구문: A ~ B 예제: p ~ span은 <p> 요소를 뒤따르는 모든 <span> 요소와 일치합니다.

 

인접 형제 결합자

+ 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다. 구문: A + B 예제: h2 + p는 <h2> 바로 뒤에 위치하는 <p> 요소와 일치합니다.

 

열 결합자 (en-US) Experimental

|| 결합자는 같은 열에 속하는 노드를 선택합니다. 구문: A || B 예제: col || td는 <col> (en-US)의 범위에 속하는 모든 <td> (en-US) 요소와 일치합니다.

 

 

 

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

https://bit.ly/48sS29N

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