Beautiful CSS

Most Used HTML Tags

자주 사용하는 HTML 태그

Visual Design and Art School Logo Academy of Art University Logo
Related :

교육 카드 개설 현황

Channels :
Units :
Draft :

사이드바 2

Meta Info:

  • 2014년 5월 5일
  • Hyunhwa Jeong
  • 4,175 Views
  • 2 Comments

Table of Contents

자주 사용하는 HTML 태그

이 게시물은 2017년 8월 21일 수정판입니다.

이야기에 앞서

이 문서에서는 흔히 사용되는 HTML 태그를 소개합니다. 웹 문서 작성을 처음 접하는 분들을 위한 기본적인 사용 가이드이며, 여기에 수록된 태그만으로도 일반적인 웹 문서 혹은 웹 사이트를 제작할 수 있습니다.

아울러, 여기에서 소개하는 태그는 입문자의 빠른 사용을 위한 것이 목적입니다. 태그 하나하나에 대한 밀도 있는 연구 혹은 Semantic한 작성을 위한 가이드가 아닙니다. 그러한 부분은 별도의 카드에서 다룹니다.

각 태그 설명의 비고란에는 해당 태그에 대한 좀 더 심도있는 내용에 대해 훌륭하게 다루고 있는 웹 사이트 HTML5 Open References의 링크를 함께 제공해 두었으니, 관심 있는 분은 꼭 한번씩 참고하시기 바랍니다. 해당 사이트의 내용은 입문자 수준은 아니기 때문에 다소 어려울 수 있습니다.


사용빈도 Level 1

가장 흔하게 사용되는 태그입니다. HTML에는 많은 태그가 있지만, 아래에 설명하는 너댓개에 해당하는 아주 소수의 태그만으로 모든 웹 사이트를 제작할 수 있습니다. 물론 이것은 표현적인 부분에서 문제가 없다는 것이지, 태그가 가지는 의미들을 잘 살리는 것은 아닙니다. 하지만 지금은 Level 1에 해당하는 태그만 사용해도 좋습니다. 이 문서가 대상으로 하는 직업군은 디자이너입니다.


<div>

작성 예제 <div>내용</div>
태그의 의미 Division. 가장 기본적인 포장용 태그입니다. 특별한 의미를 가지고 있지 않기 때문에, 영역을 구분하는 용도의 레이아웃에 적합합니다.
태그 성격 쌍 태그
박스모델 블록(block)
기본 CSS 속성 없음
자식 태그 없음
비고

<a>

작성 예제 <a href=”test.html” target=”_blank”>Test 페이지로 이동</a>
태그의 의미 Anchor. 이 태그가 감싸고 있는 요소를 클릭할 경우, 웹 페이지가 href에 선언된 URL로 이동합니다.
태그 성격 쌍 태그
박스모델 인라인(inline)
기본 CSS 속성
  • 요소에 마우스를 올리거나 누르고 있을 경우, 커서 모양과 색상이 바뀝니다.
  • 색상이 일반 텍스트와 다르며, 밑줄이 있습니다.
  • 해당 URL에 방문하기 전, 후의 색상이 다릅니다.
자식 태그 없음
비고
  • target="_blank"일 경우, 웹 브라우저의 새 창이나 새 탭을 사용해서 이동합니다. target="_top"일 경우, 현재 보고 있는 창에서 그대로 이동합니다.
  • <a> 태그의 기본 CSS 속성을 조정하려면 다음의 CSS를 참조합니다.
a:link {
    text-decoration: none;     /*밑줄을 없앰*/
    color: #000                /*방문하기 전 색상*/
}

a:visited {
    color: #000                /*방문 후 색상*/
}

a:hover {
    color: #000                /*마우스 올렸을 때 색상*/
}

a:active {
    color: #000                /*마우스 키가 눌렸을 때 색상*/
}

이 태그에 대해 좀 더 자세히 알아보기

<p> 태그

작성 예제
<p>내용</p>
태그의 의미

Paragraph. 문단 혹은, 단락을 나타냅니다. 문맥상 하나의 소주제를 중심으로 이를 뒷받침하는 문장들을 그룹화 한 개념입니다. 이 태그는 본문이나 기사 같은 길이가 긴 글에서 주로 사용하지만, 웹 디자인의 특성에 맞게 사용해도 됩니다.

태그 성격 쌍 태그
박스모델 블록(Block)
기본 CSS 속성 웹 브라우저별로 margin값이 설정되어 있습니다. CSS에서 margin: 0과 같이 초기화하거나 알맞게 변경하세요.
자식 태그 없음
비고

