Phot_o_matic Programming

Form attributes in depth Ensure users enter data 가상 키보드와 관련된 고려사항 포함 inputmode 속성은 안드로이드와 iOS에서 지원된다. type 속성과 대비되는 점은, inputmode 속성은 가상키보드만 변경시키고 요소 그 자체의 행동은 변화시키지 않는다는 것이다. input의 기본 사용자 인터페이스와 유효성 검사 규칙을 유지하면서 가상키보드를 최적화하고 싶다면 inputmode가 좋은 선택지가 될 수 있다. type="number"는 제품의 수량과 같은 증분 필드에만 사용하는 것이 좋다. 브라우저에서 type="number"에 대한 위쪽/아래쪽 화살표를 표시하며, 이는 전화번호, 지불 카드 또는 계좌 번호에 대해 의미가 없기 때문이다. 전화번호는 type..

Programming/TIL 2022. 10. 26. 18:01

Selectors Learn Forms Capturing user input What is your favorite color id 속성은 을 과 연결지어준다. 그럼 name이나 type 속성은 무슨 역할을 하는가? The name attribute 사용자가 컨트롤로 입력하는 데이터를 식별하려면 name 속성을 사용한다. form을 제출할 때, 이 name이 요청에 포함된다. 예를 들어, fruit라는 이름의 input에 사용자가 strawberry라고 입력을 한 경우라면 요청에 이 정보가 fruit=strawberry로 포함될 것이다. Input types fieldset Choose your favorite monster Kraken Sasquatch Mothman autofill Address li..

Programming/TIL 2022. 6. 14. 17:07

Pointer three possible values with the pointer none keyboard coarse touch screen fine mouse or stylus Do button { padding: 0.5em 1em; } @media (pointer: coarse) { button { padding: 1em 2em; } } Don't @media (pointer: fine) { button { padding: 0.25em 0.5em; } } 아무리 마우스나 스타일러스를 사용한다 하더라도, 무작정 크기를 줄이는 것은 좋지 않다. Fitts's law에 따르면 그렇다고 한다. Any pointer 여러 pointer를 지니는 기기가 얼마든지 존재할 수 있다. ex) 트랙패드와 터치스크린..

Programming/TIL 2022. 6. 13. 17:03

Typography Scaling text Don't html { font-size: 2.5vw /*the user won't be able to resize the text. */ } Do html { font-size: calc(0.75rem + 1.5vw); /*the text will be resizable if you mix in a relative unit like em, rem, or ch. */ } But, there's a possibility that the text will get too small on narrow screens and too big on wide screens. Clamping text The clamp() function is like the..

Programming/TIL 2022. 6. 3. 12:21

Layouts for Responsive Design macro with grid or flex properties usually means page layout micro with grid, flex (or container queries) properties usually means contents in container (component) layout container queries will allow contents to be notified of parent's, same as container, current size. container queries main, aside { container-type: inline-size; } .media-illustration { max-widt..

Programming/TIL 2022. 6. 3. 12:20