loading

웹 페이지 구획요소 태그 링크

아래 제목을 클릭하시면 해당 링크로 이동됩니다.

 

  1. 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 1
  2. 웹 페이지(html 시멘틱) 구획 요소 태그 (tag), 웹접근성, 랜드마크 ARIA - 2
  3. 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 3
  4. 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 4

 

 

 

 

5. 웹 페이지 구획 요소 (address, aside, footer) 태그(tag)

<address> 태그 요소

https://developer.mozilla.org/ko/docs/Web/HTML/Element/address

 

<address> - HTML: Hypertext Markup Language | MDN

HTML <address> 요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.

developer.mozilla.org

 

이 태그는 사람, 단체, 조직 등에 대한 연락처 정보를 기입하려고 할 때 사용한다.

현재 페이지에 물리적 주소, URL, 이메일, 전화번호, SNS, 좌표 등등 어떠한 정보라도 포함시킬 수 있다.

 

그리고 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름은 꼭 기입해야 한다.

하지만, 기입하지 말아야 하는 건 정보(출판일 등등)를 담아서는 안된다고 한다.

 

<address> 태그 안에 넣어서 사용할 수 없는 태그는

[제목 콘텐츠 (<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), 구획 콘텐츠 (<article>, <aside>, <section>, <nav>), <header>, <footer> 요소]

 

이렇게 <address> 태그는 주 목적(사람, 단체, 조직 등에 대한 연락처 정보) 이 있는 태그이기 때문에,

이 <address> 태그 안에 제목에 관련된 태그, 구획을 나누는 태그를 넣어서 사용하면 안 된다. 

 

물론 실질적으로 사용하면 적용은 되지만... 항상 말한 주 목적성을 띈 태그는

그 목적성에 맞게 태그를 사용하여 개발하는 게 바람직하다.

 

예)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
    <style>
      a[href^="mailto"]::before {
          content: "📧 ";
      }

      a[href^="tel"]::before {
          content: "📞 ";
      }
    </style>
</head>
<body>
<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

</body>
</html>

어드레스태그 사용 결과 화면

 

 

<aside> 태그 요소

https://developer.mozilla.org/ko/docs/Web/HTML/Element/aside

 

<aside>: 별도 구획 요소 - HTML: Hypertext Markup Language | MDN

HTML <aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.

developer.mozilla.org

 

이 태그는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타내고

주로 사이드바 혹은 콜 아웃 박스로 표현해서 사용한다.

 

출판물에서 주요 기사 옆에 곁들이는 관련 기사처럼 표시하거나,

인쇄물에서처럼 인용 부호를 사용하거나 광고를 붙이기도 하고

여러 nav 엘리먼트를 포함하거나 현재 페이지 내용과 달느 컨텐트를 노출할 때 사용한다.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
    <style>
        aside {
            width: 40%;
            padding-left: .5rem;
            margin-left: .5rem;
            float: right;
            box-shadow: inset 5px 0 5px -5px #29627e;
            font-style: italic;
            color: #29627e;
        }

        aside > p {
            margin: .5rem;
        }

        p {
            font-family: 'Fira Sans', sans-serif;
        }
    </style>
</head>
<body>

    <p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>

    <aside>
        <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
    </aside>

    <p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

</body>
</html>

 

결과 화면

aside 태그사용 결과 화면

 

위 예제처럼 파란 글자가 보이는 형태처럼 콘텐츠 내용과

크게 관련 없는 간접적인 내용을 집어넣어서 사용하는 것처럼 사용하면 된다.

 

 

반응형

 

 

 

<footer> 태그 요소

https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer

 

<footer> - HTML: Hypertext Markup Language | MDN

HTML <footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

developer.mozilla.org

 

이 태그는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담을 때 사용한다.

대부분의 footer가 현재 페이지의 끝에 나타나긴 하지만 필수 사항은 아니므로,

개발자 입맛대로 사용하면 될 듯하다.

 

예)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
    <style>
        article {
            min-height: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }

        footer {
            display: flex;
            justify-content: center;
            padding: 5px;
            background-color: #45a1ff;
            color: #fff;
        }
      
        a[href^="mailto"]::before {
            content: "📧 ";
        }

        a[href^="tel"]::before {
            content: "📞 ";
        }
    </style>
</head>
<body>
  <article>
      <h1>How to be a wizard</h1>
      <ol>
          <li>Grow a long, majestic beard.</li>
          <li>Wear a tall, pointed hat.</li>
          <li>Have I mentioned the beard?</li>
      </ol>
      <footer>
        <address>
          <a href="mailto:jim@rock.com">jim@rock.com</a><br>
          <a href="tel:+13115552368">(311) 555-2368</a><br>
          © 2018 Gandalf
        </address>         
      </footer>
  </article> 
</body>
</html>

 

결과 화면

footer 사용 예제 결과화면

 

위 예제처럼 footer 태그 안에 adress 태그가 들어가도 되고, 사용 안 해도 된다.

 

반응형

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

HTML5 - 텍스트(인용 구문 태그)<blockquote>, <q>  (0) 2022.02.21
HTML5 - 텍스트(text 단락구분 태그) <p>, <hr>, <br>  (0) 2022.02.21
웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 3  (0) 2022.02.19
웹 페이지(html 시멘틱) 구획 요소 태그 (tag), 웹접근성, 랜드마크 ARIA - 2  (0) 2022.02.16
웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 1  (0) 2022.02.15

+ Recent posts

티스토리툴바