새로운 태그 공부

룰루루 2021. 3. 23. 22:55

2021. 3. 23. 22:55

# 참고한 페이지

1. opentutorials.org/module/552

HTML5 태그 사전

표지가 허전해서 임시로 올려봤어요.. ^^ 자매품 CSS Dictionary도 있습니다.

opentutorials.org

2. www.w3schools.com/tags/default.asp

HTML Reference

w3schools.com --> THE WORLD'S LARGEST WEB DEVELOPER SITE

www.w3schools.com

#0. <abbr> 태그

: 텍스트를 생략어로 지정해주는 태그.

- title 속성을 가진다. <abbr title="풀 네임"> 줄임말 </abbr> => 주로 이런 식으로 사용한다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <abbr title="acquired immune deficiency syndrome">AIDS</abbr>
    <abbr title="laughing out loud">LOL</abbr>
    <abbr title="too much information">TMI</abbr>
  </body>
</html>

=> 결과물로 텍스트 3개가 나오는데, 각 단어에 커서를 갖다 대면 단어의 풀 네임이 부가설명으로 나온다.

1. <address> 태그

: 연락처 정보를 나타내는 태그

<address>
Written by <a href="C:\Users\USER\Desktop\WEB\txt\webpagemaking_1.txt">Lullulu</a>.<br>
Visit us at:<br>
txtborder.com<br>
Sanbon 757, Aricafe<br>
KOREA
</address>

연락처 형식으로 결과물이 나온다. <address> 태그 안의 내용들은 기본값으로 기울임체가 적용된다.

#2. <area> 태그

: 이미지의 구체적인 영역을 지정해주는 태그

ex. 하나의 이미지에서 특정 구역을 클릭하면 hyperlink A, 다른 구역을 클릭하면 hyperlink B 이런 식으로 다르게 이동.

area 태그는 map, img 태그와 거의 같이 쓰인다.

사용방법은:

1) 맨 처음에 <img> 로 이미지를 제시하고, usemap 속성으로 map 이름을 정의한다.

2) <map>에서 <img>와 같은 이름을 제시하고, <map> 안에 <area>가 들어간다.

* 한 이미지에서 나누고 싶은 영역 수 만큼 <area> 사용하면 된다.

ex) 한 이미지를 세 구역으로 나누고 싶다 => <area> 태그 3번 사용하면 됨

속성:

-shape : 구역의 모양

=> default(사진 전체) / rect(직사각형) / circle(원) / poly(다각형) 이 있음.

-coords : 좌표. 정확히 어느 구역인지를 설명함. 지정한 shape 에 따라 다른 좌표 사용함.

=> rect : (왼쪽 위 점의 X좌표, Y좌표, 오른쪽 아래 점의 X좌표, Y좌표) ,

circle : (원의 중심 좌표, 반지름) , poly(첫 번째 각의 X좌표, Y좌표, 두 번째 각의 X좌표, Y좌표, 세 번째 각의 X좌표, Y좌표)

-alt : 이미지가 나타나지 않았을 때 부연 설명할 메시지

-href : 해당 영역을 누르면 이동할 url 등의 주소

-target : 새 링크로 이동 시 창이 어디에 열릴지를 설정함.

(늘 _parent 옵션과 _top 옵션이 헷갈렸었는데, 블로그 글 보고 정리했다.)

- "_parent" : 부모 창에서 열림. 만약 창 A에서 창 B가 열리면, A는 B의 부모 창이다. 그러므로 창 B에서 target을 parent로 설정할 경 우, 창 A에서 새 링크가 열린다.

- "_top" : 비슷한 개념으로, '최고 부모 창'에서 링크가 열린다. 만약 A에서 B, B에서 C가 나왔고 창 C에서 target을 top으로 설정한다 면, 부모 창 B가 아니라 C의 기준 최고 부모 창인 A에서 새 링크가 열린다.

- "_blank" : 새 창에서 링크가 열린다(이때 기존 창은 새 창의 부모 창이 된다).

- "_self" : 해당 창에서 링크가 열린다.

사용예시:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>web review</title>
  </head>
  <body>
    <abbr title="JohnMat">JMT</abbr> <br>
    <abbr title="RapMonster">RM</abbr>

    <img src="C:\Users\USER\Desktop\WEB\image\france.jpg"  alt="France" usemap="#france" width="600" height="400">

    <map name="france">
      <area shape="rect" coords="0,400,200,0" alt="Blue" href="https://en.wikipedia.org/wiki/Blue">
      <area shape="rect" coords="200,400,400,0" alt="White" href="https://en.wikipedia.org/wiki/White">
      <area shape="rect" coords="400,400,600,0" alt="Red" href="https://en.wikipedia.org/wiki/Red">
    </map>
  </body>
</html>

더 자세한 정보는 www.w3schools.com/tags/tag_area.asp 에 나와 있는데 너무 많아서 정리를 못 했다.

#3. <article> 태그

: <p> 가 단락을 구분하는 태그라면, <article>은 문서 내 독립적인 컨텐츠를 나타낸다.

