주요 요점
태그의 기능을 활용하고 확장 가능한 섹션과 함께 활용하면 깔끔한 시각적 레이아웃을 유지하면서 효율적이고 체계적으로 구성된 인터페이스를 제공할 수 있습니다.
하이라이트 도구를 통합하면 중요한 정보를 강조하고 웹사이트 콘텐츠에 포함된 특정 키워드, 구문 또는 검색 결과에 집중할 수 있는 효과적인 방법입니다.
스크린 리더와 같은 보조 기술을 사용하는 개인이 웹 페이지의 날짜와 시간을 더 쉽게 이해할 수 있도록 ‘
실제로 숙련된 웹 개발자는
및 과 같은 기본 HTML 태그에 능숙해야 하며, 이는 웹 페이지 요소의 구성 및 구성에 종합적으로 기여합니다. 그럼에도 불구하고 HTML은 이러한 기본 구성 외에도 광범위한 가능성을 제시한다는 점을 인식하는 것이 중요합니다.
이러한 고유한 태그를 활용하면 웹 애플리케이션의 기능을 강화하여 다른 웹 애플리케이션과 차별화할 수 있습니다.
<디테일> 및 <요약>
다용도
요소를 활용하면 초기 노출 시 독자를 압도할 수 있는 풍부한 데이터나 텍스트에 직면했을 때 매우 유용할 수 있습니다. 이러한 유용한 HTML 구성 요소를 사용하면 복잡한 세부 정보를 전략적으로 구성하고 표시하는 동시에 간결한 요약을 제공하여 이해를 돕고 사용자가 보다 관리하기 쉬운 방식으로 콘텐츠를 탐색할 수 있습니다. 웹 개발자는 이러한 강력한 도구를 활용하여 정보의 흐름을 효과적으로 제어하고 청중의 전반적인 읽기 경험을 향상시킬 수 있습니다.
이러한 요소를 함께 활용하면 사이트 방문자가 클릭하여 추가 정보를 노출할 수 있는 제목 또는 시놉시스가 포함된 확장 가능한 세그먼트를 만들 수 있습니다. 표준 구성에 따라 ‘세부 정보’ 엔티티 내에 포함된 자료는 숨겨져 있으므로 웹페이지의 질서와 정돈된 구성을 유지할 수 있습니다.
제공된 요약을 클릭하기만 하면 방문자는 숨겨진 정보에 즉시 액세스할 수 있습니다.
<details>
<summary>Click to reveal more information</summary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.</p>
</details>
이러한 태그를 활용하면 코드나 불필요한 데이터와 같은 콘텐츠의 상당 부분을 숨길 수 있어 사용자 인터페이스가 더욱 간소화되고 접근성이 높아집니다.또한 이러한 구현은 UI 전문가로서의 숙련도를 연마하는 데 기여할 수 있습니다.
` ` HTML 요소를 활용하면 콘텐츠의 특정 부분을 시각적으로 두드러지게 하여 구분할 수 있습니다. 이 요소를 통합함으로써 최신 웹 브라우저는 일반적으로 포함 된 텍스트의 배경으로 미묘하지만 눈에 띄는 노란색 색조를 지정하여 시청자의 초점을 포착하고 표시된 섹션으로주의를 유도합니다.
이 기능은 웹사이트 콘텐츠의 맥락에서 중요한 용어, 표현 또는 검색 결과를 강조하는 데 매우 유용합니다.
<p>
You can use the <mark>mark</mark> tag to highlight important words or
phrases.
</p>
실제로 HTML 태그를 활용하면 검색된 데이터 내에서 검색어의 인스턴스를 강조하여 사용자가 관련 콘텐츠를 쉽게 식별할 수 있습니다.
어떤 경우에는 정보가 관련성을 잃거나 만료되는 경우가 발생할 수 있지만, 보관상의 이유로 정보를 보존하거나 세월에 따른 변화를 설명하기 위해 보존하고자 할 수 있습니다.
HTML 태그는 “취소선” 효과라고 하는 중앙을 가로지르는 선으로 묶인 텍스트를 표시해야 함을 나타내는 데 사용됩니다. 이 작업은 텍스트가 삭제되었거나 다른 형태의 정보로 대체되었음을 나타냅니다.
<p>
This product is <s>out-of-stock</s> currently available at a discounted
price!
</p>
앞서 언급한 해당 제품의 재고 수준 변경 표시는 해당 텍스트 표현을 가로지르는 선으로 표시되며, 이는 업데이트된 재고 상태 정보를 상징하는 역할을 합니다.
시간
시간 HTML 요소는 콘텐츠 내에서 날짜와 시간에 관한 의미적으로 풍부한 정보를 전달하기 위한 유용한 도구입니다.
‘date-time’ 속성을 활용하면 기계가 읽을 수 있는 날짜 또는 시간 표현을 지정할 수 있으므로 웹 브라우저, 검색 엔진 알고리즘 및 스크린 리더 소프트웨어에서 쉽게 이해할 수 있습니다.
<p>
The Declaration of Independence was signed on
<time datetime="1776-07-04">July 4, 1776</time>.
</p>
`
웹사이트 레이아웃 내에서 다국어 콘텐츠를 처리하는 것은 때때로 복잡할 수 있으며, 특히 개별 구성 요소에 다양한 형식이 필요한 경우 더욱 그렇습니다.
` ` HTML 요소를 활용하는 이 접근 방식은 다양한 언어적 요구에 따라 스타일이나 형식을 지정해야 하는 콘텐츠의 특정 부분을 대상으로 하여 최적의 프레젠테이션과 웹 표준 준수를 가능하게 합니다.
<p>
<bdi>5,000</bdi> people attended the conference.
</p>
태그는 5,000이라는 숫자 값을 포함합니다. 이를 통해 주변 텍스트에 존재하는 언어적 변형이나 문체적 뉘앙스로 인해 그림이 흐트러지는 것을 방지할 수 있습니다.
<루비>, <알티>, <알피>
문자 위나 아래에 후리가나 또는 루비 주석과 같은 발음 단서를 사용하는 동아시아 타이포그래피에서는 ,
<p>
I'm learning
<ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>
요소는 漢(한자) 문자를 포함하고
HTML 요소는 레이아웃의 무결성을 방해할 위험이 있는 긴 단어가 있을 때 유용한 도구로 사용됩니다. 이 기호 마커는 브라우저가 긴 단어에 줄 바꿈을 도입할 수 있는 잠재적 지점을 표시하여 콘텐츠를 더 읽기 쉽고 체계적으로 표시할 수 있도록 합니다.
<p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p>
앞서 언급한 URL에는 wbr 요소가 포함되어 있어 브라우저가 주변 텍스트의 시각적 표시를 유지하면서 필요한 경우 두 줄로 분할할 수 있습니다.
<아래 텍스트> 및 <위 텍스트>
과학 또는 수학 표기법을 사용할 때는 태그를 아래 첨자 텍스트에, 태그를 위 첨자 텍스트에 사용할 수 있으며, 둘 다 공식 문서 및 학술 출판물에서 일반적으로 사용됩니다.
<p>
The chemical formula for water is H<sub>2</sub>O,
and the Pythagorean theorem is
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>
HTML 태그의 활용은 H2O 엔티티 내의 숫자 값 “2”를 위첨자로 표시하는 반면, 태그는 피타고라스 정리에 표시되는 지수를 나타냅니다.
하드 드라이브 사용률, 평점 또는 학업 성적과 같이 사전 정의된 스펙트럼에 속하는 스칼라 값을 표현해야 하는 경우 요소는 시각적으로 매력적이고 쉽게 이해할 수 있는 방식으로 이 정보를 렌더링하는 데 적합한 선택입니다.
‘값’, ‘최소’, ‘최대’ 속성을 사용하여 주어진 측정값의 현재 값, 가능한 최저값, 가능한 최고값을 각각 지정할 수 있습니다.
<meter value="75" min="0" max="100">75%</meter>
요소는 이 예에서 75%에 해당하는 테스트 결과를 나타냅니다.
`
<dialog open>
<p>This is a dialog box!</p>
<button>Close</button>
</dialog>
웹페이지를 로딩하면 열기 속성을 통해 결론 탭과 함께 적절한 구절이 포함된 간단한 인터페이스가 표시됩니다. 보다 정교한 상호 작용을 위해 자바스크립트 스크립트를 사용하여 콘텐츠를 개인화하고 해당 대화 상자의 동작을 조작할 수 있습니다.
optgroup HTML 태그를 활용하여 선택 드롭다운 메뉴 내에서 관련 선택 항목을 정렬합니다. 이렇게 하면 선택 항목을 쉽게 구성하고 분류할 수 있어 사용자 탐색 및 선택 경험이 향상됩니다.
드롭다운 메뉴를 활용하면 시각적으로 구분되는 그룹 또는 카테고리를 생성하여 옵션을 쉽게 구성할 수 있으므로 사용자 경험과 탐색 효율성이 향상됩니다.
`
요소는 특정 그룹 내에서 사용 가능한 다양한 선택 사항을 나타내는 하나 또는 여러 개의
해당 개인은 화해할 수 없어 보이는 요소들을 조정하고 관련된 모든 당사자를 만족시키는 공평한 해결책에 도달하기 위한 지속적인 노력에서 알 수 있듯이 간단한 해결책을 찾지 못하는 난처한 곤경에 처해 있습니다.
<select>
<optgroup label="Asia">
<option value="kr">South Korea</option>
</optgroup>
<optgroup label="Europe">
<option value="de">Germany</option>
</optgroup>
</select>
아시아 및 유럽. 각 카테고리 내에는 해당 지역 내 다양한 국가에 할당된 태그가 있습니다.
웹 개발 숙련도 향상
저평가된 HTML 태그를 숙달하면 웹 개발 숙련도를 크게 향상시킬 수 있습니다. 널리 알려져 있지는 않지만 특정 상황에 맞는 유용한 기능을 제공합니다.
이러한 숙련도를 자신의 레퍼토리에 통합하면 사용자 참여도를 높이고 웹사이트 접근성을 개선하며 웹 개발 워크플로우를 신속하게 진행할 수 있습니다.처음에는 잘 알지 못했지만 웹 개발자의 경험을 형성하는 데 상당한 영향을 미칩니다.
<details>
<summary>Click to reveal more information</summary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.</p>
</details> <p>
You can use the <mark>mark</mark> tag to highlight important words or
phrases.
</p> <p>
This product is <s>out-of-stock</s> currently available at a discounted
price!
</p> 시간 HTML 요소는 콘텐츠 내에서 날짜와 시간에 관한 의미적으로 풍부한 정보를 전달하기 위한 유용한 도구입니다. <p>
The Declaration of Independence was signed on
<time datetime="1776-07-04">July 4, 1776</time>.
</p> <p>
<bdi>5,000</bdi> people attended the conference.
</p> <p>
I'm learning
<ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p> <p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p> wbr 요소가 포함되어 있어 브라우저가 주변 텍스트의 시각적 표시를 유지하면서 필요한 경우 두 줄로 분할할 수 있습니다. <p>
The chemical formula for water is H<sub>2</sub>O,
and the Pythagorean theorem is
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p> <meter value="75" min="0" max="100">75%</meter> <dialog open>
<p>This is a dialog box!</p>
<button>Close</button>
</dialog> optgroup HTML 태그를 활용하여 선택 드롭다운 메뉴 내에서 관련 선택 항목을 정렬합니다. 이렇게 하면 선택 항목을 쉽게 구성하고 분류할 수 있어 사용자 탐색 및 선택 경험이 향상됩니다.
드롭다운 메뉴를 활용하면 시각적으로 구분되는 그룹 또는 카테고리를 생성하여 옵션을 쉽게 구성할 수 있으므로 사용자 경험과 탐색 효율성이 향상됩니다.
`
요소는 특정 그룹 내에서 사용 가능한 다양한 선택 사항을 나타내는 하나 또는 여러 개의
해당 개인은 화해할 수 없어 보이는 요소들을 조정하고 관련된 모든 당사자를 만족시키는 공평한 해결책에 도달하기 위한 지속적인 노력에서 알 수 있듯이 간단한 해결책을 찾지 못하는 난처한 곤경에 처해 있습니다.
<select>
<optgroup label="Asia">
<option value="kr">South Korea</option>
</optgroup>
<optgroup label="Europe">
<option value="de">Germany</option>
</optgroup>
</select>
아시아 및 유럽. 각 카테고리 내에는 해당 지역 내 다양한 국가에 할당된 태그가 있습니다.
웹 개발 숙련도 향상
저평가된 HTML 태그를 숙달하면 웹 개발 숙련도를 크게 향상시킬 수 있습니다. 널리 알려져 있지는 않지만 특정 상황에 맞는 유용한 기능을 제공합니다.
이러한 숙련도를 자신의 레퍼토리에 통합하면 사용자 참여도를 높이고 웹사이트 접근성을 개선하며 웹 개발 워크플로우를 신속하게 진행할 수 있습니다.처음에는 잘 알지 못했지만 웹 개발자의 경험을 형성하는 데 상당한 영향을 미칩니다.
By 최은지
윈도우(Windows)와 웹 서비스에 대한 전문 지식을 갖춘 노련한 UX 디자이너인 최은지님은 효율적이고 매력적인 디지털 경험을 개발하는 데 탁월한 능력을 발휘합니다. 사용자의 입장에서 생각하며 누구나 쉽게 접근하고 즐길 수 있는 콘텐츠를 개발하는 데 주력하고 있습니다. 사용자 경험을 향상시키기 위해 연구를 거듭하는 은지님은 All Things N 팀의 핵심 구성원으로 활약하고 있습니다.