텍스트, 링크, 이미지 다루기

<h1>웹사이트 메인 제목</h1>
<h2>섹션 제목</h2>
<h3>하위 섹션 제목</h3>

<p>이것은 하나의 단락입니다. 여러 문장을 포함할 수 있습니다.</p>

<p>이것은 <em>강조된</em> 텍스트이고, 이것은 <strong>매우 중요한</strong> 텍스트입니다.</p>

<blockquote>
   <p>이것은 긴 인용문입니다. 여러 줄에 걸쳐 표시될 수 있습니다.</p>
</blockquote>
<p>그리고 이것은 <q>짧은 인용</q>의 예시입니다.</p>

<p>첫 번째 줄<br>두 번째 줄</p>
<hr>
<p>새로운 섹션</p>

<a href="URL">링크 텍스트</a>

<a href="https://www.example.com">Example 웹사이트</a>

<h2 id="section1">섹션 1</h2>
<p>일부 내용...</p>
<a href="#section1">섹션 1로 이동</a>

<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

<a href="mailto:[email protected]">이메일 보내기</a>

<img src="이미지_파일_경로" alt="대체 텍스트">

<style>
   img {
         max-width: 100%;
         height: auto;
   }
</style>
<img src="example.jpg" alt="반응형 이미지 예시">

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
   <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
   <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
</map>

<a href="profile.html" aria-label="사용자 프로필로 이동">프로필</a>

<article>
    <h1>웹 개발의 기초</h1>
    <p>웹 개발은 <strong>HTML</strong>, <strong>CSS</strong>, 그리고 <strong>자바스크립트</strong>를 기본으로 합니다. 
    이 세 가지 기술을 마스터하면 다양한 웹 애플리케이션을 만들 수 있습니다.</p>
    
    <h2>HTML이란?</h2>
    <img src="html-logo.png" alt="HTML5 로고" width="100" height="100">
    <p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. <em>시맨틱 태그</em>를 사용하여 
    콘텐츠의 의미를 명확히 할 수 있습니다.</p>
    <p>더 자세한 정보는 <a href="https://developer.mozilla.org/ko/docs/Web/HTML" 
    target="_blank">MDN Web Docs</a>에서 확인할 수 있습니다.</p>
 
    <h2>학습 리소스</h2>
    <ul>
        <li><a href="#html-tutorial">HTML 튜토리얼</a></li>
        <li><a href="#css-tutorial">CSS 튜토리얼</a></li>
        <li><a href="#js-tutorial">자바스크립트 튜토리얼</a></li>
    </ul>
 
    <hr>
 
    <footer>
        <p>질문이 있으신가요? <a href="mailto:[email protected]">이메일로 문의하기</a></p>
    </footer>
</article>