끄적이는 공간

퍼블리셔 Note/HTML 7

[HTML5] 모바일 친화적인 달력 UI를 제공하는 <input type="date">

input type="date"? 이전에 개발자들은 웹 애플리케이션에서 달력을 구현하기 위해서 JQuery UI의 Datepicker 플러그인을 사용해야만 했다. Datepicker | jQuery UI Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b jqueryui.com 그러나, 2022년 6월 ..

[HTML] 유튜브 썸네일 이미지 가져오기

유튜브 url 기반으로 정해진 규칙에 따라 매핑 해주면 해당 영상에 등록된 다양한 사이즈의 썸네일을 이미지로 따로 서버에 저장해 놓지 않아도 쉽게 가져 올 수 있음. 등록된 이미지를 가져오는 규칙 "https://img.youtube.com/vi/[유튜브 영상 ID값]/[이미지형식].jpg" 위의 유튜브 영상 URL은 "https://www.youtube.com/embed/lS9avGTDWZM" 이며 위의 [유튜브 영상 ID]값은 IS9acGTDWZM 이 된다. 그리고 [이미지형식]은 아래와 같이 지정되어있음으로 필요한 해상도에 따라 사용하면 된다. 120×90: default.jpg 320×180: mqdefault.jpg 480×360: hqdefault.jpg 640×480: sddefault.jp..

[meta] 모바일 크롬 기반 브라우저에서 url창 영역 색상 바꿔주는 <mete>

어떠한 사이트를 보는 중 크롬 기반 브라우저에서 위와 같이 url영역의 색상이 변경되는 부분을 가끔 목격 할 때가 있다. 실무 도중 기획자분과 디자이너 분께서 가능한지 요청하여 방법을 찾아보았고 실제로 적용해보니 특정한 컨셉의 랜딩페이지의 경우 url영역의 색상까지 컨셉에 맞춰 변경 할 수 있다면 시각적으로 유용하게 쓸 수 있을 것 으로 보였다. css,자바스크립트로는 제어가 불가능한 영역이지만 태그와 그 속성값을 이용하면 한줄만으로 위의 영역을 간단하게 색상 변경이 가능하다. 태그 안에 name속성의 값이 theme-color 인 태그에 content속성에 원하는 색상코드 값을 넣으면 위의 이미지와 같이 크롬 기반 브라우저에 한정하여 간단하게 url 영역의 색상을 변경 할 수 있다.

[HTML] 특정 요소의 범위를 표현할 때 쓰는 'meter'

'' 는 게이지 내에서 특정 값이 어느정도인지 표현 할 때 사용한다. ex) 컴퓨터 디스크 사용량, 전체인구중 코로나 바이러스 확진자 비율 등 ''는 위와 같이 최대 값 안에서 비율이 어느정도인지 표현할때 사용해야하며, 어떠한 진행률을 나타낼때는 ''가 아닌 반드시 '' 를 사용해야한다. [ 진행률을 나타내는 '' ] [HTML5]작업의 진행률 표시줄을 나타내는 태그 ' ' 태그는 작업의 진행률 표시줄을 제공해주는 태그다. 태그,태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 ' ' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다. 는 작 joroki.tistory.com [사용속성] 속성명 속성값 설명 form form id 요소가 포함될 하나 이상의 요소를 명시 high ..

[HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress'

'' 태그는 작업의 진행률 표시줄을 제공해주는 태그다. 태그,태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 '' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다. 는 작업의 진행률를 나타낼때 사용하는 동적 데이터이며 현재 점수나 범위를 나타내는 정적 데이터 일때는 사용하기 적합하지가 않다. (이와같은 경우는 '' 태그 사용) [사용 속성] 속성명 설명 max 총 작업률을 기재 하는 속성 (숫자) value 현재까지의 잡업률을 기재하는 속성(숫자) [추가내용] 다운로드 중.. 진행률 : 25%​ 아래와 같은 방식으로 css 커스터 마이징도 가능하다. /* progress bar 총진행률(뒷면) 커스터마이징 */ progress[value]::-webkit-progress-ba..

[HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details'

'' 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시할 때 사용하며 별도의 스크립트 작업없이도 사용자로 하여금 동적인 동작을 할 수있게끔 해주는 유용한 태그이다. 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있다. 이러한 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않는다.. 태그의 자식으로서 반드시 같이 사용해되어야 하는 '' 태그는 요소에서 화면에 보일 제목을 명시 할 때 사용한다. 이 제목을 마우스로 클릭함으로써 요소를 보이도록 할 수도 있고 숨길 수도 있습니다. 예제) 오늘의 환율 달러($) : 1..

[HTML] IOS기기에서 'video' 태그 전체 화면으로 전환되는 이슈개선

태그에 autoplay,loop,muted등의 속성값을 주는건 흔한 일인데 어느순간부터 ios 비디오 정책으로 인해 아이폰등의 디바이스에서 해당 속성값을 사용할 경우 비디오가 전체화면으로 재생된다. 이 부분은 사용자들로 하여금 굉장히 좋지않은 사용성을 제공함으로 반드시 개선해줘야하는 부분이다. 아주 간단하게 개선할 수 있다. 기존에 자주 쓰는 속성에 [playsinline] 속성을 추가했다. 위의 속성을 추가하는 것만으로 IOS에서 전체화면으로 자동재생을 막고 정상적으로 작동할 수 있는 것을 확인 할 수 있다.