영어공부 그룹 스터디 : 2회차

김진권·2021년 11월 20일
영어 그룹 스터디
0

영어 그룹 스터디

목록 보기
2/4
post-thumbnail

8 Cool HTML Tags You Didn't Know Existed

당신이 몰랐던 멋진 HTML 태그 8가지

A Duda customer recently asked me about semantic HTML tags and this turned on the curious side of my brain.

Duda 고객은 최근에 의미론적 HTML 태그에 대해 질문했고 이것은 내 두뇌의 호기심 많은 부분을 일으켰습니다.

With modern web design and HTML 5, there are a range of semantic HTML tags that help people and/or robots reading your website’s HTML code understand the structure or context of the content on a page.

현대적인 웹 디자인과 HTML 5에는 웹사이트의 HTML 코드를 읽는 사람 및/또는 로봇이 페이지에 있는 콘텐츠의 구조나 컨텍스트를 이해하는 데 도움이 되는 다양한 의미 체계 HTML 태그가 있습니다.

Anyone who’s been around the web is familiar with the classic tags: <p> for paragraph, <table> for a structured table, <h1> - <h6> for heading sizes.

웹을 사용해본 사람이라면 누구나 클래식 태그에 익숙합니다. 단락의 경우 <p>, 구조화된 표의 경우 <table>, 제목 크기의 경우 <h1> - <h6>입니다.

These are the classic semantic tags of HTML. You might even be familiar with a bit more specific tags such as <nav> for navigation, <article> for blog or news articles, <header> and <footer>, etc..

이것은 HTML의 고전적인 의미 태그입니다. 탐색을 위한 <nav>, 블로그 또는 뉴스 기사를 위한 <article>, <header> 및 <footer> 등과 같은 좀 더 구체적인 태그에 익숙할 수도 있습니다.

On its own, semantic HTML is a great tool that makes websites easier to understand and parse. But, this made me curious about all the different HTML tags that exist officially as part of HTML 5 and sent me down a rabbit hole of fun (yes, this is my idea of fun on a Tuesday night). So, I thought I’d share my findings.

그 자체로 시맨틱 HTML은 웹사이트를 더 쉽게 이해하고 분석할 수 있게 해주는 훌륭한 도구입니다. 그러나 이것은 HTML 5의 일부로 공식적으로 존재하는 모든 다른 HTML 태그에 대해 호기심을 갖게 했고 재미있는 토끼굴로 나를 보냈습니다(예, 이것이 화요일 밤의 재미에 대한 제 생각입니다). 그래서 제 연구 결과를 공유할 생각이었습니다.

Here are the eight most interesting HTML5 tags I found:

  • 1️⃣ <del> and <ins>
  • 2️⃣ <abbr> 🚩
  • 3️⃣ <meter>
  • 4️⃣ <progress>
  • 5️⃣ <details> and <summary>
  • 6️⃣ <blockquote> 🚩 & <cite>
  • 7️⃣ <time>
  • 8️⃣ <datalist>

내가 찾은 가장 흥미로운 HTML5 태그 8개는 다음과 같습니다.

Some of the above tags are actually pretty powerful, some are just kind of fun and some can be used for semantic situations. Really, the point here is just to show you there is much more to HTML than meets the eye.

위의 태그 중 일부는 실제로 매우 강력하고, 일부는 그저 재미있고, 일부는 의미론적 상황에 사용할 수 있습니다. 실제로 여기에서 요점은 HTML에 눈에 보이는 것보다 훨씬 더 많은 것이 있음을 보여주기 위한 것입니다.

Let's take a more in-depth look at each one of the HTML tags I've listed above.

위에 나열된 HTML 태그 각각에 대해 좀 더 자세히 살펴보겠습니다.

  • 1️⃣ <del> and <ins>

There is actually a tag for text that is struck-through and another that indicates the replacement text. This comes directly out of the semantic playbook to show that a piece of text should be deleted.

실제로 취소선이 있는 텍스트에 대한 태그와 대체 텍스트를 나타내는 태그가 있습니다. 이것은 텍스트의 일부를 삭제해야 함을 보여주기 위해 의미 체계 플레이북에서 직접 나옵니다.

An example of this is: "Pluto is isn't a planet."

예를 들면 "명왕성은 행성이 아닙니다."입니다.

