CSS property

Flex container, Flex item에서의 기본값 유의점 flex item들이 여러 개의 행(열)으로 이루어져 있을 때, flex container의 높이(너비)가 두 행의 높이(너비) 합보다 더 크다면 기본적으로 교차축 방향에서 일정한 간격을 두고 배치된다

리액트 프로젝트 진행 중에 다음과 같이 어떤 요소가 특정 클래스명을 가지고 있지 않은 경우에만 css 속성을 적용해야 하는 상황이 있었다.이 경우 다음과 같이 가상 클래스 :not(...)을 활용하면 특정 클래스가 아닌 경우에 따로 css 속성을 지정할 수 있다.scs

클래식 공연 정보 제공 사이트를 개발하던 중, 공연 제목이 너무 길어 다른 요소들과 정렬이 어긋나는 문제가 있었다.이는 -webkit-line-clamp 속성으로 줄 수를 제한하여 해결할 수 있다.속성 앞에 접두사처럼 붙는 -webkit-은, Chrome, Safari

Grid 사용방식을 부모(컨테이너) 관점, 자식(셀) 관점 속성, Area 활용 방법으로 나누어 정리하였다.반응형으로 만들 경우 다음과 같이 % 나 fr 을 사용한다.현재 .container의 크기는 뷰포트 전체 크기와 같다. 이 너비의 10%라는 의미이다.fr을 사용