p 태그는 이보다 더 의미가 적합한 태그가 없을 경우에만 사용하는 것이 좋습니다. 예를들어 다음과 같은 경우, 기술적으로는 문제가 없습니다.

<section>
 <p>최종 수정일: 2001-04-23</p>
 <p>저자: fred@example.com</p>
</section>

하지만 더 적합한 의미의 태그들이 HTML5 문법에 존재하므로 다음과 같이 바꿔 쓰는 것이 올바른 표현입니다.

<section>
 <footer>최종 수정일: 2001-04-23</footer>
 <address>저자: fred@example.com</address>
</section>
이 태그에 대해 좀 더 자세히 알아보기

<ul>

작성 예제
<ul>
    <li>Home</li>
    <li>About Us</li>
    <li>Contact</li>
</ul>
태그의 의미 Unordered List. 여러 요소를 나열할 수 있는 리스트를 작성할 수 있습니다. 의미에 맞게 사용하려면 순서가 중요하지 않은 목록을 만들 때 사용하지만, 그 외에 메뉴바와 같이 레이아웃적인 측면으로 사용할 때도 있습니다.
태그 성격 자식요소를 포함하는 쌍 태그
박스모델 블록(block)
기본 CSS 속성 브라우저에 따라 여백(margin 혹은 padding) 값이 있을 수 있어, 의도치 않은 공간이 발생할 수 있습니다.
자식 태그 있음 (필수)
비고 이 태그에 대해 좀 더 자세히 알아보기

<span>

작성 예제 <span>내용</span>
태그의 의미 아무런 의미를 가지고 있지 않은 태그이므로 여러 용도에 사용할 수 있습니다. div 태그가 주로 영역을 잡아주는 큰 구조에 대한 그릇이라면, 이 태그는 문장 내에서 특정 구문을 강조하는 등 조금 더 작은 구조에 대해 사용합니다.
태그 성격 자식요소를 포함하는 쌍 태그
박스모델 인라인(inline)
기본 CSS 속성 없음
자식 태그 없음
비고 이 태그에 대해 좀 더 자세히 알아보기

<img /> 태그

작성 예제 <img src="sample.png" width="100" height="100" alt="Sample Image" />
태그의 의미

Image. 이미지를 삽입합니다.

  • src : 출력하고 하는 이미지 파일의 경로(파일명 포함)를 선언합니다.
  • alt : 부득이한 이유로 이미지가 웹 브라우저에서 출력되지 못할 경우 대체 할 텍스트를 적어줍니다.
  • widthheight : 이미지의 너비와 높이 값입니다. 단위는, 보이지는 않지만 pixel입니다. 만일 %, em, rem 처럼 다른 단위를 사용하고자 한다면, width와 height 속성을 태그에서 지워버리고, CSS에서 따로 정의하세요.
태그 성격 홀 태그
박스모델 인라인(inline)
기본 CSS 속성 없음
자식 태그 없음
비고 이 태그에 대해 좀 더 자세히 알아보기


사용빈도 Level 2

Level 2는, div 태그의 남발에 의해 문서의 판독성이 심각하게 떨어져 오히려 작업 능률이 나빠지는 것을 보완하기 위한 기준으로 분류하였습니다. 그동안 HTML 문서를 작성하면서 판독에 애로가 있던 분들은 div 태그를 다음의 태그들로 대체해 볼 것을 권합니다.

대체로 HTML 태그를 다루는데 능숙해지고 의미에 맞게 잘 사용하게 되면, 오히려 Level 2Level 3 태그를 주로 사용하게 됩니다. HTML 웹 페이지 만들기 기사의 첫 커버 이미지에서 이 부분을 잘 보여주고 있습니다.


<header> 태그

작성 예제
<header>
    <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Blog</li>
    </ul>
</header>
태그의 의미

Header. 머릿글에 해당하는 요소에 대해 사용하면 좋습니다. 문서 정보, 네비게이션, 로고 등, 페이지마다 공통으로 삽입되는 내용들을 감싸기 좋습니다. 기존의 div 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

태그 성격 쌍 태그
박스모델 블록(Block)
기본 CSS 속성 없음
자식 태그 없음
비고 이 태그에 대해 좀 더 자세히 알아보기

<footer> 태그

작성 예제
<footer>
    <ul>
        <li>Privacy Policy</li>
        <li>Terms and Use</li>
        <li>Contact</li>
    </ul>
</footer>
태그의 의미

Footer. 바닥글에 해당하는 요소에 대해 사용하면 좋습니다. 헤더와 비슷하지만, 페이지 전체 내용과는 조금 거리를 둔 공통 내용을 포장하기 좋습니다. 예를들어, 판권 및 저작권 표기, 파트너쉽 사이트로의 링크 따위. 기존의 div 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

