css

CSS - 변수 :root라는 가상 클래스 선택자에 변수를 전역 등록할 수 있다. --변수명 : 값; 속성 : var(--변수명); 속성 : var(--변수명, 요소); /* 변수명에 해당하는 값이 없으면 요소 값이 지정 */ @supports @supports 규칙 기능 쿼리 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공 /* 기본 구조 */ @supports ( 기능1 ) {} @supports not( 기능1 ) {} /* 지원하지 않는 경우 */ /* 여러개 */ @supports ( 기능1 ) and ( 기능2 ) {} @supports ( 기능1 ) or ( 기능2 ) {} not(@supports ( 기능1 ) or ( 기능2 ))..

Grid Grid Items 1. grid-row 속성 grid-row-start, grid-row-end, grid-column-start, grid-column-end span 키워드를 사용하면 셀 갯수를 지정하여 확장할 수 있다 /* 단축속성 */ grid-row : {start 값} / {end 값} 또는 {start 값} / span {값} grid-column : {start 값} / {end 값} 또는 {start 값} / span {값} /* ex */ grid-row: 1/3; /* start: 1, end: 3 */ grid-column: 1/3; /* start: 1, end: 3 */ 빈 칸에 4를 넣기 위해 grid-auto-flow: row dense; 를 사용한다 2. just..

Float 수평정렬, block 형태 float: left로 왼쪽 수평 정렬을 했는데 요소들이 컨테이너 밖으로 튀어나왔다. 이런 경우에는 해제(clear)를 해줘야 한다 해제(clear) 하는법 float를 부여했다가 해제를 시작할 요소에 clear 속성을 부여한다 (그러나 사용하지 않을 요소를 구조적으로 만드는 것은 비효율적이다) container에 overflow: hidden => float과 관련이 없다(근본적인 해결 방법이 아니다) 컨테이너에 가상 요소 선택자 ::after를 이용 (가상 요소 선택자는 content가 필수로 있어야 한다) clearfix가 부여된 컨테이너에는 float을 사용하는 요소들만 있어야 한다 Position position은 body 기준으로 위치한다 static을 제..