In HTML, here is how that looks:

HTML의 경우 다음과 같습니다.

<p>Pluto<del>is</del> <ins>isn’t</ins> a planet.</p>

Plutois isn’t a planet.

If you want to be extra fancy, you can even include a datetime attribute on the <ins> tag to show when the new text was added or amended.

좀 더 화려하게 만들고 싶다면 <ins> 태그에 datetime 속성을 포함하여 새 텍스트가 추가되거나 수정된 시기를 표시할 수도 있습니다.

<ins datetime="2015-09-15T22:55:03Z">This is an inserted text.</ins></p>

This is an inserted text.

  • 2️⃣ <abbr>

“abbr” is short for abbreviation! (Would you ever have guessed?) The idea here is that if you use a title (e.g. “Mr.”) or acronym (e.g. “POTUS”), the abbr tag indicates exactly what that abbreviation means.

"abbr"은 약자의 줄임말입니다! (어디까지나 짐작이 가셨나요?) 여기서 아이디어는 제목(예: "Mr.") 또는 약어(예: "POTUS")를 사용하는 경우 약어 태그가 해당 약어의 의미를 정확히 나타냅니다.

<p><abbr title="President of The United States">POTUS</abbr> rode his bicycle into a tree.</p>

POTUS rode his bicycle into a tree.

  • 3️⃣ <meter>

The next two elements in our list are similar, but definitely not the same. Meter is a built-in range to give an indication of good, medium or bad results. This gauge is a nifty tool built into browsers that is normally created using much more custom code and JavaScript.

목록의 다음 두 요소는 비슷하지만 확실히 동일하지는 않습니다. 미터는 좋은 결과, 중간 또는 나쁜 결과를 표시하는 내장 범위입니다. 이 게이지는 일반적으로 훨씬 더 많은 맞춤 코드와 JavaScript를 사용하여 생성되는 브라우저에 내장된 멋진 도구입니다.

<meter min="0" max="100" low="59" high="90" optimum="90" value="50">50%</meter>

50%

  • 4️⃣ <progress>

Both the progress and meter tags display bars on a web page. However, the progress tag is designed to show how far along something is, such as a project or task.

진행률 및 미터 태그는 모두 웹 페이지에 막대를 표시합니다. 그러나 진행률 태그는 프로젝트 또는 작업과 같은 항목이 얼마나 진행되고 있는지를 보여주기 위해 설계되었습니다.

For example, if you wanted to show a project is 70 percent complete, you could use this HTML:

예를 들어 프로젝트가 70% 완료되었음을 보여주고 싶다면 다음 HTML을 사용할 수 있습니다.

<progress id="project" max="100" value="70"> 70% </progress>

70%

And here is what that would look like on the page:

그리고 다음은 페이지에 표시되는 내용입니다.

  • 5️⃣ <details> and <summary>

Did you know HTML has a built-in accordion feature? Most websites that implement some type of accordion rely on JavaScript to implement the ‘open and close’ experience, but this is actually a native feature of HTML5.

HTML에 내장된 펼치는 기능이 있다는 것을 알고 계셨습니까? 일부 유형의 펼치는 기능을 구현하는 대부분의 웹사이트는 '개방 및 닫기' 경험을 구현하기 위해 JavaScript에 의존하지만, 이것은 실제로 HTML5의 기본 기능입니다.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
<details open>
<summary>Item 2</summary>
  Something else. This one defaults to open!
</details>
Details Something small enough to escape casual notice. Item 2 Something else. This one defaults to open!
  • 6️⃣ <blockquote> & <cite>

If you’re including content from a different source, you should absolutely cite that source (yes, just like in college). The blockquote and cite HTML tags are the semantic version of this that indicate the content is from an outside source.

다른 출처의 콘텐츠를 포함하는 경우 해당 출처를 절대적으로 인용해야 합니다(예, 대학에서와 마찬가지로). blockquote 및 cite HTML 태그는 콘텐츠가 외부 소스에서 왔다는 것을 나타내는 의미론적 버전입니다.

<figure>
    <blockquote cite="https://en.wikipedia.org/wiki/Citizenship_in_a_Republic">
        <p>It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better...</p>
    </blockquote>
    <figcaption>--Teddy Roosevelt, <cite>Citizenship in a Republic Speach</cite></figcaption>