사용예시:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>web review</title>
  </head>
  <body>

    <article>
      <h2>Machine Learning</h2>
      Machine learning (ML) is the study of computer algorithms that improve automatically through experience and by the use of data.[1] It is seen as a part of artificial intelligence. Machine learning algorithms build a model based on sample data, known as "training data", in order to make predictions or decisions without being explicitly programmed to do so.[2] Machine learning algorithms are used in a wide variety of applications, such as email filtering and computer vision, where it is difficult or unfeasible to develop conventional algorithms to perform the needed tasks. <br><br> A subset of machine learning is closely related to computational statistics, which focuses on making predictions using computers; but not all machine learning is statistical learning. The study of mathematical optimization delivers methods, theory and application domains to the field of machine learning. Data mining is a related field of study, focusing on exploratory data analysis through unsupervised learning.[4][5] In its application across business problems, machine learning is also referred to as predictive analytics.
    </article>
    <article>
      <h2>Supervised Learning</h2>
      Supervised learning is the machine learning task of learning a function that maps an input to an output based on example input-output pairs.[1] It infers a function from labeled training data consisting of a set of training examples.[2] In supervised learning, each example is a pair consisting of an input object (typically a vector) and a desired output value (also called the supervisory signal). A supervised learning algorithm analyzes the training data and produces an inferred function, which can be used for mapping new examples. An optimal scenario will allow for the algorithm to correctly determine the class labels for unseen instances. This requires the learning algorithm to generalize from the training data to unseen situations in a "reasonable" way (see inductive bias). This statistical quality of an algorithm is measured through the so-called generalization error.[3]
    </article>
    <article>
      <h2>Unsupervised Learning</h2>
    Unsupervised learning (UL) is a type of algorithm that learns patterns from untagged data. The hope is that through mimicry, the machine is forced to build a compact internal representation of its world. In contrast to supervised learning (SL) where data is tagged by a human, e.g. as "car" or "fish" etc, UL exhibits self-organization that captures patterns as neuronal predelections or probability densities.[1] The other levels in the supervision spectrum are reinforcement learning where the machine is given only a numerical performance score as its guidance, and semi-supervised learning where a smaller portion of the data is tagged. Two broad methods in UL are Neural Networks and Probabilistic Methods.
    </article>

  </body>
</html>

코드가 이런 식으로 나오는데, Machine Learning 글 안에 단락은 <p> 태그로 구분되어 있고, 각 학습(Learning)의 종류는 <article>으로 구분되어 있다.

즉 <p> 보다는 더 컨텐츠를 독립적으로 구분시켜 주는 것이 <article> 태그이다.

<p> : 같은 주제 내에서 단락을 바꿀 때

<article> : 다른 주제로 글을 작성할 때

#4. <aside> 태그

: 중심 컨텐츠와 관련은 있지만 직접적이지 않은 내용을 사이드로 빼서 설명하는 용도의 태그.

* 그런데 aside는 html 문서 상에서는 본문과 차이가 없다.

=> <aside>로 본문과 차이를 주려면, CSS를 사용해서 <style>을 적용해야 한다.

사용예시:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<h1>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

[padding(-left) : (왼쪽)경계와 (왼쪽)글자 사이의 거리 / margin(-left) : (왼쪽) 경계와 다른 컨텐츠 요소 사이의 거리]

그렇다면 정확히 어떻게 <style> 태그로 속성을 부여한다는 것일까?

#5. <style> 태그

: 개체의 글자색, 배경색 등 개체의 스타일 정보를 포함시킨다.

주로 CSS를 통해 사용되지만, html 으로도 간단한 스타일 정보는 포함시킬 수 있다.

아래 예시에서 <style> 안의 요소는 변수가 아니라 '태그'이다.

<html>
  <head>
    <style>
    h1 {color:red;}
    p {color:blue;background: green;}
  </style>
  </head>
<body>

  <h1>A heading</h1>
  <p>A paragraph.</p>

</body>

이런 식으로 h1 태그에는 빨간색 글씨체를, p 태그에는 파랑 글씨체와 초록 배경을 <style>로 부여하였다.

=> h1 이랑 p 태그를 사용할 때마다 해당 서식이 적용되어서 나온다.

지금은 <style>에서 태그 단위로 속성을 부여한 것이고, 다른 형식의 데이터에도 style을 부여할 순 있지만 형식이 복잡하고 보통은 CSS에서 많이 이뤄지는 작업이다.

만약 태그가 중복되면 어떻게 될까?

: A 태그와 B 태그에 다른 스타일을 할당했는데 해당 본문 내용이 A 태그와 B 태그 둘 모두 안에 포함된다면?

<html>
  <head>
      <style>
        p {color:skyblue;background: pink;}
        article {color: white; background : black}
      </style>
  </head>
  <body>
    
    <p>A paragraph.</p>
    <article>
    Oceans are a crucial part of the biosphere, soaking up carbon dioxide, absorbing more than 90 percent of the excess heat trapped on Earth from carbon emissions and producing half of global oxygen. But as we continue to pump greenhouse gases into the atmosphere, the strain is taking its toll. Action is imperative, but how do we unlock and accelerate ocean-oriented solutions without repeating the mistakes of the past? Join us on March 25 for the debate.
    </article>

    <article>
      <p>
        Every weekday, The Morning newsletter helps millions of readers make sense of the day’s news and ideas. Now, for the first time, join David Leonhardt for a special live edition, created just for subscribers.
      </p>
      <p>
        Hear the latest on the rapidly evolving Covid pandemic directly from public health researchers Ashish Jha of Brown University and Jennifer Nuzzo of Johns Hopkins. They’re here to answer your questions about the latest Coronavirus variants, vaccines and research.
      </p>
    </article>

  </body>
</html>

결과: <article> 태그 안에 <p> 태그가 들어간 부분에서는 <p> 태그의 스타일이 우선적으로 적용된다.

=> 태그가 중첩된 경우, 가장 안에 있는 (본문과 가까운) 태그 스타일이 우선적으로 적용된다.

'front-side > HTML' 카테고리의 다른 글

HTML 정리편#1 - 복습 (0)	2021.03.23
18. 웹호스팅 ~ 19. 웹서버 운영하기 + HTML 태그 공부 (0)	2021.03.22
웹 페이지 완성 ~ 원시 웹 (0)	2021.03.19

아스