태그 성격 쌍 태그
박스모델 블록(Block)
기본 CSS 속성 없음
자식 태그 없음
비고 이 태그에 대해 좀 더 자세히 알아보기

<main> 태그

작성 예제
<main>
    <p>한 페이지에 단 한번만 사용하는 주된 컨텐츠용 포장 태그입니다.</p>
</main
태그의 의미

이 태그는 현재 많은 웹 브라우저가 지원하지 못하고 있습니다. 당장은 사용하지 마시고, 의미만 알아두도록 하세요.

<hgroup> 태그가 W3C의 명세에서 퇴출 된 이후에 새롭게 추가 된 태그입니다. <header>, <footer>, <article>, <aside>, <nav>의 하위 요소로는 사용할 수 없습니다.

한 페이지에서 단 한번만 사용하며, 페이지의 주요 컨텐츠를 담는 포장 태그입니다. 보통 <div class=”content”>내용</div> 처럼 사용하던 부분을 대체합니다.

태그 성격 쌍 태그
박스모델 블록(Block)
기본 CSS 속성 없음
자식 태그 없음
비고 이 태그에 대해 좀 더 자세히 알아보기

<article> 태그

작성 예제 <article>내용</article>
태그의 의미

Article. 페이지에서 본문 혹은 주요 내용에 해당하는 부분에 사용하면 좋습니다. 기존의 div 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

태그 성격 쌍 태그
박스모델 블록(Block)
기본 CSS 속성 없음
자식 태그 없음
비고

<nav> 태그

작성 예제
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Portfolio
      <a href="#">Apple</a>
      <a href="#">Dell</a>
  </a>
</nav>
태그의 의미

Navigation. 2개 이상의 링크가 메뉴를 이루고 있는 네비게이션 요소에 사용합니다. 보통 리스트 태그인 ul 태그를 대체하면 좋습니다. 기존의 ul class="mainMenu" 태그를 사용했던 곳에서 이 태그가 어울릴만한 곳을 찾아보세요.

태그 성격 쌍 태그
박스모델 블록(Block)
기본 CSS 속성 없음
자식 태그 없음
비고

스크립트의 작동 상 제한으로 인해 메뉴에 a 태그를 사용하지 못하고 ul 태그를 사용해야 한다면, 그 외부에 nav 태그로 한번 포장을 해 주는 것이 좋습니다.

이 태그에 대해 좀 더 자세히 알아보기

사용빈도 Level 3

Level 3은, 다른 좋은 태그가 있음에도 불구하고 div 태그를 사용했거나 혹은, 아예 태그를 사용하지 않은 부분에 선언하면 좋을법한 태그를 모아보았습니다. HTML 마크업에 있어서 조금 더 성숙한 사용을 원한다면 참고하세요.


Drafts Document

이 부분은 현재 작성 중에 있습니다.

<h1> 부터 <h6> 태그

작성 예제 <h1>대제목입니다</h1>
태그의 의미 Heading. 대제목, 중제목, 소제목등에 사용하는 헤딩 태그입니다. <h1>이 가장 상위 제목, <h6>가 가장 하위 제목입니다. 이 태그들은 섹션 컨텐츠라고 하는, 제목으로 시작하는 영역을 다룰 때 사용하는 태그와 함께 사용하는 것이 일반적입니다. section, article, aside, nav 같은 태그가 그것입니다.
태그 성격 쌍 태그
박스모델 블록(block)
기본 CSS 속성
  • 외부여백(margin)이 있습니다.
  • 글자가 두꺼운 볼드체 속성이 있습니다.
  • <h1>부터 <h6>까지 각각의 글자 크기가 다릅니다.
자식 태그 없음
비고
  • 웹 사이트의 로고도 어떤 측면에서 보면 문서의 대제목으로 생각할 수 있습니다. 그래서 <h1><a href=”index.html”>로고</a></h1>처럼 로고를 h 태그에 넣어 사용하는 것도 매우 바람직한 방법입니다.
  • h 태그를 CSS에서 조정하는 방법은 다음을 참조하세요.
h1 {
    margin: 0;          /*외부 여백을 삭제*/
    font-size: 12px;    /*폰트 크기를 12px로 변경*/
    font-style: normal  /*볼드체를 일반체로 변경*/
}
Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
beautifulcss

죄송합니다만, 개인적인 질문이나 하청은 따로 받지 않고 있습니다^^

jaewoo sung

안녕하세요, 주인장님께 딱히 글을 남길곳이 없어서 댓글을 남깁니다! 사이트가 너무 이뻐서요 뭐좀 여쭤보고싶은데 yureka1112@gmail.com 메일 한번 보내주시면 감사드리겠습니다.