코딩 초보자를 위한 HTML 기초 태그
HTML의 기초 이해하기
HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본적인 언어로, 주로 웹 콘텐츠의 구조와 형식을 정의하는 데 사용됩니다. 이 글에서는 HTML의 주요 태그들에 대해 알아보고, 실습을 통해 HTML을 빠르게 익힐 수 있도록 도와드리겠습니다.
웹 페이지 요청 및 소스 보기
최초로 웹 페이지를 생성하기 위해, 브라우저를 활용하여 다양한 웹 사이트를 방문해 봅시다. 예를 들어, 크롬 웹 브라우저를 실행한 후, URL 입력창에 http://www.naver.com 혹은 http://www.apple.com와 같은 주소를 입력하고 엔터키를 눌러보세요.
그 후에는 마우스 오른쪽 버튼을 클릭하여, ‘페이지 소스 보기’를 통해 웹 페이지의 소스 코드를 확인할 수 있습니다. 이때 보이는 HTML 코드는 해당 페이지의 구조를 나타내며, 이를 통해 HTML이 어떻게 작동하는지 이해할 수 있습니다.
HTML 문서의 기본 구조
HTML 문서는 기본적으로 다음과 같은 구조로 이루어져 있습니다.
<!DOCTYPE html>: 문서의 타입을 정의합니다.<html>: HTML 문서의 시작을 나타내는 태그입니다.<head>: 문서의 메타 정보를 포함하며, 제목, 문자 인코딩 등을 설정합니다.<body>: 실제 웹 페이지에서 사용자에게 보여지는 콘텐츠를 포함합니다.
HTML의 기본 태그 활용하기
이번에는 HTML의 여러 가지 기본 태그를 살펴보겠습니다.
제목 및 문단 태그 사용하기
HTML에서는 제목을 정의하기 위해 <h1>부터 <h6>까지의 태그를 사용할 수 있습니다. <p> 태그는 문단을 구성하는 데 사용되며, <br> 태그는 줄 바꿈을 할 때 사용됩니다.
예를 들어:
<h1>메인 제목</h1> <p>이곳은 첫 번째 문단입니다.</p> <br> <p>이곳은 두 번째 문단입니다.</p>
텍스트 형식 태그
텍스트를 강조하고 싶을 때 사용하는 태그로는 <b>, <i>, <strong>, <em> 등이 있습니다. 이 태그들은 텍스트의 시각적인 표현을 변경하여 주의를 끌 수 있게 도와줍니다.
목록 만들기
HTML에서는 두 가지 종류의 목록을 사용할 수 있습니다. 순서가 있는 목록과 순서가 없는 목록입니다.
- 순서가 있는 목록은
<ol>태그로 생성합니다. - 순서가 없는 목록은
<ul>태그로 생성합니다.
각 항목은 <li> 태그를 사용하여 작성할 수 있습니다. 예시로:
<ol> <li>첫 번째 항목</li> <li>두 번째 항목</li> </ol> <ul> <li>첫 번째 항목</li> <li>두 번째 항목</li> </ul>
하이퍼링크와 이미지 활용하기
HTML에서는 웹 페이지 간의 연결을 위해 <a> 태그를 사용합니다. 이 태그를 통해 다른 웹 페이지로 이동할 수 있는 링크를 만들 수 있습니다.
예를 들어, 가천대학교로 연결되는 하이퍼링크는 다음과 같이 작성할 수 있습니다:
<a href="http://www.kaist.ac.kr">가천대학교로 가기</a>
이미지를 삽입할 때는 <img> 태그를 사용하며, 이미지의 경로와 대체 텍스트를 지정해 주어야 합니다:
<img src="이미지경로" alt="이미지설명">
테이블 만들기
HTML 테이블은 <table> 태그를 사용하여 작성됩니다. 테이블의 행은 <tr> 태그로, 열은 <td> 태그로 정의합니다. 테이블의 제목은 <th> 태그를 사용하여 작성할 수 있습니다.
<table> <tr> <th>헤더1</th> <th>헤더2</th> </tr> <tr> <td>데이터1</td> <td>데이터2</td> </tr> </table>
입력 양식 활용하기
HTML에서는 <form> 태그를 통해 다양한 사용자 입력 양식을 만들 수 있습니다. 예를 들어, 텍스트 입력창, 버튼, 체크박스 등을 구현할 수 있습니다.
<form> <input type="text" placeholder="이름을 입력하세요"> <input type="submit" value="제출"> </form>
이러한 입력 양식을 통해 유저와 상호작용할 수 있는 웹 페이지를 제작할 수 있습니다.
HTML5와 최신 업데이트
HTML의 최신 버전인 HTML5는 다양한 새로운 기능과 태그들을 도입하였습니다. 비디오, 오디오 플레이어와 같은 멀티미디어 콘텐츠를 쉽게 삽입할 수 있는 기능도 포함되어 있습니다.
결론
웹 개발을 시작하기에 앞서 HTML의 기초를 확실히 익히는 것은 매우 중요합니다. 다양한 태그와 그 사용법을 이해하면, 더욱 풍부하고 사용자 친화적인 웹 페이지를 제작할 수 있습니다. 앞으로 실습을 통해 각 태그의 기능을 직접 체험해보시길 권장합니다.
자주 찾는 질문 Q&A
HTML이란 무엇인가요?
HTML은 웹 페이지를 구성하는 언어로, 콘텐츠의 구조와 형식을 정의하는 데 사용됩니다.
HTML 문서의 기본 구조는 어떻게 되나요?
HTML 문서는 보통 <html>, <head>, <body>와 같은 주요 요소들로 이뤄져 있습니다.
HTML에서 하이퍼링크는 어떻게 생성하나요?
하이퍼링크는 <a> 태그를 사용하여 생성하며, href 속성에 URL을 지정하면 됩니다.
HTML5의 주요 특징은 무엇인가요?
HTML5는 비디오, 오디오 등의 멀티미디어 요소를 손쉽게 추가할 수 있는 기능을 제공하여 웹 개발에 혁신을 가져왔습니다.