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

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

State of CSS 2022 - Google I/O 1. Cascade Layers 2. Subgrid Grid lines made available for children and grandchildren. 3. @container (aka Container Queries) (가장 기대하고 있는 기능 중 하나) /* establish a container*/ .day { container-type: inline-size; container-name: calendary-day; } @container calendar-day (max-width: 200px) { .date { display: block; } .date-num { font-size: 2.5rem; display: block; } } Col..

Programming 2022. 5. 30. 11:30

Sass란? => Synthetically Awesome Style Sheet (문법적으로 짱 멋진 스타일 시트) css의 전처리기로서, css 코드의 재활용성을 높일 뿐 아니라 가독성을 높여준다. 덕분에 유지보수를 쉽게 할 수 있게 된다. 컴파일을 통하여 sass/scss 파일이 css 형태로 바뀌게 된다. node-sass 사용 => 빠른 컴파일 속도와, Node.js 환경에서 작업할 때 libsass를 사용할 수 있게 해준다 # NPM 을 통하여 node-sass 글로벌 설치 $ sudo npm install -g node-sass # 컴파일하여 현재 디렉토리에 저장 $ node-sass style.scss -o . # style.scss 파일에 변화가 있을 떄 마다 자동으로 리컴파일 $ node-..

Programming/Concept 2019. 11. 4. 15:02

가상 선택자란? : 지금 문서 내에 존재하지 않는 구조, 즉 문서에 존재하지 않는 요소에 스타일을 부여할 수도 있고 특정 요소의 상태를 미리 추정하여 가상의 클래스로 스타일을 적용시킬 수도 있는 선택자이다. 1) 가상 클래스 : 미리 정의해놓은 상황에 적용이 되도록 약속돼있는 보이지 않는 클래스. 예를 들어 특정한 상황(어떤 글자 위에 마우스 포인터를 놓은 상황)에 해당 컨텐츠의 색깔을 변화시키고 싶은 경우, 기존 방법이라면 javascript 같은 외부 언어를 통해서 함수를 지정해주어야 하는 번거로움이 있었을 것이다. 자식 요소 관련 태그이름:fisrt-child => 해당 태그의 첫 번째 자식 요소 선택 태그이름:last-child => 해당 태그의 마지막 자식 요소 선택 링크 관련 a:link =>..

Programming/Concept 2019. 5. 2. 15:44