[HTML] tag(태그)와 요소 알아보기

안녕하세요. 지난 글에서는 HTML의 기본 구조에 관해 알아보았습니다.

이번 글 부터는 body 태그에 들어가는, 즉 웹페이지의 내용을 구성하는 태그들을 알아보겠습니다.

 

우선 태그의 기본구조입니다.

 

태그 속성

<태그 속성1="속성값1" 속성2="속성값2">내용</태그>

이렇게 내용을 태그로 감싸는 것이 기본 구조입니다. 그리고 이 사용하는 태그에 따라 내용의 성격과 의미를 결정합니다.

예로 <h1> ~ <h6> 의 태그 안에 내용이 들어있다면 그 내용은 제목이라는 의미일 것이고, <p> 안에 들어가면 문단(paragraph), <a> 안에 들어가면 링크로 정의 됩니다.

 

속성과 속성값은 그 태그에 기본적으로 포함되는 내용 또는 임의로 부여하는 내용으로 요소에 실제로 나타내고 싶지 않지만 추가적인 내용을 담을 때 사용합니다.

속성을 사용할 때는 지켜야할 사항이 있습니다.

 

1. 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
2. 속성 이름 다음엔 등호(=)가 붙습니다.
3. 속성 값은 열고 닫는 따옴표("" or '')로 감싸야 합니다.

지식출처 : developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started

HTML 시작하기

앞에 태그의 기본구조를 설명했지만 꼭 열고 닫는 태그만 존재하지는 않습니다.

<hr>, <br>, <img>, <input> 등의 단일요소는 닫는 태그 없이 단독 사용이 가능합니다.

 

참고로 같은 표현력을 가진 언어인 XHTML(Extensible Hypertext Markup Language)은 HTML보다 엄격한 문법을 갖습니다. XHTML을 사용할 경우 단일요소에 꼭 끝을 닫아주어야 합니다. 대문자 사용에도 엄격하게 대응합니다.
<hr />, <br />, <img src="이미지주소" alt="대체텍스트" />

react로 프론트개발 예정이라면...

 

 

요소

<!-- 블록요소 -->
<div>블록 div</div>
<h1>블록 h1</h1>
<h2>블록 h2</h2>
<h3>블록 h3</h3>
<h4>블록 h4</h4>
<h5>블록 h5</h5>
<h6>블록 h6</h6>
</p>블록 p</p>
<ol>
  <li>블록 ol li</li>
  <li>블록 ol li</li>
</ol>
<ul>
  <li>블록 ul li</li>
  <li>블록 ul li</li>
</ul>
<dl>
  <dt>블록 dt</dt>
  <dd>블록 dd</dd>
</dl>
<nav>블록 네비</nav>
<header>블록 헤더</header>
<footer>블록 푸터</footer>
<address>블록 어드레스</address>

<!-- 인라인요소 -->
<img src="http://placehold.it/200x200/3ac6ff/ffffff?text=sample" alt="인라인 img">
<a href="#">인라인 a</a>
<span>인라인 span</span>
<b>인라인 b</b>
<strong>인라인 strong</strong>
<input type="text" placeholder="인라인 input">
<select name="#" id="#">
  <option value="#">인라인 select</option>
  <option value="#">선택지1</option>
  <option value="#">선택지2</option>
</select>
<textarea name="#" id="#" cols="30" rows="10" placeholder="인라인 textarea"></textarea>
<input type="radio" id="chk" placeholder="인라인 input">
<label for="chk">인라인 label</label>
<button>인라인 button</button>

우선 생각나는대로 태그를 나열해보았습니다.

보기 쉽게 위에는 블록요소로, 아래는 인라인요로로 구분을 지었습니다.

 

HTML에는 두 종류의 요소(element)가 있습니다. 블록요소와 인라인 요소 입니다.

블록요소의 정식이름은 블록 레벨 요소(Block-level element)로 MDN에 표기되어 있네요 ㅎ

 

 

<hr>(구분선)을 기준으로 위는 블록요소, 아래는 인라인요소 입니다.

 

• 블록요소는 웹페이지 상에 블록(Block)을 만듭니다. 블록요소는 앞뒤 요소 사이에 한 칸을 전부 차지합니다. 줄바꿈이 일어난다고 생각하면 쉽습니다. 블록요소는 페이지의 구조 분류를 할 때 사용됩니다. 단락(<p>), 목록(ol, ul, dl) 등등이 포함되며 블록요소 끼리의 포함은 가능하나 인라인요소에 포함될 수 없습니다.
• 인라인요소는 블록요소에 포함됩니다. 인라인요소는 블록요소 내에서 특정 단어같은 작은 범위에 사용됩니다. 인라인 요소는 줄바꿈이 되지 않고 작성됩니다.

<p>
	<span>Text</span>
</p>

위의 경우는 블록요소인 <p> 태그 안에 인라인요소 <span>이 잘 포함되어 있는 잘 구성된 태그입니다.

 

<!-- 태그의 닫힘 구조가 꼬임 -->
<p><span>Text</p></span>

<!-- 인라인요소 안에 블록요소가 포함됨 -->
<span>
	<p>Text</p>
</span>

위의 경우는 태그의 구성이 잘못된 경우입니다.

 

html은 에러를 직접적으로 표시해 주지 않아 항상 바른 태그를 작성할 수 있도록 유의해야합니다.

 

 

다음 글에서는 태그들의 종류와 사용 용도에 대해 알아보겠습니다!