vh, vw
vh는 CSS의 상대적인 단위 중 하나로, "뷰포트 높이(viewport height)"를 나타냅니다.
(vw= viewport width)
뷰포트(viewport)란 웹 브라우저에서 현재 보이는 영역을 말합니다. 예를 들어, 브라우저 창의 크기를 조정하면 뷰포트의 크기도 조정됩니다.
vh 단위를 사용하면 뷰포트 높이의 백분율 값을 지정할 수 있습니다. 예를 들어, height: 50vh;는 현재 뷰포트의 높이의 50%로 요소의 높이를 지정합니다.
스크롤의 영역은 생각안한다는 부분이 단점이 된다.
width: auto;
width: auto;는 CSS의 속성 중 하나로, 요소의 너비를 자동으로 설정하도록 지정합니다.
일반적으로 width 속성을 사용하면 요소의 너비를 고정값으로 지정할 수 있습니다. 그러나 auto 값을 사용하면 요소의 너비가 자동으로 설정되어 해당 요소의 내용에 따라 자동으로 조정됩니다.
:first-child
:first-child는 CSS의 가상 클래스 중 하나로, 선택한 요소가 그 부모 요소의 첫 번째 자식 요소인지 여부를 나타내는 데 사용됩니다.
calc()
calc() 함수를 사용하는 이유는 다양한 산술 연산을 수행할 수 있기 때문입니다. 예를 들어, calc(50% - 10px)은 요소를 가로 축에서 가운데에 위치시키되 왼쪽으로 10px 이동시키는 것을 의미합니다.
Rem vs em vs px
px: 절대적
rem,em: 상대적
화면 해상도가 늘어나고 줄어들때 상대적일때(em,rem) 깨지지 않음
tabindex
키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML의 속성,
포커스의 순서를 부여하는 방식은 tabindex 값에 양의 정수를 넣어 주면 됩니다.
어떤 HTML 요소에 tabindex=”1”을 주었다면 해당 웹 페이지 상에서 Tab 키를 눌렀을 때 tabindex=”1”이 부여된 요소가 가장 먼저 포커스 됩니다.
tabindex=”0”은 Tab키를 눌렀을 때 포커스를 받을 수 없는 요소
-1은 기본적으로 Tab키를 눌렀을 때 포커스를 받을 수 있는 폼 요소나 링크 요소를 강제로 포커스를 받지 못하도록 하는 값
