[멋쟁이 사자처럼 프론트엔드 스쿨] 13일차 TIL - 아이콘, box-shadow, flex-grow, :focus, @media-query

🍰 진도 급발진...

🍴 아이콘 삽입하기

1. web font 사용

https://fontawesome.com/start

Font Awesome

2. <img>로 이미지 삽입

<img src="/images/icons/right_open.svg" alt="" />
<a href="/">회원가입</a> 
<!-- 장식성 요소의 경우 대체 텍스트 주지 않음 -->

3. background로 삽입

🍴 그림자 효과

box-shadow

• 값 두 개: offset-x(가로축 수평 거리), offset-y(세로축 수직 거리). 요소 박스로부터 그림자의 거리 지정.
• 값 세 번째: blur-radius - 흐림 효과 지정. 값이 높을 수록 커짐(넓어짐).
• 값 네 번째: spread-radius - 그림자 확대/축소 지정. 양수-확장, 음수-축소
• 다섯 번째: inset. 박스 내부 그림자로 변경. 지정 안 하면 외부 그림자 구현.

🍴 flex-grow, flex-shrink

flex-grow

width가 auto, 남는 공간이 확대된 것처럼 보임

• flex-item 요소가 container 내부에서 할당 가능한 공간의 정도 선언
• 형제 요소인 flex-item들이 동일한 flex-grow 값 ⇒ 동일한 공간 할당
• 다른 소수값 지정 ⇒ 그에 따라 다른 공간값 나누어 할당 받음

flex-shrink(기본값 1)

• 보통 flex-grow 사용 시 함께 사용
• flex-item 요소의 크기가 container 요소의 크기보다 클 때 사용
• 설정된 숫자값에 따라 container 요소 내부에서 item 요소의 크기 축소됨

🍴 :focus

: 양식의 입력 칸 등 포커스 받은 요소 나타냄

• focus 받은 요소 자체에만 해당
• outline-width
• outline-style
• outline-color

절대 :focus {outline: 0;}으로 외곽선을 대체 외곽선 없이 제거하지 말라! 만약 제거했으면 :focus-visible은 꼭 추가해주기!

focus-visible

: 오직 키보드를 통해서 포커스 받은 HTML 요소 선택 시 사용.

• 키보드로만 이용하는 분들에게 유용. 지금 어디에 focus 돼있는 지.

focus-within

: 부모에 접근 가능

• 이 속성을 사용하여 어떤 요소에 스타일 적용 → 해당 요소를 포함한 내부 요소 중 하나가 포커스 받으면 그 스타일이 활성화 됨

🍴 미디어 쿼리

@media-query

: 장치의 미디어 유형 or 화면 해상도, 방향 등 사용자 기본 설정과 같은 기능이나 특성에 따라 CSS 스타일 적용 가능.

• @media at-rules를 사용하여 조건부로 스타일 적용
• 논리 연산자로 결합 가능(not, and, only)
• 대소문자 구분 X
• 쉼표로 구분하여 여러 쿼리 목록 작성 가능

breakpoint(중단점): 어느 시점부터 다른 디자인?

모바일 퍼스트규칙

: CSS 미디어 쿼리가 지원 되지 않는 하위 브라우저가 있을 수 있음

⇒ 모바일 CSS를 기본으로, PC, 태블릿에서 미디어 쿼리를 사용함으로써 모바일에서 레이아웃이 깨지지 않음.