HTML 기초 태그 실전 예제

웹 개발의 세계에 발을 들여놓으셨군요! 마치 레고 블록처럼, HTML은 웹 페이지를 구성하는 가장 기본적인 요소들의 뼈대를 담당합니다. 단순한 텍스트를 넘어, 이미지, 링크, 표 등 다양한 콘텐츠를 웹 브라우저가 이해할 수 있도록 구조화하는 핵심 기술이죠.

처음에는 복잡해 보일 수 있지만, 기본적인 HTML 태그들을 익히고 활용하는 방법을 배우면 누구나 자신만의 웹 페이지를 만들 수 있습니다. 요즘은 AI 기반 웹 개발 도구들도 많이 나와서 HTML 학습이 더욱 쉬워졌다고 하니, 정말 멋진 시대입니다. HTML은 단순히 코딩 기술이 아니라, 온라인 세상에 여러분의 아이디어를 표현하는 도구라고 생각하면 더욱 즐겁게 배울 수 있을 거예요.

자, 그럼 HTML 기초 태그의 세계를 더 깊숙이 파고들어, 여러분의 웹 개발 여정을 시작해볼까요? 이제부터 HTML의 기본을 탄탄하게 다져보도록 하겠습니다. 아래 글에서 자세하게 알아봅시다.

## HTML, 웹 페이지의 뼈대를 세우다: 기본 태그 완전 정복웹 개발의 첫걸음을 내딛는 여러분을 위해 HTML의 핵심 태그들을 쉽고 재미있게 풀어보겠습니다. HTML은 웹 페이지의 구조를 정의하는 언어입니다. 마치 집을 지을 때 뼈대를 세우는 것처럼, HTML 태그는 웹 페이지의 제목, 본문, 이미지, 링크 등을 구성하는 데 사용됩니다.

처음에는 생소할 수 있지만, 하나씩 익혀나가면 웹 페이지를 자유자재로 만들 수 있게 될 겁니다. 제가 처음 HTML을 접했을 때, 태그들을 외우는 것보다 실제로 코드를 작성하면서 어떻게 작동하는지 눈으로 확인하는 것이 훨씬 효과적이었습니다. 여러분도 직접 코드를 수정하고 실행하면서 HTML을 배워보세요!

Table of Contents

웹 페이지의 기본 틀: , ,

웹 페이지는 태그로 시작하고 태그로 끝납니다. 이 태그는 웹 페이지의 전체 구조를 감싸는 역할을 합니다. 태그 안에는 와 태그가 들어갑니다.

태그는 웹 페이지의 제목, 스타일시트, 메타 정보 등 웹 브라우저가 알아야 할 정보를 담고 있습니다. 사용자에게는 직접적으로 보이지 않지만, 웹 페이지의 동작 방식과 검색 엔진 최적화에 중요한 역할을 합니다.

태그는 실제로 웹 브라우저에 표시되는 콘텐츠, 즉 텍스트, 이미지, 링크 등을 포함합니다. 웹 페이지의 모든 시각적인 요소는

태그 안에 들어간다고 생각하면 됩니다.

제목과 내용: , ~ </p> <h6>, </h6> <p>

