JayGo 개발 연습장

UI 컴포넌트 중 Date Picker를 구현하면서 삽질한 이런저런 내용을 기록해 둔다.구현 요구사항구현하고 싶었던 Date Picker는 이런 식이었다.처음엔 input[type='date']로 설정하면 쉽게 구현할 수 있을 거라고 생각했다. 그런데, 막상 구현하다 보니 구현에 있어 몇 가지 허들이 있었다.input[type='date']로 설정하면 input 텍스트 영역(날짜를 직접 입력하는 영역)에 '연도. 월. 일'이 기본 텍스트로 들어가 있었다. 그래서, placeholder로 원하는 텍스트를 넣어주는 게 어려웠다.브라우저에서 기본으로 제공하는 Date Picker Indicator는 원하는 모양으로 커스텀이 어려웠다.그리고, 아래로 떨어지는 Date Picker는 Date Picker Indi..

태그label 태그는 form의 다양한 요소들에 대한 부가적인 정보를 제공해주는 태그이다. 본래의 목적은 웹 접근성 향상으로, 예를 들어 이라는 인풋 요소가 하나 있을때 해당 요소를 해당 인풋 요소를 설명해주는 텍스트와 함께 label 태그로 감싸주면 스크린 리더기가 해당 input 창이 어떤 역할을 해주는 창인지를 좀 더 잘 인식하고 설명해줄 수 있다. 이메일을 입력해 주세요!시각 장애가 있는 분들이나, 화면을 눈으로 보고 사용하기 어려운 분들은 웹 사용을 위해 스크린 리더기와 같은 도구들에 의존하게 된다. 그런데, 스크린 리더기 입장에서는 input창의 위치만으로 해당 인터랙션 요소가 어떤 의미를 갖는지 파악하는 데 한계가 있을 것이다. 그렇기 때문에, 웹 접근성 측면에서 사용자와의 상호작용을 ..

form 태그에 이는 여러 기능들을 찾아보면서 사용해 봤다. 사용하면서 유용하다고 생각하게 된 몇 가지 기능들이 있어 내용 정리해 둔다.reset()로그인, 회원가입처럼 하나의 form 태그 안에 여러 input 창들이 있을 경우 submit 이벤트 후 창을 초기화하기 위해 모든 input 창들을 하나씩 선택해 ''으로 초기화해줘야 한다(form 태그의 기본 동작은 input에 들어온 값들을 바로 비워주는 것이지만, 로직 처리를 위해 e.preventDefault()를 사용한 상황을 가정한다). submit 위의 예제에서 form 태그가 속성으로 가지고 있는 ..

반응형 페이지란?뷰포트(Viewport) 사이즈에 따라 정적인 웹 페이지의 요소가 잘 보이지 않거나, 텍스트의 줄 바꿈이 깨지는 경우가 있다. 때론 디바이스에 따라 요소들의 배치, 사이즈, 구성 등을 유연하게 조정해줘야 하는 경우도 있다. 즉, 사용자가 웹 페이지에 접근한 디바이스의 종류나 뷰포트 사이즈(웹 애플리케이션이 구동되고 있는 프로그램의 사이즈) 등 환경에 따라 UI가 유동적으로 바뀌는 게 필요할 수 있는 셈이다.이러한 필요로 인해 등장한 것이 반응형 페이지(Responsive Page)이다. 반응형 페이지는 사용자가 웹 애플리케이션을 사용하는 환경을 고려해서 HTML과 CSS 요소가 뷰포트 사이즈 변동에 따라 유기적으로 변동된다.반응형 페이지와 함께 자주 언급되는 개념으로 '적응형 페이지(Ad..