HTML의 태그

이건 원래 다 공부하기 전까진 published false 상태로 두려고 했는데..
태그에 오타를 내서 올라가 버렸다ㅎㅎ 그냥 공부하면서 틈틈히 추가하겠다.

Header Tag

문서에서 제목을 표시할 때 사용하는 태그
제목 레벨에 따라 <h1> ~ <h6> 까지 사용한다.

<h1>제목 1</h1>
<h2>제목 2</h2>

Paragraph Tag

본문에 해당하는 내용을 표시할 때 사용하는 태그 <p> </p>

<h1>제목 1</h1>
<h2>제목 2</h2>
<p>
	본문 12345 ...
</p>

Line Break Tag

HTML은 마크다운처럼 공백과 개행을 무시한다.
따라서 코드에서 Enter를 입력했다고 해서 개행되지 않는데,
<br> 태그를 쓰면 개행이 가능하다.

<h1>제목 1</h1>
<h2>제목 2</h2>
<p>
	본문 12345 ...<br>
	본문 67890 ...
</p>

실행 결과는 우측과 같다. html_tag

Text Highlight Tag

더 많은 텍스트 관련 태그는 여기

<b> </b>: Bold, 글꼴 굵게
<i> </i>: Italic, 글꼴 기울이게
<u> </u>: UnderLine, 밑줄 긋기
<s> </s>: ~~Strike~~, 취소선 긋기

Link Tag

<a> </a> 태그는 앵커, 링크 등으로 불리며 링크를 만드는데 사용되는 태그이다.

<a href="http://www.naver.com/" target="_blank">네이버</a>

href

링크를 만들기 위해서는 href(hypertext reference) 속성을 가지고 있어야 한다.
href 속성 값은 링크의 목적지인 URL이다.

target

target 속성은 링크된 리소스를 어디에 표시할지 나타내는 속성이다.

_self: 현재 화면에 표시, Default 값
_blank: 새로운 창에 표시
_parent top

Others

이 외에도 많은 속성이 있으니 여기를 참고한다.

Internal Link

<a> </a>를 통해 만들어진 링크는 꼭 외부 페이지로만 이동하진 않는다.
페이지 내부의 특정 요소로 이동할 수 있는데 이를 ‘내부 링크’라고 한다. 내부 링크를 사용할 때는 아래와 같이 href속성에 #을 쓰고 요소의 id 속성값을 적으면 된다.
웹페이지에서 주로 볼 수 있었던 ‘맨 위로 이동’과 같은 버튼이 이에 해당한다.

<a href="#some-element-id">소개로 이동하기</a>
...
<h1 id="some-element-id">소개</h1>

Container

태그에 아무 의미가 없고, 요소를 묶기 위해 사용하는 태그

`<div>` & `<span>`

<div> </div>: 블록 레벨 태그 (블록 단위로 사용)
<span> </span>: 인라인 레벨 태그 (한 줄안에서 사용)

의미가 없는 태그이기 때문에 따로 스타일이 적용되지 않는다.

<div>
	<span>asdf</span> ghjkl;
</div>

list Tag

unordered list

<ul> </ul> 태그는 순서가 없는 리스트를 작성할 때 사용하는 태그이다.

<ul>
    <li>돈</li>
    <li>커피</li>
    <li>의자</li>
</ul>

ordered list

<ol> </ol> 태그는 순서가 있는 리스트를 작성할 때 사용하는 태그이다.

<ol>
    <li>돈을 가지고 카페에 간다.</li>
    <li>커피를 주문한다.</li>
    <li>의자에 앉는다.</li>
</ol>

definition/description list

<dl> </dl> 태그는 용어와 그에 대한 정의 표현을 할 때 사용하는 태그이다.
<dt> </dt>와 <dd> </dd>는 그에 대한 자식 태그로, <dt>는 용어를 나타내는 태그, <dd>는 용어에 대한 설명을 나타내는 태그이다.

<dl>
    <dt>돈</dt>
    <dd>물건의 값.</dd>
    <dd>사물의 가치를 나타냄</dd>
    <dt>의자</dt>
    <dd>사람이 걸터앉는 데 쓰는 기구</dd>
</dl>