HTML 언어는 웹 페이지 상에서 시각적인 엘리먼트를 렌더링 하는 여러가지 시맨틱 태그 (semantic tags)를 제공합니다. XML에서 자주 사용되는 속성 (attributes)과 같이 HTML도 비슷한 속성들이 있습니다. id, class, style 등과 같은 글로벌 속성은 어떠한 HTML 엘리먼트에도 적용을 할 수 있죠. 게다가 href같은 특수 엘리먼트의 속성도 존재한다는 것을 웹 개발자는 알고 있습니다. 모던 웹 기술과 UI/UX의 발전 및 진화에 의해 HTML의 표준에도 새로운 속성들이 쏟아지고 있습니다.
W3C와 협력업체들은 HTML의 기능을 서드파티나 다른 라이브러리가 필요 없이도 모던하고 다기능의 웹 프론트엔드를 개발할 수 있도록 고도화 진행을 하고 있습니다. 어떤 새로운 기능들은 새로운 HTML 태그를 도입하여 선을 보이고 있죠. 어떤 기능은 기존의 태그에 새로운 속성으로 도입을 합니다. 예를 들자면 HTML에 popover라는 새로운 속성을 넣어 자바스크립트 없이도 팝업 창을 띄울 수 있게 되었습니다.
W3C (World Wide Web Consortium) 란? https://namu.wiki/w/W3C
이 포스팅에서는 자바스크립트나 다른 라이브러리를 사용하지 않고 네이티브 HTML 속성만 이용하여 모던하고 다기능을 가진 웹 페이지를 개발하는 방법을 알아보겠습니다.
popover 속성을 이용하여 네이티브 팝업 엘리먼트 개발하기
이전에는 브라우저의 팝업 창을 개발하려면 네이티브 브라우저 윈도우를 이용하여 팝업을 제작하였습니다. 이런 브라우저 윈도우는 개발이 쉽지 않았죠. 그리고 그 후 개발자들은 페이지 내에서 CSS과 다른 라이브러리를 사용하여 팝업을 자체 제작하였습니다.
이제는 자바스크립트를 사용하지 않고 HTML만 이용하여 팝업을 제작할 수 있습니다. 모던 웹 표준에는 빌트인 Popover API가 있습니다.
다음의 예제를 보겠습니다.
위의 예제는 popover라는 속성을 사용하여 간단한 팝업을 개발했습니다. popovertarget이라는 속성의 값은 팝업이 되는 엘리먼트의 id이죠. 게다가 CSS에서 popover의 backdrop의 스타일을 ::backdrop이라는 pseudo-element를 사용하여 지정했습니다.
@starting-style 이라는 CSS를 사용하여 애니메이션도 지정이 가능합니다. 게다가 CSS 스타일로 tooltip도 빌드가 가능합니다. Popover API는 브라우저의 새로운 기능이므로 주의를 하며 적용을 해야합니다.
@starting-style 에 관한 문서 https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style#animating_a_popover
다이얼로그나 페이지상에서 autofocus 속성 사용하기
컴퓨터에는 키보드와 마우스라는 두가지의 메인 입력 방법이 존재합니다. 하지만 어떤 케이스의 엔드유저들은 항상 키보드만 사용하는 경우가 있습니다. 예를 들어 다수의 데이터 입력을 하는 경우에는 마우스와 키보드를 다 이용하는 것보다 키보드만 이용하는 것이 더 효율적이죠. 이를 위해 브라우저에는 키보드로 탭을 내비게이션하거나, 팝업창이나 다이얼로그 박스에서 내비를 할 수 있도록 기능이 마련되어 있습니다.
HTML의 표준에는 autofocus라는 속성으로 페이지나 팝업창이 열릴 시에 바로 그 엘리먼트에 포커스가 되게 하여 주는 기능이 있습니다. 이 기능을 사용하면 효율적인 애플리케이션을 제작할 수 있죠.
아래의 예제 코드는 모달창을 띄울때 autofocus를 이용하여 텍스트 인풋에 첫 포커스를 합니다.
위의 예제 코드는 autofocus 속성을 모달 창을 띄우는 버튼과 모달 창의 두 번째 텍스트 인풋의 두 곳에 사용을 합니다.
그리고 method=”dialog” 라는 속성을 사용하여 자바스크립트 없이도 모달 창을 닫을 수 있도록 하였습니다.
pattern 속성을 이용하여 텍스트 인풋의 유효성을 확인하기
요즘에는 거의 모든 모던 웹앱은 클라이언트에서 데이터의 유효성을 확인힙니다. 개발자들은 사용자 편의성을 위해 자주 리얼타임의 유효성 확인의 코드를 개발하죠. 이제는 자바스크립트를 이용하여 Regex 기반의 리얼타임 데이터 유효성확인을 하지 않아도 됩니다. pattern이라는 HTML 속성을 이용하면 되지요.
다음의 예제에는 JE-333462 같이 제품 identifier를 2자의 영문과 “-” 그리고 6자리 숫자의 패턴을 이용하는 데이터의 유효성을 검증합니다.
pattern 속성을 사용하면 유효하지 않은 데이터는 submit을 못하게 막을 수 있습니다. 하지만 리얼타임으로 유저에게 어떻게 알릴까요? 리얼타임 유효성 검증은 아래와 같이 :valid 나 :invalid 같은 CSS pseudo-class를 사용하면 됩니다.
위의 예제 코드는 CSS를 사용하여 데이터가 유효한지 리얼타임으로 유저에게 시각화하여 전달합니다. 유효하지 않은 데이터는 빨간색의 X로, 유효한 데이터는 녹색의 체크 사인로 보여주죠.
validState 인터페이스를 액세스하여 인풋의 데이터가 유효한지 아래의 코드와 같이 자바스크립트에서도 이용이 가능합니다.
inputmode 속성을 사용하여 모바일 키보드 모드를 제어하기
모바일 디바이스는 터치 스크린 위에 렌더링이 되는 가상 키보드를 사용하죠. 이 가상 키보드는 여러가지 모드가 존재합니다. 예를 들면 숫자만 보이는 넘버 키보드, 그리고 숫자 문자가 다 보이는 풀 키보드 모드등이 존재합니다. 모바일 브라우저는 인풋의 모드에 따라 이런 가상 키보드의 모드를 자동으로 조종합니다. 그러나 개발자도 inputmode라는 속성을 이용하면 조종이 가능하죠.
예를 들어 아래와 같이 유저로 부터 텍스트 인풋에 어떠한 패턴의 OPT PIN을 캡쳐하는 코드가 있습니다.
기본 인풋이므로 모바일 디바이스는 문자와 숫자가 포함된 풀 키보드가 뜨게 됩니다.
다음과 같이 inputmode라는 속성을 사용하여 숫자 키보드를 띄웁니다.
loading 속성을 이용하여 이미지를 브라우저 레벨에서 Lazy Loading 하기
웹 개발자는 SEO (Search Engine Optimization)과 UX를 위해 페이지 로딩 시간을 단축하려고 합니다. 이미지를 Lazy Loading하는 방법은 첫 페이지 로딩 시간을 단축하는데 자주 사용이 되는 방법이죠. Lazy Loading은 다른 라이브러리를 사용하거나 개발자 자신이 직접 Intersection Observer API나 scroll event를 사용하여 코딩을 합니다.
다음의 예제와 같이 img 태그의 loading 속성을 사용하면 브라우저 상에서 자바스크립트나 다른 라이브러리를 사용하지 않고도 lazy loading이 가능하게 됩니다.
현재단계의 HTML 사양에는 lazy loading은 커스터마이징을 할 수 없지만 각 브라우저마다 다른 옵션이 있을 수도 있습니다.
커스텀 data-* 엘리먼트 사용하기
브라우저는 보통 HTML 속성의 이름에 크게 제한을 두지 않습니다, 그러므로 개발자들은 커스텀화된 속성 이름을 사용할 수 있죠. 하지만 일관성이 없는 이름들을 사용하는 것은 HTML 문서 사양에 위반되는 일이므로 지양해야 합니다. HTML 표준에는 개발자들에게 data- 로 시작하는 커스텀 속성을 사용하도록 권장하고 그에 따른 DOM API도 제공하고 있습니다.
아래의 예제 코드는 HTML 엘리먼트에 커스텀 data 속성을 사용합니다.
위의 예제 방법을 사용하면 엘리먼트의 data-로 시작하는 속성의 값은 모두 엘리먼트의 dataset에 존재하게 되므로 camel-case 키를 사용하여 자바스크립트에서 dataset을 파괴하여 커스텀 속성을 액세스 할 수 있습니다.
다음과 같이 CSS에서도 이 속성들을 액세스 할 수 있습니다.
Comments