패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명"
Interactive content
- 사용자와 상호 작용할 수 있는 콘텐츠
- a, audio, button, details, embed, iframe, img, input, label, select, textarea, video
- 입력장치(키보드, 마우스)로 조작 가능
- deisplay: inline | inline-block;
a vs button
- 같은 외형을 지닌 경우라도 a, button 요소를 구별해서 사용
- cursor 명세 정의에서, pointer는 링크를 나타내므로 a 태그에만 pointer를 사용하고 button 태그는 default로 두는 것을 권장
- 실행 결과를 가리킬 수 있는 고유한 URL이 있으면 a요소, 참조할 URL이 없으면 button 요소로 마크업
- a 태그는 링크 위에 마우스를 올리면 웹 브라우저가 상태 표시줄에 목적지 URL을 표시해주지만, button 그렇지 않음
- a 태그는 Context Menu를 이용하면 새 탭에서 링크 열기 기능 사용 가능하지만 버튼 요소는 이 기능을 사용할 수 없음
a 태그
사용 예
- 다른 페이지로 이동할 것이라는 신호 제공
- 탭을 클릭하여 페이지 전체를 갱신하는 경우 (페이지 이동)
- 고유한 URL로 접근하여 특정 콘텐츠를 보는 경우
- 탭을 클릭하여 현재 페이지의 해당 섹션으로 스크롤 하는 경우
=섹션을 항상 참조할 수 있는 URL(해시)가 있는 경우 - 대화상자를 참조하는 경우
* a 요소의 href 값은 dialog 요소의 id(해시 URL)를 참조
<a href="#modal">...
<dialog id="modal">...a target
<a
href="https://external.com/"
target="_blank"
rel="noopener noreferrer"
>- 안전하지 않은 외부 페이지 새 창 링크
- 새 창으로 외부 페이지 B는 자바스크립트 window.opener 객체를 통해 부모 페이지 A의 제어 권한을 획득
→ 사용자는 탭 가로채기(tabnabbing) 공격에 노출됨 - 탭 가로채기 공격을 해결 방법 → 링크에 rel 속성 추가
- noopener 값은 window.opener 객체를 제거
- noreferrer 값은 window.opner 제어 불능
- noopener를 지원하지 않는 낡은 브라우저를 위해 noreferrer를 함게 표기
- 최신 브라우저는 target="_blank" 속성을 지정하면, rel="noopener" 속성을 암시적으로 적용하고 있으나, 낡은 브라우저를 위해 rel="noopener noreferrer" 속성을 명시하는 것이 좋음
button 태그
사용 예
- 탭을 클릭하여 특정 섹션의 목록을 갱신하는 경우
- 타겟 URL을 설정할 수 없거나 타겟 URL을 설정하지 않는 게 나은 경우
details vs summary
- 열림 상태일 때 정보를 표시하는 위젯
- details 요소에 open 속성을 넣으면 열린 상태로 표시
- summary 요소는 details 요소의 나머지 부분에 대한 요약, 캡션, 범례를 의미
- 숨겨진 폼(form)을 드러내기도 함
- 브라우저가 기본적으로 'marker' 표시 제공
<details open>
<summary>
::marker
"details 요소란?"
</summary>
<p>열림 상태일 때 정보를 표시하는 위젯</p>
</details>input type
search
<input type="search">- 검색창을 만들 때 사용
- 검색창 우측에 기본적으로 X 버튼 제공
tel
<input type="tel">- 모바일 디바이스에서 input에 초점을 넣으면 전화번호 전용 키패드가 노출됨
→ 사용자가 다른 문자를 실수로 입력할 확률을 낮출 수 있음
url
<input type="url">- 모바일 디바이스에서 input에 초점을 넣으면 URL 입력에 용이한 키패드가 노출됨 (슬래시와 닷컴 키를 포함한 키패드)
<input type="email">- 사용자가 과거 입력했던 이메일을 자동 완성 기능으로 제공
- 모바일 디바이스에서 input에 초점을 넣으면 골뱅이(@) 키패드가 화면에 노출됨
date
<input type="date">- 사용자가 날짜나 시간에 대한 유효한 포맷을 입력할 수 있도록 제공되는 인터페이스
- 브라우저마다 지원하는 인터페이스 모양이 다름
datetime-local
<input type="datetime-local">- 날짜와 시간을 함께 입력할 수 있는 인터페이스
month
<input type="month">
week
<input type="week">
time
<input type="time">
number
<input type="number">
range
<input type="range">- 슬라이드 바 모양의 인터페이스
- 사용자가 조절점을 잡고 범위를 설정 가능
color
<input type="color">
input attr
required
- 사용자가 input을 작성하지 않으면 브라우저에 내장된 에러 또는 도움말 메세지가 표시됨
- 메세지 박스의 모양이나 노출되는 텍스트는 브라우저에 따라 상이
placehoder
- 자리 표시자
- 컨트롤에 초기값이 없을 때 사용자에게 데이터 입력을 지원하고자 제공하는 짧은 힌트나 샘플
- label 대안으로 사용하지 않도록 주의
- 내용 입력 시 배경 텍스트가 사라지므로, 반드시 필요한 설명은 placeholder가 아닌 텍스트로 노출하기를 권장
- 가급적이면 사용하지 않는 것이 사용자 경험과 접근성에 좋음
datalist
- input 태그와 함께 사용
- 다른 콘트롤을 위해 미리 정의된 옵션 세트를 의미
- 숨겨진 상태로 표시됨
- input에 무언가 작성할 때 미리 정해진 데이터들이 있고 그 중 하나를 선택하고자 할 때 사용
- 사용 예 : 사용자가 키워드 검색 시 노출되는 연관 검색 키워드 목록
- input value 값과 datalist id 값은 반드시 동일하게 작성
<label for="local">지역번호:</label>
<input type="text" id="local" list="local-list">
<datalist id="local-list">
<option value="02" label="서울"></option>
<option value="031" label="경기"></option>
</datalist>
Frontend Developer