</figure>

It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better...

--Teddy Roosevelt, Citizenship in a Republic Speach
  • 7️⃣ <time>

The time element is both semantic and structured data. It tries to tell crawlers and bots what time exactly is being referenced. A perfect example of where this can be used is in the post date of an article, blog post or page.

시간 요소는 의미론적 및 구조화된 데이터입니다. 정확히 참조되는 시간을 크롤러와 봇에 알리려고 시도합니다. 이것이 사용될 수 있는 완벽한 예는 기사, 블로그 포스트 또는 페이지의 게시 날짜입니다.

<p>Posted: <time datetime="2020-07-07">July 7th</time></p>

Posted: July 7th

Now, this element does not have a special display and will simply look like all the text around it; but, it provides much more context to any computer or person reading it!

이제 이 요소는 특별한 디스플레이가 없으며 단순히 주변의 모든 텍스트처럼 보일 것입니다. 하지만 컴퓨터나 그것을 읽는 사람에게 훨씬 더 많은 컨텍스트를 제공합니다!

  • 8️⃣ <datalist>

The datalist tag is one I really wish more developers knew about. Often, developers will use complex JavaScript libraries to implement this exact same functionality, even though it already exists in HTML!

데이터 목록 태그는 더 많은 개발자가 알았으면 하는 태그입니다. 종종 개발자는 복잡한 JavaScript 라이브러리를 사용하여 이와 똑같은 기능을 구현합니다. 비록 이미 HTML에 존재하지만!

A datalist is an advanced drop-down to select something in a form. The nice thing is that it works as both a search and a drop-down.

데이터 목록은 양식에서 무엇인가를 선택하기 위한 고급 드롭다운입니다. 좋은 점은 검색 및 드롭다운으로 작동한다는 것입니다.

<label for="car-make">Choose a car make:</label>
<input list="car-makes" id="car-make" name="car-makes" placeholder="Select make.." />
<datalist id="car-makes" >
    <option value="BMW">
    <option value="Tesla">
    <option value="Toyota">
    <option value="Volkswaggon">
    <option value="Mazda">
</datalist>

Choose a car make:

<option value="BMW">
<option value="Tesla">
<option value="Toyota">
<option value="Volkswaggon">
<option value="Mazda">

And here’s a simple example of what this looks like in action:

다음은 이것이 실제로 어떻게 보이는지 보여주는 간단한 예입니다.

As you can see, there are a lot of great HTML5-based tags out there and I’ve only scratched the surface. HTML5 has done wonders for the web and continues to be a place of great innovation in browsers. Let’s all just hope that browser vendors continue to extend and add easy to use core HTML elements like these into the future!

보시다시피, 훌륭한 HTML5 기반 태그가 많이 있으며 저는 표면만 긁어왔습니다. HTML5는 웹에서 놀라운 일을 해냈고 브라우저에서 계속해서 큰 혁신의 장소가 되었습니다. 브라우저 공급업체가 앞으로도 이와 같은 사용하기 쉬운 핵심 HTML 요소를 계속해서 확장하고 추가하기를 바랍니다!

✳️ 단어 :

struck-through
관통
fancy
엄청난, 화려한
amend
수정하다
abbreviation
약어
acronym
두문자어 : 약어
built-in
내장된
nifty
맵시 있는
accordion
펼치는
feature
기능
cite
인용하다

✳️ 구문 :

a range of semantic HTML tags

시맨틱 HTML 태그 범위 ❌
다양한 의미의 HTML 태그 👍

There is actually a tag

사실 태그가 있다

comes directly out of

에서 직접 나옵니다.

when the new text was added or amended

새로운 텍스트가 추가되거나 수정되었을 때

how far along something is

어떤 것이 얼마나 멀리 떨어져 있는지 ❌
얼마나 진행되고 있는지 👍

8 Cool HTML Tags You Didn't Know Existed
Schema Markup — What It Is & How to Add It to Websites

profile
김진권
start!
이전 포스트

영어공부 그룹 스터디 : 1회차

다음 포스트

영어공부 그룹 스터디 : 3회차

1개의 댓글

comment-user-thumbnail
HyunHo Lee
2021년 11월 21일

와.. 영어까지.. 대단하시네요. 저는 코테만 병행해도 시간이 너무 없는거같아요😢

답글 달기