멋쟁이사자처럼 프론트엔드 스쿨 2기 12_Day

aydennote·2022년 4월 13일
1
post-thumbnail

📖 오늘 학습 내용

1. 속성 선택자

2. 가상 클래스, 가상 요소

3. flex

1. 속성 선택자

1). 태그[title="선택자"]
타이틀 속성 값이 "선택자"인 태그를 선택한다.
2). 태그[title^="선택자"]
타이틀 속성 값이 선택자로 시작하는 태그를 선택한다.
3). 태그[title$="선택자"]
타이틀 속성 값이 선택자로 끝나는 태그를 선택한다.
4). 태그[title*="선택자"], 태그[title~="선택자"]
두 선택자 모두 타이틀 속성값이 "선택자"를 포함하는 태그를 선택한다.
title*="선택자" 는 문자열을 기준으로 판단을 하게 되고,
title~="선택자" 는 단어 기준으로 판단하게 된다.

2. 가상 클래스, 가상 요소 선택자

가상 클래스 선택자는 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동한다.
1). .foo:first-child : foo 클래스의 첫번째 자식인 요소를 선택.
2). .foo:last-child : foo 클래스의 마지막 자식 요소를 선택.
3). .foo:nth-child(n) : foo 클래스의 n번째 자식인 요소를 선택.
4). .foo:nth-child(odd) : foo 클래스의 홀수 번째 자식인 요소를 선택.
5). .foo:nth-child(even) : foo 클래스의 짝수 번째 자식인 요소를 선택.
6). .foo:nth-child(3n+1) : foo 클래스의 3n+1번째 자식인 요소를 선택.
7). .foo:hover : class="foo"인 요소에 마우스를 이동시키면 작동된다.
8). :active : 사용자가 버튼을 누르거나 링크를 클릭할 때, 적용된다.
9). :focus : 요소에 포커스가 있을 때 적용됩니다. input 요소를 클릭한 상태가 포커스되어 있는 상태이다.


가상 요소 선택자는 실제 요소에는 없지만, 요소안에 자식 요소를 추가하는 선택자이다.
1) .foo::before : foo 클래스 안 컨텐츠 앞에 가상 요소를 추가한다.
2).foo::after : foo 클래스 안 컨텐츠 뒤에 가상 요소를 추가한다.
🕵️‍♀️ 이때 생성된 가상 요소는 block level 이다.

3. flex

컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합이다.
부모 컨텐츠에 display: flex;를 추가하여 자식 컨텐츠들을 컨트롤 할 수 있다.
1). flex-direction : 정렬 축을 정하는 속성이다.
2). justify-content : X축을 기준으로 요소들 위치 조절과 간격을 정한다.
3). align-item Y축을 기준으로 요소들 위치 조절과 간격을 정한다.
4). flex-wrap 자식요소를 감싸주는 기능이다. 만약, 뷰포트 사이즈가 줄어 자식요소가 잘리게 되면 다음 줄에 정렬한다.

profile
기록하는 개발자 Ayden 입니다.

2개의 댓글

comment-user-thumbnail
2022년 4월 14일

오늘 외출이 있어서 속성 선택자 부분 놓쳤는데 덕분에 복습 했습니다!! 감사합니다!!!
오늘도 수고하셨어요!😆😆

1개의 답글