지금 알아야 할 HTML 속성 7가지!

웹 개발자라면 HTML을 확실히 사용하고 있을 것입니다! HTML 속성을 많이 사용하고 있지만 오늘은 몇 가지 새로운 소식을 배우게 될 것입니다!

bdo

HTML 요소는 텍스트의 현재 방향을 재정의하므로 내부의 텍스트가 다른 방향으로 렌더링됩니다! dir 옵션을 사용하여 이 방향을 나타낼 수 있습니다.

ltr -> 텍스트가 왼쪽에서 오른쪽 방향으로 이동해야 함을 나타냅니다

.

rtl -> 텍스트가 오른쪽에서 왼쪽 방향으로 이동해야 함을 나타냅니다.

<p>
    <bdo dir="ltr">This text will go left to right.</bdo>
</p>
<p>
    <bdo dir="rtl">This text will go right to left.</bdo>
</p>

kbd

사용자에게 바로 가기를 표시해야 하는 경우 kbd ! 이것은 키보드로부터의 텍스트 사용자 입력을 나타내는 인라인 텍스트의 범위를 나타냅니다.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render a browser page.</p>

세부

HTML 요소는 위젯이 "열림"상태로 전환될 때만 정보가 표시되는 공개 위젯을 생성합니다. 요소를 사용하여 요약 또는 레이블을 제공해야 합니다.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

내용편집 가능

contenteditable 속성은 요소의 내용이 편집 가능한지 여부를 지정합니다!

<p contenteditable="true">This is an editable paragraph.</p>

약어

<abbr> 태그는 "HTML", "CSS"와 같은 약어 또는 두문자어를 정의하고 이 태그를 가리키면 전체 제목을 표시합니다.

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

번역하다

이 콘텐츠를 번역해야 하는지 여부를 HTML에 표시합니다(예: Google 번역 사용).

<p translate="no">CodeOz</p>

색상 선택기

예, 이제 막 배우면 색상 선택기를 쉽게 만들 수 있습니다! 👇

<input type="color">

이 글이 마음에 드셨으면 좋겠습니다!

🎁 저를 팔로우하고 MP하시면 제 새책Underrated skills in javascript, make the difference을 무료로 받으실 수 있습니다 😁

또는 그것을 얻으십시오 HERE

🇫🇷🥖 프랑스어 개발자의 경우 내

🎁 MY NEWSLETTER

☕️ 할 수 있어요 SUPPORT MY WORKS 🙏

🏃‍♂️ 👇 팔로우 하시면 됩니다.

🕊 트위터 :

👨‍💻 Github: https://github.com/Code-Oz

그리고 이 글을 🔖 마크할 수 있습니다!