</p> <p>태그는 웹 페이지의 제목을 정의합니다. 이 제목은 웹 브라우저의 탭이나 창 제목 표시줄에 표시되며, 검색 엔진 결과 페이지에도 나타납니다.</p> <h1> ~ </p> <h6> 태그는 제목(heading)을 나타냅니다. </p> <h1>이 가장 큰 제목이며, </p> <h6>이 가장 작은 제목입니다. 이 태그들은 웹 페이지의 내용을 구조화하고, 검색 엔진이 페이지의 주제를 파악하는 데 도움을 줍니다. </p> <p> 태그는 단락(paragraph)을 나타냅니다. 텍스트를 </p> <p> 태그로 감싸면 웹 브라우저는 해당 텍스트를 하나의 단락으로 인식하고 적절한 간격을 추가합니다.* <title>: 웹 페이지의 제목<br /> * </p> <h1> ~ </p> <h6>: 제목 (heading)<br /> * </p> <p>: 단락 (paragraph)</p> <h2>텍스트를 꾸미는 마법: <strong>, <em>, <br /></em></strong></h2> <p>HTML은 텍스트를 단순히 보여주는 것 이상의 기능을 제공합니다. <strong></p> <p>태그는 텍스트를 굵게 표시하여 강조하는 데 사용됩니다. 중요한 정보나 핵심 내용을 강조할 때 유용합니다.</p> <p><em></p> <p>태그는 텍스트를 기울임꼴로 표시하여 강조합니다. 뉘앙스를 전달하거나 특정 단어를 강조할 때 효과적입니다.</p> <p></p> <p>태그는 줄 바꿈(line break)을 삽입합니다. 텍스트가 너무 길어서 한 줄에 다 표시하기 어렵거나, 특정 위치에서 줄을 바꿔야 할 때 사용합니다. 제가 블로그 글을 쓸 때,</p> <p><strong> 태그를 사용하여 독자들의 눈길을 사로잡고, <em> 태그를 사용하여 글의 흐름을 자연스럽게 만들곤 합니다.</p> <h3> 텍스트 강조: <strong>와 <em> </em></strong></h3> <p><strong></p> <p>태그는 텍스트를 굵게 표시하여 독자들에게 ‘이 부분은 정말 중요해!’라고 외치는 듯한 효과를 줍니다. 예를 들어, 쇼핑몰 웹사이트에서 할인 정보를 강조하거나, 뉴스 기사에서 핵심 내용을 부각할 때 사용할 수 있습니다.</p> <p><em> 태그는 텍스트를 기울임꼴로 만들어 줍니다. <strong></p> <p>만큼 강렬하지는 않지만, 은근하게 강조하는 느낌을 줍니다. 예를 들어, 소설에서 등장인물의 속마음을 표현하거나, 영화 리뷰에서 특정 장면의 분위기를 묘사할 때 사용할 수 있습니다.</p> <h3> 줄 바꿈: <br /> </h3> <p></p> <p>태그는 텍스트를 강제로 줄 바꿈하는 역할을 합니다. 일반적인 텍스트 편집기에서 Enter 키를 누르는 것과 같은 효과를 냅니다. 하지만 HTML에서는 Enter 키를 눌러도 줄 바꿈이 되지 않기 때문에,</p> <p> 태그를 사용해야 합니다. 예를 들어, 시를 웹 페이지에 표시할 때 각 행을 <br /> 태그로 구분하거나, 주소 정보를 여러 줄로 표시할 때 사용할 수 있습니다.* <strong>: 텍스트 굵게 표시 (중요 강조)<br /> * <em>: 텍스트 기울임꼴 표시 (뉘앙스 강조)<br /> * <br />: 줄 바꿈</p> <h2>이미지를 내 맘대로: <img/></h2> <p><img/></p> <p>태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. src 속성을 사용하여 이미지 파일의 경로를 지정하고, alt 속성을 사용하여 이미지를 설명하는 텍스트를 제공해야 합니다. alt 속성은 이미지가 로드되지 않을 때 대신 표시되는 텍스트이며, 시각 장애인을 위한 스크린 리더가 이미지를 설명하는 데 사용되기도 합니다.</p> <p>저는 개인적으로 웹 페이지에 이미지를 넣을 때, alt 속성에 최대한 자세하고 명확하게 이미지를 설명하는 텍스트를 넣으려고 노력합니다. 이는 사용자 경험을 개선하고, 검색 엔진 최적화에도 도움이 됩니다.</p> <h3> 이미지 삽입의 기본: src 속성과 alt 속성 </h3> <p><img/></p> <p>태그의 핵심은 src 속성과 alt 속성입니다. src 속성은 이미지 파일이 어디에 있는지 알려주는 역할을 합니다. 마치 내비게이션 앱에 목적지 주소를 입력하는 것과 같습니다.</p> <p>alt 속성은 이미지에 대한 설명을 제공합니다. 만약 이미지가 깨지거나 로딩되지 않을 경우, alt 속성에 적힌 텍스트가 대신 표시됩니다. 또한, 시각 장애인들을 위한 스크린 리더는 alt 속성의 텍스트를 읽어 이미지에 대한 정보를 전달합니다.</p> <h3> 이미지 크기 조절: width 속성과 height 속성 </h3> <p><img/></p> <p>태그는 width 속성과 height 속성을 사용하여 이미지의 크기를 조절할 수 있습니다. 하지만 주의해야 할 점은, 이미지의 가로 세로 비율을 유지하면서 크기를 조절해야 한다는 것입니다. 그렇지 않으면 이미지가 찌그러지거나 늘어나 보일 수 있습니다.</p> <p>CSS 스타일을 사용하여 이미지 크기를 조절하는 것이 더 권장되는 방법입니다. * src 속성: 이미지 파일 경로 지정<br /> * alt 속성: 이미지 설명 텍스트 제공<br /> * width 속성, height 속성: 이미지 크기 조절 (CSS 사용 권장)</p> <h2>링크로 연결되는 세상: <a></a></h2> <p><a></p> <p>태그는 하이퍼링크(hyperlink)를 만드는 데 사용됩니다. href 속성을 사용하여 링크할 URL을 지정하고, target 속성을 사용하여 링크를 새 창에서 열지, 현재 창에서 열지를 결정할 수 있습니다.</p> <p><a></p> <p>태그는 웹 페이지를 서로 연결하고, 사용자가 원하는 정보에 쉽게 접근할 수 있도록 도와주는 중요한 요소입니다. 제가 웹 페이지를 만들 때,</p> <p><a> 태그를 사용하여 관련 정보를 제공하거나, 다른 웹사이트로 연결되는 링크를 제공하여 사용자 경험을 향상시키려고 노력합니다.</p> <h3> 링크의 기본: href 속성과 target 속성 </h3> <p><a></p> <p>태그의 핵심은 href 속성과 target 속성입니다. href 속성은 링크가 가리키는 웹 페이지의 주소를 지정합니다. 마치 지도 앱에 목적지 주소를 입력하는 것과 같습니다.</p> <p>target 속성은 링크를 클릭했을 때 웹 페이지를 어떻게 열 것인지 지정합니다. _blank 값을 사용하면 새 창이나 새 탭에서 웹 페이지가 열리고, _self 값을 사용하면 현재 창에서 웹 페이지가 열립니다.</p> <h3> 다양한 링크 활용: 내부 링크, 외부 링크, 이메일 링크 </h3> <p><a></p> <p>태그는 다양한 유형의 링크를 만들 수 있습니다. 내부 링크는 웹 사이트 내의 다른 페이지로 연결하는 링크이고, 외부 링크는 다른 웹 사이트로 연결하는 링크입니다. 이메일 링크는 사용자의 이메일 클라이언트를 열고 특정 주소로 이메일을 보내도록 하는 링크입니다.</p> <p>이메일 링크를 사용하려면 href 속성에 “mailto:” 접두사를 붙이고 이메일 주소를 지정하면 됩니다. * href 속성: 링크할 URL 지정<br /> * target 속성: 링크를 열 창 지정 (_blank: 새 창, _self: 현재 창)<br /> * 내부 링크, 외부 링크, 이메일 링크</p> <h2>목록을 깔끔하게: </p> <ul>, </p> <ol>, </p> <li></li> </ol> </ul> </h2> <ul> 태그는 순서 없는 목록(unordered list)을 만들고, </p> <ol> 태그는 순서 있는 목록(ordered list)을 만듭니다. </p> <li> 태그는 목록의 각 항목(list item)을 나타냅니다. 목록은 정보를 구조화하고, 가독성을 높이는 데 유용합니다. 제가 웹 페이지에 여러 항목을 나열해야 할 때, <ul> 또는 </p> <ol> 태그를 사용하여 목록을 만들고, 각 항목을 </p> <li> 태그로 감싸서 깔끔하게 정리합니다.<br /> <h3> 순서 없는 목록: </p> <ul>과 </p> <li> </li> </ul> </h3> <ul> <p>태그는 글머리 기호(bullet point)를 사용하여 목록을 표시합니다. 항목의 순서가 중요하지 않을 때 사용합니다. 예를 들어, 웹 사이트의 메뉴, 블로그 글의 태그 목록, 쇼핑몰 상품의 특징 목록 등을 만들 때 사용할 수 있습니다.</p> <p>각 항목은</p> <li> 태그로 감싸야 합니다.<br /> <h3> 순서 있는 목록: </p> <ol>과 </p> <li> </li> </ol> </h3> <ol> <p>태그는 숫자를 사용하여 목록을 표시합니다. 항목의 순서가 중요할 때 사용합니다. 예를 들어, 요리 레시피, 사용 설명서, 시험 문제 등을 만들 때 사용할 수 있습니다.</p> <p>각 항목은</p> <li> 태그로 감싸야 합니다. <ol> <p>태그는 type 속성을 사용하여 숫자의 종류를 변경할 수 있습니다. (예: type=”1″ – 숫자, type=”A” – 대문자, type=”a” – 소문자, type=”I” – 로마 숫자 대문자, type=”i” – 로마 숫자 소문자)*</p> <ul>: 순서 없는 목록 (글머리 기호)<br /> * </p> <ol>: 순서 있는 목록 (숫자)<br /> * </p> <li>: 목록 항목<br /> <h2>표로 정리정돈: </p> <table>, </p> <tr>, </p> <td>, </p> <th></th> </td> </tr> </table> </h2> <table> 태그는 표를 만들고, </p> <tr> 태그는 표의 행(table row)을 나타냅니다. </p> <td> 태그는 표의 셀(table data)을 나타내고, </p> <th> 태그는 표의 제목 셀(table header)을 나타냅니다. 표는 데이터를 체계적으로 정리하고 표시하는 데 유용합니다. 제가 웹 페이지에 데이터를 표시해야 할 때, </p> <table> <p>태그를 사용하여 표를 만들고, 각 행과 셀에 데이터를 채워 넣어 깔끔하게 정리합니다. | 태그 | 설명 |<br /> |—|—|<br /> |</p> <table> | 표를 정의합니다. |<br /> | </p> <tr> | 표의 행을 정의합니다. |<br /> | </p> <td> | 표의 셀(데이터)을 정의합니다. |<br /> | </p> <th> | 표의 헤더 셀을 정의합니다. |</p> <h2>표 만들기: </p> <table>, </p> <tr>, </p> <td></td> </tr> </table> </h2> <table> 태그는 표의 전체 구조를 정의합니다. 마치 엑셀 시트 전체를 감싸는 것과 같습니다. </p> <tr> 태그는 표의 행을 정의합니다. 엑셀 시트에서 가로로 뻗은 줄이라고 생각하면 됩니다. </p> <td> 태그는 표의 각 셀을 정의합니다. 엑셀 시트에서 각 칸에 들어가는 데이터라고 생각하면 됩니다.</p> <h2>표 제목 만들기: </p> <th></th> </h2> <th> 태그는 표의 제목 셀을 정의합니다. 일반적으로 표의 맨 윗줄이나 맨 왼쪽 열에 위치하며, 각 열이나 행의 내용을 설명하는 역할을 합니다. </p> <td> 태그와 마찬가지로 </p> <tr> 태그 안에 위치해야 합니다.* </p> <table>: 표 전체 구조 정의<br /> * </p> <tr>: 표의 행 정의<br /> * </p> <td>: 표의 셀 정의<br /> * </p> <th>: 표의 제목 셀 정의</p> <h2>HTML, 무한한 가능성의 시작</h2> <p>지금까지 HTML의 기본적인 태그들을 살펴보았습니다. 이 태그들을 조합하고 응용하면, 여러분은 상상하는 모든 웹 페이지를 만들 수 있습니다. HTML은 웹 개발의 시작일 뿐입니다. CSS, JavaScript 와 같은 다른 기술들을 함께 배우면 더욱 멋지고 동적인 웹 페이지를 만들 수 있습니다. 웹 개발은 끊임없이 배우고 성장하는 분야입니다. 포기하지 않고 꾸준히 노력하면, 여러분도 훌륭한 웹 개발자가 될 수 있습니다. 제가 처음 웹 개발을 시작했을 때, 수많은 에러와 시행착오를 겪었습니다. 하지만 포기하지 않고 꾸준히 공부하고 코드를 작성하면서 실력이 향상되는 것을 느꼈습니다. 여러분도 자신감을 가지고 웹 개발에 도전해 보세요!HTML 태그들을 하나하나 정복해 나가면서 웹 페이지의 기본을 다지는 여정이 어떠셨나요? 처음에는 복잡해 보일 수 있지만, 꾸준히 연습하고 다양한 예제를 따라 하다 보면 어느새 HTML의 매력에 푹 빠져 있을 겁니다. 여러분의 웹 개발 여정을 응원하며, HTML을 통해 무한한 가능성을 펼쳐나가시길 바랍니다!</p> <h2>글을 마치며</h2> <p>지금까지 HTML의 기본적인 태그들을 살펴보았습니다. 이 태그들을 조합하고 응용하면, 여러분은 상상하는 모든 웹 페이지를 만들 수 있습니다. HTML은 웹 개발의 시작일 뿐입니다. CSS, JavaScript 와 같은 다른 기술들을 함께 배우면 더욱 멋지고 동적인 웹 페이지를 만들 수 있습니다. 웹 개발은 끊임없이 배우고 성장하는 분야입니다. 포기하지 않고 꾸준히 노력하면, 여러분도 훌륭한 웹 개발자가 될 수 있습니다. 제가 처음 웹 개발을 시작했을 때, 수많은 에러와 시행착오를 겪었습니다. 하지만 포기하지 않고 꾸준히 공부하고 코드를 작성하면서 실력이 향상되는 것을 느꼈습니다. 여러분도 자신감을 가지고 웹 개발에 도전해 보세요!</p> <h2>알아두면 쓸모 있는 정보</h2> <p>1. HTML 유효성 검사: 작성한 HTML 코드가 W3C 표준을 준수하는지 확인하여 웹 표준에 맞는 코드를 작성하세요.</p> <p>2. CSS와 함께 사용: HTML은 웹 페이지의 구조를 담당하고, CSS는 디자인을 담당합니다. HTML과 CSS를 함께 사용하면 더욱 멋진 웹 페이지를 만들 수 있습니다.</p> <p>3. JavaScript 와 함께 사용: JavaScript 는 웹 페이지에 동적인 기능을 추가하는 데 사용됩니다. HTML, CSS, JavaScript 를 함께 사용하면 사용자 인터랙티브한 웹 페이지를 만들 수 있습니다.</p> <p>4. 웹 접근성 준수: 모든 사용자가 웹 페이지를 쉽게 이용할 수 있도록 웹 접근성 지침을 준수하세요. (예: alt 속성 사용, 적절한 제목 태그 사용)</p> <p>5. SEO 최적화: 검색 엔진이 웹 페이지를 잘 이해할 수 있도록 제목, 설명, 키워드 등을 적절하게 사용하세요.</p> <h2>중요 사항 정리</h2> <p>* HTML은 웹 페이지의 구조를 정의하는 언어입니다.<br /> * <html>, <head>, <body> 태그는 웹 페이지의 기본 틀을 구성합니다.<br /> * <title>, </p> <h1> ~ </p> <h6>, </p> <p> 태그는 제목과 내용을 나타냅니다.<br /> * <strong>, <em>, <br /> 태그는 텍스트를 꾸미는 데 사용됩니다.<br /> * <img/> 태그는 이미지를 삽입하고, <a> 태그는 링크를 만듭니다.<br /> * </p> <ul>, </p> <ol>, </p> <li> 태그는 목록을 만들고,<br /> <table>, </p> <tr>, </p> <td>, </p> <th> 태그는 표를 만듭니다.</p> <div style="background-color: #f9f9f9; padding: 20px; border-radius: 5px; margin: 20px 0; border: 1px solid #ccc;"> <p style="font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 20px;">자주 묻는 질문 (FAQ) 📖</p> <div style="margin-bottom: 20px;"> <p style="font-weight: bold; margin: 0 0 8px 0; font-size: 16px;">질문: HTML 태그는 꼭 닫아줘야 하나요? 안 닫으면 어떻게 되나요?</p> <p style="margin: 0 0 0 20px; line-height: 1.7;">답변: 네, HTML 태그는 대부분 닫아주는 게 원칙이에요. 안 닫으면 웹 브라우저가 어디까지가 해당 요소인지 제대로 판단하지 못해서 페이지가 엉망으로 보일 수 있어요. 특히 나 같은 블록 요소는 꼭 닫아줘야 다른 요소들과의 구분이 명확해지죠.<br />가끔 닫지 않아도 브라우저가 알아서 처리해주는 경우도 있지만, 예상치 못한 오류를 막으려면 닫는 습관을 들이는 게 좋아요. HTML 검사기 같은 도구를 사용해서 닫히지 않은 태그를 찾아 수정하는 것도 좋은 방법이고요.</p> </div> <div style="margin-bottom: 20px;"> <p style="font-weight: bold; margin: 0 0 8px 0; font-size: 16px;">질문: HTML 배우기 전에 다른 프로그래밍 언어를 먼저 배워야 할까요?</p> <p style="margin: 0 0 0 20px; line-height: 1.7;">답변: 꼭 그럴 필요는 없어요. HTML은 프로그래밍 언어라기보다는 웹 페이지의 구조를 정의하는 마크업 언어에 더 가깝거든요. HTML부터 시작해서 웹 페이지의 기본 틀을 만들고, 필요에 따라 CSS로 디자인을 입히고, JavaScript 로 동적인 기능을 추가하는 순서로 배우는 게 일반적이에요.<br />마치 집을 지을 때 기초 공사부터 차근차근 하는 것처럼요. 물론 다른 언어를 먼저 배우면 HTML을 더 쉽게 이해할 수도 있겠지만, HTML 자체는 입문 장벽이 낮은 편이라 부담 없이 시작할 수 있을 거예요.</p> </div> <div style="margin-bottom: 20px;"> <p style="font-weight: bold; margin: 0 0 8px 0; font-size: 16px;">질문: HTML 파일을 만들었는데, 왜 웹 브라우저에서 안 보일까요?</p> <p style="margin: 0 0 0 20px; line-height: 1.7;">답변: 몇 가지 이유가 있을 수 있어요. 먼저, 파일 확장자가 또는 으로 제대로 저장되었는지 확인해보세요. 그리고 웹 브라우저에서 “파일 > 열기” 메뉴를 사용해서 해당 HTML 파일을 직접 열어보세요.<br />만약 코드가 잘못되었다면, 브라우저의 개발자 도구(F12 키)를 열어서 오류 메시지를 확인해볼 수 있어요. 예를 들어, 닫히지 않은 태그나 잘못된 속성 값이 있다면 오류 메시지가 뜰 거예요. 또, 웹 서버를 사용하고 있다면 파일 경로가 올바르게 설정되었는지도 확인해야 합니다.<br />처음에는 사소한 실수가 많을 수 있지만, 하나씩 해결해나가면서 실력이 늘 거예요.</p> </div> </div> </th> </td> </tr> </table> </li> </ol> </ul> <p></a></em></strong></p> </h6> </h1> <p>