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 ))..
Float 수평정렬, block 형태 float: left로 왼쪽 수평 정렬을 했는데 요소들이 컨테이너 밖으로 튀어나왔다. 이런 경우에는 해제(clear)를 해줘야 한다 해제(clear) 하는법 float를 부여했다가 해제를 시작할 요소에 clear 속성을 부여한다 (그러나 사용하지 않을 요소를 구조적으로 만드는 것은 비효율적이다) container에 overflow: hidden => float과 관련이 없다(근본적인 해결 방법이 아니다) 컨테이너에 가상 요소 선택자 ::after를 이용 (가상 요소 선택자는 content가 필수로 있어야 한다) clearfix가 부여된 컨테이너에는 float을 사용하는 요소들만 있어야 한다 Position position은 body 기준으로 위치한다 static을 제..
history API 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다 pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트할 수 있다 pushState : 세션 히스토리에 새 url 상태를 쌓는다 replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다 이전 예제에서 hashbang으로 했던 url을 아래처럼 바꿔줄 수 있다 / => HomePage /list => ListPage /detail/1 => DetailPage 일반 url 형식을 따르기 때문에..
