Cozy Coding

자주 사용하는 HTML 태그 5가지 정리

자주 사용하는 HTML 태그 5가지 정리
Cozy CodingPosted On Aug 21, 20243 min read

웹 개발의 기초인 HTML입니다. 대부분의 개발자들은 <div>, <p>, 그리고 <img> 같은 기본 요소에 익숙하지만,

HTML은 웹 페이지의 기능과 효율성을 크게 향상시킬 수 있는 다양한 고급 기능을 제공합니다. 안타깝게도, 이러한 강력한 기능들 중 많은 부분이 제대로 활용되고 있지 않습니다. 이 글에서는 아마도 사용하지 않지만 꼭 사용해야 할 상위 5가지 HTML 기능을 살펴보겠습니다.

Top5HTMLFeaturesYoureNotUsingButShouldBe

1. 대화 요소

이 요소는 JavaScript 라이브러리에 의존하지 않고 모달 대화상자를 만들 수 있는 네이티브 HTML 요소입니다. 알림, 확인 대화상자 또는 사용자 정의 팝업에 사용할 수 있으며 모달에 대한 더 의미론적인 접근 방식을 제공합니다.

다음은 예시입니다:

<dialog id="myDialog">
    <p>이것은 모달 대화상자입니다</p>
    <button onclick="document.getElementById('myDialog').close()">닫기</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">대화상자 열기</button>

위 요소를 사용하면 모달의 열고 닫음을 쉽게 제어할 수 있으며, 접근성이 뛰어나며 스타일링도 쉽습니다.

2. 이미지 요소

이 요소는 다양한 화면 크기와 해상도에 적응하는 반응형 이미지를 생성하는 데 필수적입니다. 여러 이미지 소스를 지정하고 디바이스 기능에 따라 최적의 이미지를 선택할 수 있습니다.

여기 예시입니다:

Responsive Image

이 요소는 각 장치에 가장 적합한 이미지를 제공하여 로드 시간을 단축하고 사용자 경험을 향상시킵니다.

3. 결과 요소

이 요소는 계산 결과 또는 사용자 상호 작용의 결과를 표시하는 데 사용됩니다. 사용자 입력에 기반한 실시간 피드백을 표시하고 싶은 양식에서 특히 유용합니다.

여기 예시가 있어요:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" value="0"> +
    <input type="number" id="b" value="0">
    = <output name="result" for="a b">0</output>
</form>

이 요소는 복잡한 JavaScript를 필요로하지 않고 대화식 및 동적 양식을 만드는 간단한 방법입니다.

4. Data Element

해당 요소는 기계가 읽을 수 있는 값을 사람이 읽을 수 있는 값을 연결합니다. 제품 ID를 표시 이름에 연결하는 등 콘텐츠에 의미를 부여하는 데 유용합니다.

예를 들어보겠습니다:

<p>가격: <data value="49.99">$49.99</data></p>

검색 엔진과 웹 크롤러는 이 추가 정보를 사용하여 콘텐츠를 더 잘 이해할 수 있으며, 이는 SEO 성능을 향상시킬 수 있습니다.

5. 세부 정보 요소와 요약 요소

세부 정보 요소와 요약 요소는 확장 가능한 콘텐츠 섹션을 만들기 위해 함께 작동합니다. 이 기능은 FAQ, 접는 콘텐츠 또는 정보를 숨기고 나타내고 싶은 경우에 이상적입니다.

다음은 예시입니다:

<details>
    <summary>더 많은 정보</summary>
    <p>'더 많은 정보'를 클릭하면 나타나는 숨겨진 콘텐츠입니다.</p>
</details>

이러한 요소들은 한 번에 표시되는 정보량을 줄이고 페이지를 깨끗하고 가독성 좋게 유지하여 더 나은 사용자 경험을 제공하므로 구현이 쉽습니다.

결론

HTML은 크게 발전했으며, 이러한 기능들은 얼마나 강력하고 유연해졌는지 보여줍니다. 프로젝트에 이러한 잘 알려지지 않은 요소를 통합함으로써 외부 라이브러리나 프레임워크에 대한 의존을 줄이고 반응성이 좋고 동적이며 사용자 친화적인 웹 페이지를 만들 수 있습니다. 그래서 이 HTML 기능들을 한번 시도해보세요. 개발 프로세스를 얼마나 향상시킬 수 있는지 놀라실 겁니다.

오늘은 여기까지입니다.

그리고 여기서 초심자들을 돕기 위해 내가 좋아하는 웹 개발 리소스를 소개할게!

나와 연락하기:@ LinkedIn 그리고 내 포트폴리오를 확인해보세요.

내 YouTube 채널을 탐험해보세요! 유용하다고 느꼈으면 좋아요를 눌러주세요 ⭐️

내 GitHub 프로젝트에 별을 주세요 ⭐️

29512번 감사합니다! 🤗