choeun

label 의 위치는 크게 상관 없으나,
ID 속성과 FOR 속성을 사용해서 연동해야합니다.
&nbsp;
DIV 등이 중간에 들어가도 괜찮습니다.

input 과 label 의 작성 순서

네 맞습니다!
많은 분들이 필수라고 생각해서 무의미한 href 속성을 사용하기도 하는데,
A 요소가 링크로서 활용되지 않을 때는 href 속성을 생략 가능하다는 의미입니다.

a 링크의 href 속성

dialog 미지원 브라우저를 위한 fallback 관련 질문입니다

네. Section 안에서 Section을 사용하셔도 됩니다.
구역을 명확하게 의미적으로 분리 가능한 경우에는 Section 요소를, 단순히 CSS로 레이아웃을 잡기 위해서 분리하는 경우에는 DIV 요소를 사용하시면 되지만, 구획을 나눴다는 것 자체가 보통 의미적으로 분리하는 행위에 가까워서 대부분의 경우 Section 요소를 사용하시면 해결될 거라 생각됩니다.

section 내에서 여러요소를 그룹핑해야 되는 상황에 대해 질문드립니다.

에디터에서 포매팅이 제 의도대로 되지 않는군요 ㅠ

Polyfill 코드는 Chrome에서 공식으로 제공하는 게 있어, 해당 링크를 전달드립니다.
https://github.com/GoogleChrome/dialog-polyfill
코드 예제는 다음과 같습니다:
<h3 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 1.25em; font-weight: 600; line-height: 1.25; color: #c9d1d9; font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #0d1117; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a class="anchor" href="https://github.com/GoogleChrome/dialog-polyfill#backdrop" target="_blank" rel="noopener noreferrer" aria-hidden="true"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a></h3>
<div class="highlight highlight-text-html-basic" style="box-sizing: border-box; margin-bottom: 16px; color: #c9d1d9; font-family: -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #0d1117; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<pre style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13.6px; margin-top: 0px; margin-bottom: 0px; overflow-wrap: normal; padding: 16px; overflow: auto; line-height: 1.45; background-color: var(--color-bg-tertiary); border-radius: 6px; word-break: normal;"><head>
 <link rel="stylesheet" type="text/css" href="dist/dialog-polyfill.css" />
</head>
<body>
 <dialog>
 I'm a dialog!
 <form method="dialog">
 <input type="submit" value="Close" />
 </form>
 </dialog>
 <script src="dist/dialog-polyfill.js"></script>
 <script>
 var dialog = document.querySelector('dialog');
 dialogPolyfill.registerDialog(dialog);
 // Now dialog always acts like a native <dialog>.
 dialog.showModal();
 </script>
</body></pre>
</div>

안녕하세요.
React 에서 말하는 재사용 가능한 컴포넌트 개념과 HTML을 올바르게 작성하는 건 조금 다르긴 하지만, 그럼에도 재사용 가능한 컴포넌트에서도 '어떤 요소를 사용하는가'에 따라서 재사용성이 달라지기 때문에 연관이 있는 영역이라고 볼 수도 있습니다.
예를 들어 링크와 관련된 베이스 컴포넌트를 작성하고 싶다면 A 요소를 사용한다거나, 자바스크립트를 이용해 동작하는 베이스 컴포넌트 (특히 버튼류)를 만들 때에는 BUTTON 요소를 사용하는 등이겠습니다.

React의 컴포넌트 개발과 시맨틱 구조 작성의 연관성에 대해 궁금한 점이 있어 질문드립니다.

의미에 맞다면 함께 사용해도 괜찮습니다.
주로 행에서 '셀 제목'을 나타내기 위해서 th 요소를 사용합니다.

tr 요소 내에 th, td 혼용 관련 질문입니다

안녕하세요.
추가하고 안보이게 합니다. 그런 CSS 작업을 Blind CSS 라고 부르기도 하고, Content hiding 기법이라고도 합니다.
리소스: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

감사합니다.

시맨틱 구조 관련해서 질문있습니다.

안녕하세요. 말씀 주신 이점 외에 추가로 기대해볼만한 이점은 없습니다.
2번 이점에 대해 추가로 공유드리자면, JavaScript로 유저가 제작한 컴포넌트가 아니라 브라우저에서 지원하는 컴포넌트이기 때문에, 별도로 접근성 대응 작업을 하지 않아도 접근성을 지원한다는 이점이 있습니다.
고맙습니다.

choeun

Posts