HTML 강의 Ep04_1 - HTML 폰트(Font) 태그 | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요?

📘 HTML 태그 소개

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 제작하는 데 필수적인 언어입니다. HTML을 통해 문서의 구조를 정의하고, 텍스트, 이미지, 링크 등 다양한 요소를 삽입할 수 있습니다. HTML 태그는 대개 열고 닫는 쌍으로 구성되어 있으며, 속성을 통해 요소의 성격을 자세히 설명할 수 있습니다. 웹 페이지의 제목을 정의하는 <h1>부터 <h6> 태그, 본문을 구성하는 <p> 태그, 줄바꿈을 위한 <br> 태그 등 다양한 태그가 존재합니다. 이러한 태그들을 적절히 사용함으로써 웹 페이지의 구조와 디자인을 체계적으로 구성할 수 있습니다.

🎨 글꼴 관련 태그

글꼴 관련 태그는 웹 페이지의 텍스트를 스타일링하는 데 사용됩니다. 제목을 표시하는 <h1>부터 <h6> 태그는 제목의 크기와 중요도를 나타내며, <p> 태그는 문단을 정의하는 데 사용됩니다. 또한, <hr> 태그는 가로 선을 그어 구분선을 표시할 수 있습니다. 이러한 태그들은 콘텐츠를 시각적으로 구분하고 사용자가 정보를 쉽게 이해할 수 있도록 돕습니다. 실습을 통해 다양한 글꼴 태그를 적용해보고, HTML 문서에 어떻게 영향을 미치는지 확인해보세요.

📋 목록과 표 태그

목록과 표 태그는 정보를 체계적으로 나열하거나 비교할 때 유용합니다. <ul>과 <ol> 태그는 각각 순서 없는 목록과 순서 있는 목록을 나타내며, <li> 태그는 목록의 각 항목을 정의합니다. 또한, <table> 태그는 데이터를 행과 열로 구조화하여 표시할 수 있습니다. 이러한 태그들은 데이터를 명확하게 전달하고, 정보의 흐름을 이해하기 쉽게 만들어 줍니다. 다양한 목록과 표 태그를 활용하여 데이터를 효과적으로 표현해보세요.

🖋️ 이탤릭과 강조 태그

텍스트를 강조하거나 이탤릭체로 표시하기 위해 <i>와 <em>, <b>와 <strong> 태그를 사용할 수 있습니다. <i>와 <em> 태그는 텍스트를 이탤릭체로 나타내지만, <em>은 의미적으로 더 중요한 부분을 강조합니다. 마찬가지로 <b>와 <strong> 태그는 텍스트를 볼드체로 표시하며, <strong>은 스크린 리더가 강조하여 읽도록 설계되었습니다. 이러한 태그들을 적절히 사용하면 웹 페이지의 접근성을 높이고, 중요한 정보를 효과적으로 전달할 수 있습니다.

🏷️ 웹 접근성과 태그

웹 접근성은 모든 사용자가 웹 콘텐츠를 쉽게 이용할 수 있도록 설계하는 것을 의미합니다. <strong>과 <em> 태그는 시각장애인을 위한 스크린 리더가 강조하여 읽도록 돕기 때문에 웹 접근성 향상에 기여합니다. 웹 페이지를 제작할 때 이러한 태그들을 적절히 사용하는 것은 매우 중요합니다. 웹 접근성을 고려한 태그 사용은 사용자의 경험을 향상시키고, 더 많은 사람들이 콘텐츠에 접근할 수 있도록 도와줍니다.

🌐 공식사이트

HTML 공식 문서