미묘한 시맨틱 요소 이해
Source: Dev.to
Emphasis vs Idiomatic Text
관용구 텍스트 요소(“)는 주변 prose와 구분되지만 중요성을 나타내지는 않는 텍스트에 사용됩니다. 다음과 같은 경우에 적합합니다:
- 대체 목소리나 분위기
- 외국어 관용구
- 기술 용어
- 생각이나 내부 대화
HTML 사양 예시에서는 프랑스어 구절을 관용구로 표시합니다:
There is a certain *je ne sais quoi* in the air.lang 속성은 포함된 텍스트의 언어를 나타냅니다. “ 요소는 텍스트가 다르다는 것을 알릴 뿐, 중요함을 의미하지는 않습니다.
중요성을 전달해야 할 경우, 강조 요소(“)를 사용합니다. 예시:
Never give up on *your* dreams.이탤릭이 순수히 장식용이고 의미적 의미를 추가하지 않을 때는 또는 대신 CSS로 시각적 스타일을 적용하세요.
Strong vs Bold
strong 요소()는 내용이 상당한 중요성이나 긴급성을 가지고 있음을 전달합니다. 이는 현재형 **bold** 요소()에 대한 의미론적 대안입니다.
올바른 사용 예시:
**Warning:** This product may cause allergic reactions.보조 기술과 검색 엔진이 텍스트를 중요하게 인식하도록 하려면 을 사용합니다. 의미론적 강조가 의도되지 않은 순수 시각적 스타일링일 경우에만 을 사용하세요.
Description Lists
Description lists(“)는 용어와 정의 쌍, 혹은 키‑값 정보를 제시하기에 이상적입니다. 구성 요소는 다음과 같습니다:
- “ – 용어 (정의 제목)
- “ – 설명 (정의 데이터)
전형적인 사용 사례로는 제품 사양, FAQ, 연락처 정보, 메타데이터 등이 있습니다.
예시:
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JS
JavaScript관련 정보를 라벨과 해당 값으로 표현할 수 있을 때마다, description list는 명확하고 의미론적인 구조를 제공합니다.
이 강의들은 freeCodeCamp Responsive Web Design 인증의 Semantic HTML 모듈의 일부이며, 의미, 접근성 및 유지 보수를 위해 적절한 의미론적 요소를 선택하는 방법을 보여줍니다.