빠르게 변화하는 웹 세상에서 웹 개발 역량을 향상시키려면 최신 기술과 트렌드를 따라잡을 수 있는 지속 가능하고 혁신적인 접근 방식이 필요합니다. HTML 요소는 웹 페이지의 구조와 디자인을 구성하는 기본 언어이기 때문에 이러한 개발의 가장 중요한 토대 중 하나입니다. 하지만 단순히 기본적인 요소를 사용하는 것만으로는 충분하지 않습니다. 사용자 경험에 매력과 효율성을 더하는 독특하고 혁신적인 HTML 요소를 활용하는 것도 고려해야 합니다.
웹 개발자라면 다음과 같은 일반적인 HTML 요소에 대해 잘 알고 있어야 합니다. 그리고 그리고 웹 페이지의 구조와 내용을 나타내는 언어입니다. 하지만 HTML은 그보다 훨씬 더 많은 것을 제공합니다!
이러한 고유한 요소를 살펴보면 웹 애플리케이션의 기능을 향상시켜 경쟁에서 두각을 나타낼 수 있습니다. 확인해 보세요. 모든 개발자에게 HTML 학습이 필수적인 이유.
로압 스리유에스
1. 그리고
독자가 바로 혼란스러워하지 않았으면 하는 방대한 정보나 콘텐츠가 있다고 상상해 보세요. Elements가 당신을 구해 줄 것입니다. 그리고 !
이러한 요소들은 함께 작동하여 제목이나 요약이 포함된 확장 가능한 섹션을 생성하며, 웹사이트 사용자는 이 섹션을 클릭하여 자세한 내용을 볼 수 있습니다. 기본적으로 요소 내의 콘텐츠는 표시되지 않습니다. 페이지를 깔끔하고 체계적으로 정리하세요.
방문자는 요약을 쉽게 클릭하여 숨겨진 정보에 접근할 수 있습니다.
<세부사항 논의>개요>클릭 에 더 많은 정보를 공개하다개요>p>이것 함유량 기본적으로 숨겨져 있지만 사용자가 클릭하면 나타납니다. 개요.</p> </세부사항 논의>이러한 요소를 사용하면 큰 텍스트, 코드 또는 기타 정보 섹션을 숨겨 깔끔한 디자인을 유지하면서도 사용자 친화적인 환경을 제공할 수 있습니다. 또한 이러한 요소는 다음과 같은 작업에도 도움이 될 수 있습니다. 프런트엔드 디자이너로서의 기술을 향상시키세요.
2.
이 항목을 사용하면 다음을 수행할 수 있습니다. 콘텐츠의 특정 부분을 강조하여 시각적으로 돋보이게 합니다. 요소를 사용할 때 브라우저는 일반적으로 텍스트에 노란색 배경색을 적용하여 독자의 주의를 끌어냅니다.
이 기능은 웹 페이지에서 중요한 키워드, 구문 또는 검색 결과를 강조하고 싶을 때 특히 유용합니다.
<p> 사용할 수 있습니다표>표</표> 태그 에 중요한 단어나 구문을 강조하세요.p>예를 들어, 귀하의 웹사이트에 검색 기능이 있는 경우 다음 요소를 사용할 수 있습니다. 검색 결과에서 검색어와 일치하는 항목을 강조하여 사용자가 관련 정보를 더 쉽게 찾을 수 있도록 합니다.
3.
콘텐츠가 오래되었거나 더 이상 관련성이 없지만, 역사적 목적이나 시간 경과에 따른 변경 사항을 나타내기 위해 여전히 표시하고 싶은 상황을 경험해 본 적이 있나요?
요소를 알아보세요 ! 취소선 텍스트를 나타내며, 요소 내의 모든 내용을 취소선으로 표시합니다.
<p>
이 제품은 <s>품절</s> 현재 할인된 가격으로 구매 가능합니다!
</p>이 예에서 '품절'은 취소선 텍스트로 표시되어 제품의 재고 상태가 변경되었음을 나타냅니다.
4.
콘텐츠의 날짜와 시간에 의미적 의미를 추가하려면 다음 요소를 사용하십시오. 이제 여러분의 손끝에서 이용할 수 있게 될 것입니다.
datetime 속성을 사용하면 날짜 또는 시간의 기계가 읽을 수 있는 버전을 지정할 수 있으며, 이는 브라우저, 검색 엔진, 화면 판독기가 컨텍스트를 이해하는 데 도움이 됩니다.
<p>
독립 선언서는 다음과 같이 서명되었습니다.
<시간날짜 시간="1776년 07월 04일">1776 년 7 월 4 일</시간>.
</p>요소 사용 콘텐츠에 더 많은 구조를 부여하고 화면 판독기를 사용하는 장애인을 포함한 더 광범위한 사용자가 접근할 수 있도록 함으로써 가능합니다.
5.
웹 페이지에서 여러 언어로 된 텍스트를 관리하는 일은 때로는 어려울 수 있습니다. 특히 각 부분에 서로 다른 서식이 필요한 경우 더욱 그렇습니다.
해당 상품이 귀하에게 전달됩니다. 언어 요구 사항의 차이로 인해 브라우저가 다르게 처리해야 하는 텍스트의 일부를 분리하는 데 도움이 됩니다.
<p><BDI>5,000</BDI> 사람들이 컨퍼런스에 참석했습니다.
</p>이 예에서 요소는 래핑됩니다. 숫자 5000을 사용하면 주변 텍스트가 다른 언어로 되어 있거나 다른 서식이 필요하더라도 숫자에 영향을 주지 않습니다.
6. , ,
발음 가이드, 후리가나 또는 기타 주석이 문자 위나 아래에 일반적으로 사용되는 동아시아 국가에서 글을 쓸 경우 요소가 역할을 합니다. 그리고 그리고 이 역할.
<p>
나는 배우고 있어요
<루비>한<rt>칸</rt></루비>워드<rp>(</rp><rt>한자</rt><rp>)</rp>.
</p>이 예에서 요소에는 다음이 포함됩니다. 한자 漢(한자)에는 다음이 포함됩니다. 발음에 kan(칸). 요소를 제공합니다 빨간색 주석을 지원하지 않는 브라우저를 위한 대체 괄호입니다.
7.
서식을 깨뜨릴 수 있는 긴 단어가 있을 때, 이 요소가 도움을 줍니다. 이 요소는 긴 단어에서 줄바꿈(단어 나누기)을 제안하는데, 브라우저가 텍스트를 줄바꿈할 수 있도록 합니다.
다음은 긴 URL의 예입니다: https://www.example.org/ with/a/long/path/and/a?query=string.위 예시에서 긴 URL에는 <a href="http://www.youtube.com/watch?v=gZmfgfp" target="_blank" rel="nofollow"> 요소가 포함되어 있습니다. 이 요소를 통해 브라우저는 필요한 경우 URL을 두 줄로 분할할 수 있으며, 주변 콘텐츠의 레이아웃은 그대로 유지합니다. 다음을 확인해 보세요. 반응형 HTML 이미지 초보자 가이드.
8. 그리고
과학 또는 수학 기호, 화학식 또는 각주의 경우 각각 아래 첨자와 위 첨자로 요소와 를 사용할 수 있습니다.
<p>
물의 화학식은 H입니다<이하>2</이하>오, 그리고 피타고라스의 정리는<저녁을 먹다>2</저녁을 먹다> + b<저녁을 먹다>2</저녁을 먹다> = c<저녁을 먹다>2</저녁을 먹다>.
</p>이 예에서는 요소를 사용하여 H2O의 2를 아래 첨자로 표시하고, 요소는 피타고라스 정리의 지수를 표시합니다.
9.
디스크 사용량, 평점, 시험 점수 등 알려진 범위 내의 수치적 측정값을 표현해야 하나요? 이 요소가 도움이 될 것입니다. .
value, min, max 속성을 사용하면 각각 측정의 현재 값, 최소값, 최대값을 지정할 수 있습니다.
<meter value="75"분="0"최대="100">75%이 예에서 요소는 다음을 나타냅니다. 시험 점수 75%.
10.
대화 상자, 조건부 오버레이 창 또는 모달 팝업 상호 작용을 만들어야 하는 경우 이렇게 하세요. 테마를 사용하실 수 있습니다. 열 수기본적으로 대화 상자를 표시합니다.
<다이얼로그열 수><p>이것은 대화 상자입니다!</p><단추>닫기</단추></다이얼로그>이 예에서는 속성 덕분에 페이지가 로드될 때 단락과 닫기 버튼이 있는 간단한 대화 상자가 나타납니다. 열 수더욱 고급 상호작용을 위해 JavaScript를 사용하여 대화 상자의 내용과 동작을 사용자 지정할 수 있습니다.
11.
아이템 사용 드롭다운 메뉴 항목 내에서 관련 옵션을 그룹화하려면 이를 통해 옵션을 구성하고 분류하여 탐색과 선택을 더 쉽게 할 수 있습니다.
- 태그를 수집하는 컨테이너 요소입니다. 요소 내에서 관련됨 .
- 드롭다운 메뉴 내에서 시각적인 그룹화나 분류를 만들어 옵션을 구성하는 데 도움이 됩니다.
- 태그가 필요합니다 옵션 세트의 이름이나 제목을 지정하는 레이블 속성입니다.
- 요소를 포함할 수 있습니다 그룹 내의 개별적인 선택을 나타내는 하나 이상의 하위 요소입니다.
على سبيل المثال :
<고르다><옵트그룹상표="아시아"><option가치="kr">대한민국</option></옵트그룹><옵트그룹상표="유럽"><option가치="데">독일</option></옵트그룹></고르다>이 예제에서는 드롭다운 목록을 아시아와 유럽의 두 섹션으로 그룹화합니다. 각 그룹에는 해당 지역 내 여러 국가를 나타내는 항목이 포함되어 있습니다.
웹 개발 능력을 향상시키세요
잘 알려지지 않은 HTML 요소를 배우면 웹 개발 실력을 크게 향상시킬 수 있습니다. 널리 알려져 있지는 않지만, 특정 상황에서 유용한 기능을 제공합니다.
이러한 요소들을 여러분의 기술에 추가하면 상호작용성과 접근성이 향상되고 웹 개발 프로세스가 간소화됩니다. 비록 익숙하지 않더라도 웹 개발자로서의 여정에 큰 영향을 미친다는 점을 기억하세요. 지금 바로 확인해 보세요. 이동 중에도 코딩할 수 있습니다: Android용 최고의 HTML 편집 앱.
