사용자 인터페이스
사용자가 요소의 크기나 아웃라인 등을 마음대로 변경 가능
사용자 인터페이스를 위해 제공되는 속성
resize
사용자가 해당 요소의 높이나 너비를 변경
resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들 생성
핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절 가능
outline-offset
해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가
아웃라인(outline)과 테두리(border)의 차이
- 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인
- 아웃라인은 HTML 요소의 크기에 포함되지 않음
- 아웃라인은 사각형이 아닐 수도 있음
box-sizing
css 테두리 영역의 크기 결정
box-box
지정한 CSS width 및 height를 컨텐츠 영역에만 적용
border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있음
레이아웃 설정시 테두리, 패딩 등의 크기를 신경쓰지 않을 수 있음
대신 컨텐츠 영역이 자동으로 초기 설정값보다 padding, border, margin 크기 만큼 줄어서 적게 설정
box-sizing:box-box;- 전체 크기 = border-box = content + border + padding + margin
- 컨텐츠 크기 = border-box – border – padding – margin
content-box
지정한 CSS width 및 height를 전체 영역에 적용
border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있음
기본 설정 값
지정한 width, height보다 태그 영역이 더 커질 수 있음
box-sizing:content-box;- 전체 크기 = content-box + border + padding + margin
- 컨텐츠 크기 = content-box
nav-index
해당 요소에 대한 순차적인 탐색 순서를 설정
nav-left
화살표 왼쪽 방향키를 누를 때 어디를 탐색할지 설정
nav-right
화살표 오른쪽 방향키를 누를 때 어디를 탐색할지 설정
nav-up
화살표 위쪽 방향키를 누를 때 어디를 탐색할지 설정
nav-down
화살표 아래쪽 방향키를 누를 때 어디를 탐색할지 설정
https://www.tcpschool.com/css/css3_expand_ui
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/
