What I Learned Today
오전에는 폼 요소(input), 폼 요소(button)에 대해 배웠다.
- form 태그는 사용자 입력을 서버로 전송하기 위한 컨테이너 역할을 한다.
- 반드시 1대1로 대응되는 lable 태그가 필요하다.
- action 속성은 데이터를 전송할 url을 지정한다.
- method 속성은 GET과 POST 방식을 정할 수 있다.
- input 태그는 텍스트를 입력할 수 있는 한줄 글 상자를 만들어주고 type 속성에 어떤 방식을 사용할지 명시해줘야 한다.
- lable 태그는 input 박스를 구분하기 위한 이름표다.
- input 태그의 id 속성과 lable 태그의 for 속성을 이어주면 서로 연결되고 ux가 훨씬 좋아진다.
- placeholder 속성을 사용하여 무엇을 입력해야하는지 알려줄 수 있다.
- button 태그는 클릭 가능한 버튼을 만들어준다.
- submit 속성을 사용하면 버튼을 클릭했을 때 폼 데이터를 서버로 제출할 수 있다.
- reest 속성을 사용하면 폼의 모든 입력값을 초기화한다.
- button 속성은 아무 동작도 하지 않지만 JavaScript와 함께 사용하면 많은 동작을 할 수 있다.
오후에는 폼(select, textarea) 요소와 WAI-ARIA에 대해 배웠다.
- select 태그는 드롭다운 목록을 만들어준다.
- select 태그 안에 option 태그를 사용하면 선택 가능한 항목이 나온다.
- select 태그에 multiple 속성을 사용하면 여러 개의 옵션을 선택할 수 있는 리스트 박스로 바뀐다.
- textarea 태그는 여러 줄의 텍스트를 입력받을 때 사용된다. 일반적으로 긴 텍스트 입력을 받을 때 활용된다.
- WAI-ARIA는 RIA를 위한 접근성 권고안이다.
- 마크업에 역할, 속성, 상태 정보를 추가하여 스크린 리더 및 보조 기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험을 제공하기 위해 생겼다.
- 접근성 API라고도 부른다.
- ARIA의 3가지 핵심 기능
- 역할
- 특정 요소에 역할을 정의하는 것
- 역할을 부여하여 사용자에게 정보를 제공
- 부여된 역할은 동적으로 변경할 수 없음
- 속성과 상태
- 요소가 기본적으로 갖고 있는 특징이나 상황
- 속성과 상태는 aria-? 접두어를 가진다.
- 상태는 요소의 상황을 나타내므로 애플리케이션이 실행중에 자주 바뀌는 반면 속성은 그렇지 않다.
- 역할
- ARIA와 HTML5를 함께 사용하지 말아라
- HTML요소의 기능변경제한
- 키보드 사용 보장
- 레이블 제공
- aria-lable : 직접 정보를 입력해서 사용, aria-labledby : span 요소에 정보를 주고 id값을 가져와서 사용
- dialog 요소와 popover 속성
- dialog 태그는 다른 말로 modal 이라고도 한다.
- 혼자 동작하지는 않고 JavaScript를 사용해 동작하도록 만들 수 있다.
- 스크린 리더와 같은 보조 기술에서 기본적으로 접근성을 지원한다.
- 중요한건 aria-lable 또는 aria-lablel 또는 aria-labelledby 속성을 사용하여 대화 상자의 목적을 명확히 해야한다.
- popover 속성은 툴팁과 비슷한 UI 요소로 추가적인 정보를 제공하거나 사용자와 상호작용할 수 있는 작은 창을 나타내준다.
- details, summary 요소
- details와 summary 태그는 접었다 펼 수 있는 콘텐츠를 제공한다.
- 기본은 closed 로 접혀있지만 details 태그에 open 속성을 넣으면 열려있다.
- summary 태그는 details 요소의 제목을 정의하며 사용자가 클릭 가능하다.
- script 요소
- script 요소는 JavaScript 코드를 문서에 포함하거나 외부 JavaScript 파일을 로드하기 위해 사용한다.
- src 속성에 외부 JavaScript 파일의 경로를 지정한다.
- type 속성은 스크림트의 MIME 타입을 지정한다. 모듈 스크립트를 사용할 경우 type 속성 값에 module을 사용한다.
- script 요소가 head에 배치되면 파싱 전에 스크립트가 로드된다. 따라서 defer 속성을 추가해야 한다.
- script 요소가 body 끝에 배치되면 HTML 문서가 모두 로드된 후 스크립트가 실행된다.
- 유저 인터렉션 속성
- accesskey 속성 : 사용자는 브라우저와 운영체제에 따라 특정 키 조합을 눌러 해당 요소를 활성화할 수 있다.
- tabindex 속성 : 기본 탬 순서에 포함시키거나 요소를 탭 순서에서 제외할 수 있다.
- contenteditable 속성 : 사용자가 웹 페이지의 요소 내용을 직접 편집할 수 있도록 설정하는 속성이다.
The Problem I Faced
script 태그에서 defer 속성을 사용하려면 head에 배치하면 된다고 했는데 defer 속성이 작동하지 않았다.
<script defer>
const button = document.querySelector('.voting-result-button');
const results = document.querySelectorAll('.voting-result');
button.addEventListener("click", () => {
results.forEach(result => {
result.removeAttribute('hidden');
});
});
</script>
What I Tried to Do
ChatGpt에게 달려가 원인을 물어보았다.
How I Solved It
defer를 사용했더라도 JS 코드가 script 태그 안에 있으면 DOM이 로드되기 전에 실행된다고 해서 defer 속성을 지우고 type="module" 속성을 사용했더니 해결되었다.
<script type="module">
const button = document.querySelector('.voting-result-button');
const results = document.querySelectorAll('.voting-result');
button.addEventListener('click', () => {
results.forEach((result) => {
result.removeAttribute('hidden');
});
});
</script>
So
Aha Moments
네이버는 input에서 placeholder를 사용하지 않고 lable 태그를 CSS로 placeholder의 역할까지 하게 만들었는데 똑똑한것같다.
개발버전과 배포버전은 다르다. 개발버전은 나와 팀들이 보기 좋도록 만들고 배포버전은 사용자가 쓰기 좋도록 최적화 시켜야 한다.
오류 정정 수단이 필요하다. WCAG을 따라야한다.
aria-lable : 직접 정보를 입력해서 사용, aria-labledby : span 요소에 정보를 주고 id값을 가져와서 사용
반응형
