tabindex
: 키보드의 Tap 키를 눌러 이동할 때, 이동 순서를 지정하거나 특적 HTML 요소에 포커스를 가능하게 만들기 위해 사용되는 속성이다.
1. tabindex="0"
: 요소를 기본 순서에 포함시킨다.
포커스 되지 않는 요소를 포커스 가능하게 만든다.
2. tabindex="-1"
: 요소를 탭 순서에서 제외한다.
3. tabindex="1"
: 탭 순서를 우선 지정한다. 숫자가 낮을수록 우선순위가 높다.
tabindex는 접근성과 사용자 경험을 위해 키보드 탐색을 조정하는 중요한 속성이나, 과도하게 사용하면 오히려 혼란을 줄 수 있으니 정말 필요한 경우에만 적절히 사용하는 것을 권장한다고 한다.
box-sizing
: 요소의 크기 계산 기준을 지정하는 CSS 속성
content-box: 요소의 내용(content)으로 크기 계산
border-box: 요소의 내용 + padding + border로 크기 계산
이 개념을 정확히 이번 강의를 통해 처음 알았다,,
왜인지 그동안 크게 쓸 일이 없었기도 한데,, 굉장히 유용한 기능의 개념에 대해서 몰랐다는 것을 반성하기로,,, !!!
@media 에서 max-width를 사용해야 할까? min-width를 사용해야 할까?
반응형 웹을 만드는 요소인 @media 쿼리에서 max-width와 min-width는 서로 다른 목적을 가지고 있습니다. 이 질문에 대한 답은 없으며 개개인의 선호에 따라 사용하면 될 것 같습니다!
min-width(최소 width)가 1000px, 즉 1000px 이상인 경우에 적용되는 코드
즉, 스크린 크기가 1000px 이상일 때 스타일을 적용하고 싶을 때 사용합니다.
@media (min-width: 1000px) {
body {
background: gold;
}
}
max-width(최대 width)가 1000px, 즉 1000px 이하인 경우에 적용되는 코드지요.
즉, 스크린 크기가 1000px 이하일 때 스타일을 적용하고 싶을 때 사용합니다.
@media (max-width: 1000px) {
body {
background: gold;
}
}
저는 보통 max-width를 많이 사용하곤 하는데요!
일반적으로,
- 모바일 우선 접근 방식에서는 min-width를 사용하는 경우가 많습니다. 작은 화면에서부터 시작해 점차 큰 화면에 스타일을 추가하는 방식입니다.
- 데스크탑 우선 접근 방식에서는 max-width를 사용할 수 있습니다. 큰 화면에서 기본 스타일을 적용하고, 작은 화면에서 스타일을 덮어씌우는 방식입니다.