HEROPY Tech 블로그 참고.
🔗클릭 하면 해당 태그의 설명이 있는 mdn페이지로 이동
🔗<body>
HTML 문저의 내용을 나타내며 한 문서당 하나의 <body>만 가질 수 있다.
🔗<HEADER>
▪일반적으로 웹페이지의 상단에 위치한다.
▪로고, 메뉴, 검색, 로그인 등이 들어가게 되는 공간이다.
▪헤더 태그는 다른 태그의 자손으로는 사용 될수 없다.
▪전역속성만 사용 가능.
🔗<FOOTER>
▪일반적으로 웹페이지의 하단에 위치한다.
▪개발자, 저작권 데이터, 관련된 문서의 링크 등의 정보가 들어가게 되는 공간이다.
▪푸더 태그는 다른 태그의 자손으로 사용 될수 없다.
▪전역속성만 사용 가능.
🔗<H1>, <H2>, ... , <H6>
▪제목을 나타내는 태그이다.
▪h1이 가장 큰 제목이고 h2, h3으로 갈수록 사이즈가 작아지며 h6이 가장 작아지지만
폰트의 크기를 줄이기 위해 낮은 단계를 사용하지 않아야 한다,
폰트 사이즈를 위한 태그가 아니고 대주제와 소주제를 나누기 위한 태그 이기 때문이다.
폰트 사이즈는 CSS의 font-size 속성을 사용하도록 하자.
▪접근성을 위해 제목 단계를 건너뛰지 말아야 한다. <h1>이 사용 됐다면 <h2>를 사용 해야 한다.
그 이유는 브라우저나 검색엔진이 h1부터 순차적으로 제목을 찾아 내려가게 되는데
중간에 빠진 제목 태그가 있다면 제목을 찾고 목차를 만들때 문제가 생길수가 있다.
▪되도록이면 하나의 html에는 한번의 h1만 사용하도록 하자.
🔗<MAIN>
▪<body> 태그 안에서의 주요 콘텐츠를 뜻한다.
▪하나의 <main>태그만 존재 해야한다
▪IE 지원 불가
🔗<ARTICLE>
▪매거진, 신문 기사, 블로그등 독립적으로 구분되거나 재사용 가능한 영역을 설정
▪일반적으로 <h1> ~ <h6> 포함하여 식별
📺display : block
🔗<SECTION>
▪HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용.
▪<div>는 의미가 없이 사용 되지만 <section>은 의미가 있기 때문에 제목을 갖을 때 사용한다고 보면된다.
▪일반적으로 <h1> ~ <h6> 포함하여 식별
📺display : block
🔗<ASIDE>
▪핵심 콘텐츠와는 상관없는 문서의 별도 콘텐츠를 설정한다.(사이드바 혹은 콜아웃 박스로 표현)
🔗<NAV>
▪네비게이션의 약자로 다른 페이지 링크를 제공하는 영역을 설정
(보통 메뉴(Home, About, Contact), 목차, 색인 등을 설정
📺display : block
🔗<ADDRESS>
▪연락처 정보를 작성하기 위한 태그
▪<address> 태그 안에 <a> 태그가 사용된다.
📺display : block
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>
🔗<DIV>
▪Division의 약어로 꾸미는 목적으로 사용 된다
▪아무런 의미도 나타내지 않는 콘텐츠 영역을 설정
💡긍정적인 의미로 막 사용 할수 있다.
📺display : block
🔗<OL>, 🔗<UL>, 🔗<LI>
▪목록을 작성할때 사용 되는 태그
▪<ol> : Ordered List, display : block;
<ol start="4" type="I" reversed>| 속성 | 의미 | 값 | 특징 |
| reversed | 항목을 역순으로 설정 | - | IE 지원 불가 |
| start | 항목에 매겨지는 번호의 시작 값 | 숫자(Number) | |
| type | 항목에 매겨지는 번호의 유형 | a, A, i, I, 1 |
▪<ul> : Unordered List, display : block;
▪<li> : List Item, display : list-item(block요소 라고 생각하면 된다.);
<li value="7">| 속성 | 의미 | 값 | 특징 |
| value | 항목의 순서를 설정 | 숫자(Number) | 이하 항목들의 순서가 다시 지정됨 |
▪<ol>과 <ul>은 자식으로 <li>만 가질 수 있다.
▪<li>는 <ol>과 <ul>이 없으면 사용할 수 없다.
▪정령된 <ol>의 순서는 중요도를 의미할 수 있다.
🔗<DL>, 🔗<DT>, 🔗<DD>
▪용어(<dt>) 정의(<dd>) 두 쌍의 영역(<dl>)을 설정 한다.
(Description List, Definition Details, Definition Term)
▪<dl>은 <dd>, <dt>만을 포함 한다.
💡키(key)/값(value) 형태를 표시할 때 유용하다.
📺display:block;
<dl>
<dt>커피</dt>
<dd>커피는 쓰고 고소하며 시큼하다, 카페인이 많아 힘들때 마시면 각성효과가 있다.</dd>
<dt>우유</dt>
<dd>우유는 고소하고 담백하며 칼슘 함량이 높아 뼈에 좋다.</dd>
</dl>
🔗<P>, 🔗<HR/>
▪<p>태그는 하나의 문단을 설정 한다. (Paragraph)
💡문장이나 문단(단락)을 만들 때 사용하자
📺display:block;
<p>안녕하세요?</p>▪<hr/>태그는 문단의 분리를 위해 사용된다. (Horizontal Rule)
💡대부분의 경우 수평선(borber)으로 표시 하기 때문에 의미적 관점으로만 사용하자.
📺display:block;
🔗<PRE>
▪<pre> 태그는 서식이 미리 지정된 텍스트를 만든다. (Preformatted Text)
▪기본적으로 모든 글짜의 넓이가 일정한 Monospace 글꼴 계열로 표시됨.
💡<br>태그 등을 사용 하지 않아도 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음.
📺display:block;
🔗<BLOCKQUOTE>
▪<blockquote>태그는 일반적인 인용문을 설정할때 사용한다. (Block Quotation)
| 속성 | 의미 | 값 |
| cite | 인용된 정보의 URL | URL |
📺display:block;
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly—they’ll go through anything.
You read and you’re pierced.</p>
</blockquote>
댓글