HTML : Tag

백광호·2020년 10월 18일
html
0

my--note

목록 보기
2/17

태그는 2가지 분류로 나눌수 있음

  1. BOX
    사용자가 볼 수 없는 Section, CSS를 통해 스타일링이 가능함
  2. ITEM
    사용자가 볼 수 있는 Section, 사용자가 직접 상호작용이 가능함

태그의 정의

<p class="editor-note">my cat is very grumpy</p>

  • ,

    이것을 태그라고 한다
  • My cat is very grumpy
    이것을 콘텐츠라고 한다

  • My cat is very grumpy

    이것을 모두 합쳐 엘레멘트 또는 노드라고 한다
  • class="editor-note"
    이것을 속성이라고 하며 class를 통해 CSS를 사용하여
    쉽게 콘텐츠를 꾸밀수 있다

BOX

BOX란, 웹사이트의 구역이 나눠지는 Tag들을 가리키는 말

웹 사이트를 구성할 때
절대로 div만 사용해 웹사이트를 만드는것은 좋지 않음

에를들어 main 에서도 디자인에 따라
section을 통해 그룹을 나눌 수 있음

section안에서는 article을 이용해
여러가지 Item을 이용해 재사용 가능한 구성 요소를 모아둔 것

BOX의 대표적인 Tag

  • <header>
    페이지의 도입부로서 탐색에 도움을 주는 콘텐츠를 나타냄
    주로 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함함

이름에서 나타나는 느낌과 달리
꼭 페이지의 처음에 있을 필요는 없음

[예시]

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>
  • <footer>
    페이지의 종결부로서 보통 저작권이나 법률적 고지
    또는 참고할만한 링크들을 포함함

이름에서 나타나는 느낌과 달리
꼭 페이지의 끝에 있을 필요는 없음

[예시]

<footer>
  Some copyright info or perhaps some author
  info for an &lt;article&gt;?
</footer>
  • <nav>
    문서의 부분 중 현재 페이지 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄 자주 쓰이는 곳은 메뉴, 목차, 색인 등

대부분 <ul>과 <li>로 구성되어있는 경우가 많다.

[예시]

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
  • <aside>
    문서의 주요 내용과 간접적으로 연관된 부분을 나타냄
    주로 사이드 바 혹은 콜아웃 박스로 표현

[예시]

<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>
  • <main>
    body의 주요 콘텐츠, 문서의 핵심 주제나 앱의 핵심 기능에
    직접적으로 연결됐거나 확장하는 콘텐츠

mine요소는 문서의 유일한 내용이어야 함.
사이드바, 탐색 링크, 저작권 정보, 사이트 로고 등
여러 문서에 걸쳐 반복되는 콘텐츠를 포함해선 안됨

[예시]

<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  
  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in
		many supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

<!-- other content -->

  • <section>
    HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용함. 보통 section은 제목에 사용

  • 각각의 section을 식별할 수단이 필요.
    주로 제목 (h1~h2)요소를 section의
    자식으로 포함하는 방법으로 사용

  • 콘텐츠를 따로 구분할 필요가 있다면 article을 사용

  • 단순한 스타일링이 목적이라면 div를 사용
    논리적인 구획이 목적이라면 section을 사용

[예시]

<section>
  <h2>Heading</h2>
  <img>some image</img>
</section>

  • <article>
    문서, 페이지, 앱, 사이트 안에서 독립적으로 구분해 배포하거나
    재사용할 수 있는 구획을 나타냄, 게시판과 블로그 글, 매거진이나 뉴스 기사등에 사용

  • 각각의 article을 식별할 수단이 필요.
    주로 제목 (h1~h2)요소를 article의
    자식으로 포함하는 방법으로 사용

  • article이 중첩되어 있을 때, 안쪽에 있는 요소는
    바깥쪽에 있는 요소와 관련된 글을 나타냄
    예를들어 블로그 글의 댓글은 글을 나타내는 article안에 중첩된
    article로 나타낼 수 있음

  • article은 작성자의 정보를 address를 이용해 제공할 수 있음
    하지만 중첩된 article에는 적용되지 않음

  • article은 작성 일자와 시간 time의 datetime속성을 이용해
    설명할 수 있음

[예시]

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

  • <div>
    플로우 콘텐츠를 위한 통용 컨테이너, CSS로 꾸미기 전에는
    콘텐츠나 레이아웃에 영향을 주지 않음

  • aricle, nav가 적절하지 않을때 사용

  • 거의 대부분의 상황에 사용 가능함

  • 묶어서 스타일링이 필요할 경우 사용

[예시]

HTML
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
  • <span>
    구문 콘텐츠를 위한 통용 인라인 컨테이너,
    본직적으로는 아무것도 나타내지 않음
    스타일을 적용하기 위해 또는
    어떤 특성값을 서로 공유하는 요소를 묶을때 사용

div와 유사하지만 div는 블록 레벨 요소인 반면
span은 인라인 요소
(블록 레벨, 인라인은 ITEM에서 자세히 다룸)

[예시]

HTML

```html
<li><span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
</span></li>
```

CSS

```css
li span {
  background: gold;
 }
```
  • <form>
    데이터를 전송하기위한 대화형 컨트롤을 포함한 문서구획
    <form>에는 크게 두가지 속성이 존재한다.
  1. action은 어떤 페이지로 데이터를 보낼것인지 지정할 수 있다.
  2. method는 데이터를 전송하는 방법을 정의한다.

method 속성으로 데이터를 전송하는 방법으로는 세가지가 존재한다.

  1. post는 백엔드 서버에 전송하는 방식으로 서버가 없다면 사용할 수 없다.
  2. get은 url을 통해 데이터를 전송한다 때문에 보안에 많이 취약하다.
    (절대 개인정보를 get방식으로 보내면 안된다.)
  3. dialog는 양식이 <dialog>태그에 위치한 경우 데이터 전송 후 닫힌다.

백엔드 서버에 데이터를 전송하는 태그이기 때문에 자주 사용된다.

ITEM

Item Tag에는 아래 두가지로 나누어 볼수 있다

  • Block-Level(블록)
    쉽게 보면 블록 레벨은 한줄에 한개의 요소만 들어가는 것
    자동으로 줄바꿈이 되는것이 특징
    CSS에서 Block요소는 margin, padding, border가 적용된다
    또한 기본적으로 브라우저는 block요소에
    user agent styleshest로 margin을 적용시킨다
  • Inline-level(인라인)
    쉽게 보면 인라인은 공간이 허용하면 다른 Tag옆에도 배치 가능
    자동으로 줄바꿈이 되지 않는것이 특징
    CSS에서 Inline요소는 width와 height가 적용되지 않는다
    또한 margin의 경우 좌, 우만 적용된다
profile
백광호
안녕하세요
이전 포스트

HTML

다음 포스트

CSS

0개의 댓글

관련 채용 정보