👩💻 오늘 공부한 것
1. flex 에서의 gap 속성
gap 스타일 속성은 인접한 요소가 있을때만 갭(gap)을 만든다
예를들어 margin의 경우 인접한 요소들의 존재 여부와 상관없이 항상 스타일이 사용되죠. 하지만 gap의 경우 인접한 요소가 없다면? 당연히 불필요한 공간(space)을 만들지 않습니다.
참고로 예전에는 gap 속성을 사용하는 브라우저가 많지 않았고 gap 속성을 사용하기 위해서 grid 레이아웃이 필요했지만 지금은 자주 사용하는 flex 레이아웃 역시 gap을 사용할 수 있으며 크롬을 비롯한 대부분의 메이저 브라우저에서 사용 가능하기 때문에 앞으로는 자식 요소, 아이템들의 정렬을 위해서 점점 gap을 사용하는 경우가 늘어날 것이라 생각할 수 있습니다.
선택자
일반 형제 선택자
일반 형제 선택자는 선택자 사이에 ~ 를 사용하여 나타냅니다. ~ 을 기준으로 앞 요소 이후에 나오는 모든 뒤 요소(앞 요소는 제외하고 그 뒤에 나오는 요소들)를 선택합니다. 실습은 위와 같은 예제를 사용해주세요.
태그[속성^="변수"]
속성 의 속성값이 변수 로 시작하는 태그를 선택합니다.
로그인 모달창 과제 css 파일 참고
CSS filter 속성
흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
참고자료
CSS Gap Space with Flexbox
https://coryrylan.com/blog/css-gap-space-with-flexbox
[Css] 스타일속성 Gap을 Flex에서 사용하기
https://webisfree.com/2020-12-05/[css]-스타일속성-gap을-flex에서-사용하기
MDN Docs - filter
https://developer.mozilla.org/ko/docs/Web/CSS/filter
