[ 1주차 ] 마크업태그

Joey·2024년 9월 30일
html마크업멋쟁이사자처럼부트캠프

멋사 FE 부트캠프 12기

목록 보기
3/9

시멘틱태그의 중요성이 SEO에 직결된다는걸 알아버린 나는.. 오.직.공.부.뿐😂 오늘은 예전엔 중요하다고 딱히 생각 안했던 마크업 태그들에 대해서 정리하려고 한다..!

🤔마크업 태그란?🤔

HTML 문서는 요소(element)와 태그(tag) 그리고 콘텐츠
로 구성되어 있으며, 요소는 HTML의 의미를 가진 개념
이라고 할 수 있음.

❗태그(tag)❗

  • 태그는 시작 태그와 종료 태그로 나눌 수 있으며 "<"와
    ">"로 둘러싸여 있음.

  • 기본 형식은 시작 태그의 경우 `<tag>의 형태를 가지며,
    종료 태그의 경우에는 </tag> 형태를 가짐.

  • 일부 태그의 경우, 종료 태그를 가지지 않는 경우도 있는
    데, 이를 ‘빈 요소(empty element)’라고 함.

<p> html과 xhtml의 미래<br> HTML5</p>

❗속성(attribute)❗

  • 시작 태그는 필요에 따라 정해진 속성을 가질 수 있으며,
    사용할 수 있는 속성은 태그마다 다를 수 있음.

  • 시작 태그 내에 여러 개의 속성을 선언할 수도 있는데,
    이 경우 속성과 속성은 공백으로 구분하여 지정해야 함.

  • 속성에는 값을 가지지 않는 논리 속성도 있으며 논리 속
    성의 경우 XHTML1.0에서는 값을 생략할 수 없기 때문에
    속성명을 값으로 지정해야 함.

<input type="text" id="user" required>

❗요소(element)❗

  • 시작 태그와 종료 태그 모두를 포함하여 ‘요소(element)’
    라고 함.

  • 요소는 다음과 같은 항목으로 구성되어 있음.

<p>HTML과XHTML의 미래 HTML5!</p>

❗종료태그처리❗

  • HTML5는 종료 태그를 생략할 수도 있음. 그러나 모든 요소가 종료 태그를 생략해도 되는 것은 아니기 때문에 종료 태그가 생략할 수 있는 요소를 사전에 확인해야 함.
    <p><img src="images/front.jpg alt="앞면"></p>

❗대소문자의 사용❗

  • 모두 가능하지만, 소문자를 사용할 것을 권장
    <p><img src="images/front.jpg alt="앞면"></p>

❗빈 요소(Empty Element)❗

  • HTML에서 <meta>, <link>, <img>, <br>, <input> 등 종료 태그를 가지고 있지 않은 요소를 ‘빈 요소(empty element)’라고 함

  • 기존 HTML4.01에서는 <img> 형식으로, XHTML1.0에서는 <img /> 형식으로 선언해야 하며, HTML5에서는 두 가지 방식 모두 허용하고 있음.

<img src="images/front.jpg alt="앞면">

❗속성(attribute)과 값(Value)❗

  • 논리 속성의 경우 속성값을 지정 또는 생략할 수 있음
    select multple="multiple"></select>

-속성 값은 인용 부호를 생략하거나 홀따옴표와 겹따옴표
등으로 구분할 수도 있음.
<img src="images/front.jpg alt="앞면">
<img src='images/front.jpg alt='앞면">

❗잘못된 중첩 사용 불가능❗

  • 시작 태그와 종료 태그의 중첩에 문제가 발생하지 않도
    록 해야 함

❗속성의 중복 사용 불가능❗

  • 시작 태그에 동일한 속성을 중복하여 선언할 수 없음.

🤔HTML5 요소🤔

-<html> 요소
문서의 루트 요소로, 모든 HTML 요소는 루트 요소 내에
포함되어야 함.

<html lang="ko-KR" dir="ltr">html 파일임을 정의.
html 태그는 head 태그와 body 태그로 이루어짐.
</html>

-<head> 요소
문서의 메타데이터 집합 요소로, 문서 제목, 스타일 파일
연결, 자바스크립트 삽입을 위한 요소들을 포함할 수 있
음.

<head>메타 데이터의 집합으로 웹 페이지에
직접적으로 보이지 않는 정보임.
head 태그는 title, meta, link, style, script 태그로
구성됨.</head>

-<body> 요소
문서의 본문 요소로, 문서 내에서 한 번만 사용할 수 있
음.

<body>본문을 담는 공간이다.</body>

-<title> 요소
문서의 제목으로 텍스트만 포함할 수 있음

<title>페이지를 대표하는 내용의 제목을 넣어야 함.</title>

-<meta> 요소
다양한 문서 정보를 나타낼 때 사용.

<meta charset="utf-8">

meta 태그는 <meta 속성="속성값" />으로 스스토 닫는 태그이기 때문
이렇게 나타낸다.

보기에 charset="utf-8"는 글자 깨짐에 대해
다른 언어에서도 볼수 있도록 표기한 것이다.

-<style> 요소
CSS를 문서 내에 직접 기술할 때 사용.
head태그 안에서 사용한다. 

 <style>
    .myDiv {
      border: 5px outset red;
      background-color: lightblue;    
      text-align: center;
    }
 </style>

-<link> 요소
문서에 외부 문서를 연결할 때 사용

<link 
rel="shortcut icon"
type="image/x-icon"
href="./favicon.ico"
/>

-<script> 요소
문서에 자바스크립트 파일을 삽입하거나 자바스크립트
코드를 기술할 때 사용.

<script 
type="text/javascript" 
src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script>
	document.write("Hello World !");
</script>

-<noscript> 요소
자바스크립트를 지원하지 않을 경우, 대신 제공할 폴백
콘텐츠를 정의할 때 사용.

-<section> 요소
장이나 절 등으로 구성할 수 있는 콘텐츠 섹션을 정의할
때 사용.

<section>
    <h1>HTML</h1>
    <p>HTML(HyperText Markup Language)은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의
        웹 페이지를 위한 마크업 언어이다.</p>
</section>
<section>
    <h1>HTML의 역사</h1>
    <p>최초의 HTML은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.</p>
</section>

-<article> 요소
RSS 피드로 재배포할 가치가 있는 독립된 콘텐츠를 정의
할 때 사용.

<article>
    <h2>2월 19일 날씨 정보</h2>
    <h3>서울</h3>
    <p>맑음</p>
    <h3>대전</h3>
    <p>흐림</p>
    <h3>부산</h3>
    <p>비</p>
</article>

-<aside> 요소
본문 콘텐츠와 연관성이 적은 콘텐츠를 정의할 때 사용.

<aside>
    <h4>포항</h4>
    <p>포항시는 대한민국 경상북도 동해안에 위치하고 있으며,
    포항시 중심을 관통하는 형산강이 영일만에 유입되면서 
	넓은 충적평야를 형성하고 있다.</p>
</aside>

-<header> 요소
페이지나 섹션 등의 헤더를 정의할 때 사용.

	<header>
        <h3>날씨 정보</h4>
        <h4>2월 19일</h4>
        <p>- 기상청 제공 -</p>
	</header>

-<footer> 요소
페이지나 섹션 등의 푸터를 정의할 때 사용.

<footer>
    <p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
    <address>Contact webmaster for more information. 070-1234-5678</address>
</footer>

-<address> 요소
연락처 정보를 정의할 때 사용

  <address>      
    (주) 멋쟁이 joey 처럼<br>
    서울시 어딘가<br>
    Tel: (02)123-4567 | Fax: (02)234-5678
  </address>

-<h1>~<h6> 요소
콘텐츠 블록의 제목을 정의할 때 사용

<h1>이 텍스트는 h1 요소를 사용한 제목입니다.</h1>
<h2>이 텍스트는 h2 요소를 사용한 제목입니다.</h2>
<h3>이 텍스트는 h3 요소를 사용한 제목입니다.</h3>
<h4>이 텍스트는 h4 요소를 사용한 제목입니다.</h4>
<h5>이 텍스트는 h5 요소를 사용한 제목입니다.</h5>
<h6>이 텍스트는 h6 요소를 사용한 제목입니다.</h6>

-<div> 요소
콘텐츠 블록의 시맨틱한 의미를 가지고 있지는 않지만,
디자인이나 개발 이슈로 인해 콘텐츠 블록을 그룹화 하
고자 할 때 사용

<style>
    div {
        background-color: orange;
        font-style: italic;
    }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p></div>
<p>span 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.</p>

-<main> 요소
문서의 주요 콘텐츠 영역을 정의할 때 사용하며, 문서에
는 하나의 <main> 요소만 존재할 수 있음.

<main>
    <h1>바나나</h1>
    <p>바나나는 바나나는 파초과 바나나 속에 속하는 숙근성 영년생 열대과수를 총칭한다.</p>
    <article>
        <h2>다이어트 식품</h2>
        <p>바나나는 탄수화물이 약 27%이고 비타민 A와 C가 풍부하며, 100g당 87kcal의 열량을 갖는다.</p>
    </article>
    <article>
        <h2>다양한 섭취법</h2>
        <p>바나나는 열매를 주식으로 이용할 뿐 아니라 미성숙한 열매는 채소로 다양한 요리에 응용된다.</p>
    </article>
</main>

-<p> 요소
단락 콘텐츠를 정의할 때 사용

<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>
<p>이 문장은 단락입니다.</p>

-<ul> 요소
비 순서형 목록을 마크업 할 때 사용

<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>
  • 아메리카노
  • 카페라떼
  • 핫초코
  • 차
    • 녹차
    • 홍차
    • 자스민차

-<ol> 요소
순서형 목록을 마크업 할 때 사용

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>
  1. 아메리카노
  2. 카페라떼
  3. 핫초코
  1. 녹차
  2. 홍차
  3. 자스민차

-<li> 요소
순서형 또는 비순서형 목록의 목록 항목을 정의할 때 사
용

 	<ul 혹은 ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
	</ul 혹은 ol>

-<dl> 요소
정의형 목록을 마크업 하고자 할 때 사용

-```<dt>``` 요소
정의형 목록의 용어 제목을 의미.

-```<dd>``` 요소
정의형 목록의 용어 설명을 의미.
<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>
호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀

-<figure> 요소
이미지, 오디오, 비디오, 표 등을 포함하는 그룹 영역을 의미.

-<figcaption> 요소
<figure> 요소에 포함된 콘텐츠에 대한 캡션을 정의할
때 사용.

<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
    <figcaption>Fig 1. 꽃사진</figcaption>
</figure>

-<blockquote> 요소
인용 콘텐츠 블록을 정의할 때 사용

<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside of early spring.
    This is because of the 3D ether space available to the carriers, in contrast
    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

-<pre> 요소
공백이나 줄바꿈 등의 입력 형식 그대로 화면에 렌더링
하고자 할 때 사용

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt;     나는 이 분야의 전문가다.     &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을
    적용한 텍스트로 그려져있습니다.
  </figcaption>
</figure>

-<hr> 요소
단락의 주제를 구분하고자 할 때 사용

<p>
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
</p>

<hr>

<p>
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
</p>

-<a> 요소
하이퍼링크를 지정할 때 사용. 

<a href="https://www.abc.com">abc</a>

-<em> 요소
텍스트를 강조하고자 할 때 사용.

 과거에 <em>block-level</em>이라 불렸던 콘텐츠는 HTML 5부터
  <em>flow</em> 콘텐츠라고 말합니다.

-<strong> 요소
특별히 중요한 콘텐츠의 의미를 부여하고자 할 때 사용.

<p>
  Before proceeding, <strong>make sure you put on your safety goggles</strong>.
</p>

-<i> 요소
HTML5에서 의미가 변한 요소로, 단순히 이탤릭체로 나
타내기 위한 요소가 아니라 분위기를 전환하는 의미 의
텍스트를 나타내며, 전문 용어, 관용구, 생각 또는 선박
이름 등에 사용. 

<p>
  라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.
</p>

-<b> 요소
텍스트를 볼드체로 표현하여 다른 콘텐츠와 구분하고자
할 때 사용. 

<p>
  This article describes several <b class="keywords">text-level</b> elements. It
  explains their usage in an <b class="keywords">HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b>element, likely in bold</b>.

-<small> 요소
저작권 정보 등과 같이 작은 크기의 텍스트 콘텐츠에 사용.

<p>
  This is the first sentence.
  <small>This whole sentence is in small letters.</small>
</p>

-<q> 요소
인라인 인용구를 정의할 때 사용.

<p>
  Mozilla 재단의 웹사이트에 따르면,
  <q cite="https://www.mozilla.org/en-US/about/history/details/"
    >Firefox 1.0 은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q
  >
</p>

-<br> 요소
줄바꿈을 하고자 할 때 사용.

<p>하하하</p>
<br />
<p>하하하</p>

-<span> 요소
인라인 텍스트를 그룹화할 때 사용.

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

-<img> 요소
이미지를 삽입할 때 사용.

<img src="favicon144.png" alt="MDN logo" />

-<video> 요소
비디오 콘텐츠를 삽입할 때 사용.

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

-<label> 요소
폼 서식의 레이블을 정의할 때 사용.

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

-<input> 요소
• 한 줄 입력 상자, 라디오 버튼, 체크 박스 등 다양한 폼 서식을 마크업할 때 사용.
• HTML5에서 새로운 <input> 요소의 속성이 다수 추가되
었음.

-<button> 요소
전송, 취소 등 버튼 서식을 삽입할 때 사용.

-<select> 요소
리스트나 목록 상자로 된 서식을 삽입할 때 사용.

-<option> 요소
리스트나 목록 상자 서식의 항목을 정의할 때 사용.

내가 써본 태그들로 구성했으니.. 아는 코드가 없다고 난리치지 말자!

profile
Joey
멋쟁이사자처럼 프론트엔드 부트캠프 12기
이전 포스트

[멋사 프론트엔드 TIL]쓸만한 Git 명령어 모음

다음 포스트

[2주차] WAI-ARIA

0개의 댓글