두 번째 날 학습 강의
안녕하세요! HTML을 배우는 두 번째 날이에요. 오늘은 HTML의 요소와 속성에 대해 좀 더 깊이 있게 배워볼 거예요. HTML 문서를 구성하는 기본 요소들을 이해하고, 다양한 속성을 사용하여 웹페이지를 더욱 풍부하게 만드는 방법을 학습할 거예요.
HTML 요소의 이해
HTML 요소는 웹페이지의 구조와 내용을 정의하는 중요한 구성 요소예요. 각 요소는 시작 태그와 종료 태그로 이루어져 있으며, 그 사이에 내용이 들어가요. 예를 들어, <p> 여기에 문단이 들어갑니다. </p>와 같이 작성해요. <p>는 문단을 나타내는 태그로, 문서의 한 부분을 구분하고 정리하는 데 사용돼요. HTML 요소는 크게 블록 요소와 인라인 요소로 나눌 수 있어요. 블록 요소는 새로운 줄에서 시작하고, 화면 전체 너비를 차지해요. 대표적인 블록 요소로는 <div>, <p>, <h1> 등이 있어요. 반면에 인라인 요소는 줄 바꿈 없이 같은 줄에 나란히 배치되며, 콘텐츠의 너비만큼만 차지해요. 대표적인 인라인 요소로는 <span>, <a>, <img> 등이 있어요.
<div>
<h1>이것은 블록 요소입니다 </h1>
<p>이것도 블록 요소입니다 </p>
</div>
<span>이것은 인라인 요소입니다 </span>
<a href="#">링크도 인라인 요소입니다 </a>
이 예제에서 <div>와 <h1>, <p>는 블록 요소이고, <span>과 <a>는 인라인 요소예요. 블록 요소와 인라인 요소를 적절히 사용하면, 웹페이지의 레이아웃을 더 효율적으로 구성할 수 있어요.
HTML 속성의 이해
HTML 속성은 태그에 추가 정보를 제공해요. 속성은 항상 시작 태그 안에 작성되며, 속성명="속성값" 형식을 따르죠. 예를 들어, <a href="https://www.example.com"> 링크 </a>에서 href는 속성명이고, "https://www.example.com"은 속성값이에요. HTML에는 다양한 속성이 있지만, 자주 사용하는 몇 가지 속성을 살펴볼게요.
href: <a> 태그에서 사용되며, 링크할 URL을 지정해요.
src: <img> 태그에서 사용되며, 이미지를 불러올 경로를 지정해요.
alt: <img> 태그에서 사용되며, 이미지가 로드되지 않을 때 표시할 대체 텍스트를 지정해요.
class: 요소에 스타일을 적용할 때 사용되며, CSS와 함께 사용돼요.
id: 요소에 고유한 식별자를 부여하며, 자바스크립트나 CSS에서 특정 요소를 선택할 때 사용돼요.
<a href="https://www.example.com">여기를 클릭하세요 </a>
<img src="image.jpg" alt="이미지 설명">
<p class="text-bold">이 문단은 굵은 글씨로 표시됩니다. </p>
<div id="main-content">여기는 메인 콘텐츠 영역입니다. </div>
이 예제에서 각각의 속성들이 어떻게 사용되는지 알 수 있어요. 각 속성은 특정한 목적을 가지고 있으며, 이를 통해 HTML 요소를 더 유연하고 기능적으로 만들 수 있어요.
링크와 이미지 삽입하기
웹페이지에서 링크와 이미지를 삽입하는 방법을 알아볼게요.
링크 삽입
링크를 삽입하려면 <a> 태그를 사용해요. href 속성에 링크할 URL을 지정하고, 링크 텍스트를 태그 사이에 넣으면 돼요.
<a href="https://www.example.com">Example 사이트로 이동 </a>
이 코드는 "Example 사이트로 이동"이라는 텍스트를 클릭하면 지정된 URL로 이동하게 해요. 링크는 다른 웹페이지로의 이동을 가능하게 하며, 내비게이션을 구현할 때 필수적이에요.
이미지 삽입
이미지를 삽입하려면 <img> 태그를 사용해요. src 속성에 이미지 파일의 경로를, alt 속성에 이미지가 로드되지 않을 때 표시할 대체 텍스트를 지정해요.
<img src="image.jpg" alt="아름다운 풍경">
이 코드는 "image.jpg" 파일을 웹페이지에 표시하고, 이미지가 로드되지 않을 경우 "아름다운 풍경"이라는 텍스트를 대신 표시해요. 이미지 삽입은 웹페이지를 시각적으로 더 풍부하게 만들어줘요.
리스트 만들기
HTML에서 리스트를 만들 때는 순서가 있는 리스트와 없는 리스트를 사용할 수 있어요.
순서가 있는 리스트
순서가 있는 리스트는 <ol> 태그를 사용하며, 각 항목은 <li> 태그로 감싸요.
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
이 코드는 1, 2, 3 순서로 번호가 매겨진 리스트를 만들어요.
순서가 없는 리스트
순서가 없는 리스트는 <ul> 태그를 사용하며, 각 항목은 <li> 태그로 감싸요.
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
이 코드는 번호가 없는 리스트를 만들며, 각 항목은 점으로 표시돼요.
리스트 태그를 사용하면 항목들을 체계적으로 정리할 수 있으며, 가독성을 높여줘요.
HTML 연습
HTML을 잘 배우려면 많이 연습하는 것이 중요해요. 직접 코드를 작성해 보고, 다양한 예제를 만들어보세요. 코드를 작성하면서 문법과 구조를 익히고, 브라우저에서 결과를 확인해 보는 것이 좋아요. 다른 웹사이트의 소스 코드를 분석해 보는 것도 큰 도움이 돼요.
연습 예제
다음은 간단한 연습 예제예요. 이 코드를 작성하고 브라우저에서 확인해 보세요.
<! DOCTYPE html>
<html>
<head>
<title>HTML 연습 </title>
</head>
<body>
<h1>HTML을 배우자! </h1>
<p>HTML은 웹페이지를 만드는 기본 언어입니다. </p>
<a href="https://www.example.com">Example 사이트로 이동 </a>
<img src="image.jpg" alt="아름다운 풍경">
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
</body>
</html>
이 예제는 제목, 문단, 링크, 이미지, 리스트를 포함한 간단한 HTML 문서를 만들어요. 이 코드를 직접 작성해 보면서 HTML의 기초를 익히세요.
HTML 학습 리소스
HTML을 배우는 데 도움이 되는 다양한 온라인 리소스가 있어요. W3 Schools, MDN Web Docs 같은 사이트를 추천해요. W3 Schools는 HTML을 비롯한 다양한 웹 기술을 쉽게 설명하고, 실습할 수 있는 예제를 제공해요. MDN Web Docs는 모질라에서 제공하는 공식 문서로, 매우 상세하고 정확한 정보를 제공해요. 또한, 유튜브에는 많은 무료 강의와 튜토리얼이 있어서 동영상으로 쉽게 배울 수 있어요. 이렇게 다양한 리소스들을 활용하면 HTML을 더욱 체계적으로 배울 수 있어요. 꾸준히 공부하고, 다양한 예제를 통해 실력을 쌓아가세요! 오늘도 열심히 공부했네요! 이렇게 차근차근 배우다 보면 어느새 HTML을 능숙하게 다룰 수 있게 될 거예요. 내일은 더욱 흥미로운 내용으로 돌아올게요. 계속해서 즐겁게 학습해 봅시다!