HTML 알아보기

웹을 공부할 때 등장하는 HTML, CSS, Javascript는 무슨 역할을 할까요?

이번 포스트에서는 웹 페이지의 구성을 담당하는 HTML에 대해서 알아보겠습니다.

---

태그

HTML은 마크업 언어로 문서의 뼈대를 구성하기 위한 마크 즉, 태그가 존재합니다.

아래 예시처럼, 일반적으로 여는 태그와 닫는 태그 안에 콘텐츠를 작성합니다.

<p> My name is Subin </p>

하지만, 콘텐츠를 필요로 하지 않는 태그도 있습니다.

이를 빈 요소라고 하는데, 이 경우에는 닫는 태그를 사용하지 않습니다.

이제 미리 정의된 각 태그가 어떤 역할을 하는지 알아볼까요?

 

Heading

제목을 나타낼 때 사용하는 태그입니다.

태그 이름에 있는 숫자는 6까지 있고 클수록 제목은 작아집니다.

<h1> 제목 태그입니다. </h1>
<h2> 이것은 더 작은 제목 태그입니다. </h2>

제목 태그입니다.

이것은 더 작은 제목 태그입니다.

 

Paragraph

단락을 구성하기 위해 사용하는 태그입니다.

<p> 이 태그로 문단을 구분할 수 있습니다. </p>
<p> 두 번째 문단입니다. </p>

이 태그로 문단을 구분할 수 있습니다.

두 번째 문단입니다.

 

Anchor

하이퍼링크를 만드는 태그입니다.

<a href="https://www.kakaocorp.com/page/"> 카카오 바로가기 </a>

카카오 바로가기

 

List

목록을 만드는 태그입니다.

단독으로 쓸 수 없으며, 정렬 목록인 'ol' 태그나 비정렬 목록인 'ul' 태그 안에 위치해야 합니다.

<p> 블로그 포스팅 순서 </p>
<ol>
  <li> 데스크탑 전원 켜기 </li>
  <li> 계정 로그인 하기 </li>
  <li> 글쓰기 </li>
</ol>

<p> 빙그레 아이스크림 목록 </p>
<ul>
  <li> 투게더 </li>
  <li> 호두마루 </li>
  <li> 빵또아 </li>
</ul>

블로그 포스팅 순서

1. 데스크탑 전원 켜기
2. 계정 로그인 하기
3. 글쓰기

빙그레 아이스크림 목록

• 투게더
• 호두마루
• 빵또아

 

Form

정보 제출을 위해서 기입하기 위한 구역을 만들 때 사용합니다.

 

Input

사용자에게 데이터를 받기 위해 필드를 제공합니다.

<form>
  아이디: <input>
</form>

아이디:

 

Division

문서에서 영역을 구분할 때 사용하는 태그입니다.

이 요소만으로는 아무것도 나타내지 않지만, 콘텐츠를 그룹화하여 쉽게 스타일을 지정할 수 있습니다.

 

Span

<div>와 매우 유사하지만 인라인 요소라는 차이점이 있습니다.

 

블록 요소과 인라인 요소

블록 요소는 태그가 좌우의 공간을 모두 차지하는 요소를 의미합니다.

블록 요소에는 <h1>~<h6>, <p>, <ul>, <ol>, <li>, <form> 등이 있습니다.

인라인 요소는 태그가 내용의 크기만큼만 영역을 차지하는 요소를 의미합니다.

인라인 요소에는 <a>, <input>, <span> 등이 있습니다.

---

HTML의 태그를 잘 활용하면 충분히 구조화된 웹 페이지를 작성할 수 있을 것 같습니다.

포스트를 끝까지 봐주셔서 감사합니다!