부트캠프 주니어 2강 - HTML 태그 활용

안녕하세요!

 

HTML 강의 시리즈의 두 번째 시간에 오신 것을 환영합니다. 이번 시간에는 HTML 태그의 다양한 활용법에 대해 알아보겠습니다. 이전 강의에서 배운 기초를 바탕으로 좀 더 흥미로운 웹 페이지를 만들어볼 거예요. 준비가 되셨나요? 그럼 시작해 볼까요? 일단 저번 강의와 마찬가지로 VS Code에서 새로운 폴더와 파일을 만들고 시작합니다.

링크 (Link)

링크는 웹 페이지 간에 이동할 수 있는 매우 유용한 요소입니다. 다른 웹 페이지로 이동하거나 같은 페이지 내의 특정 부분으로 이동하는 링크를 만들 수 있어요. 링크를 생성하기 위해서는 <a> 태그를 사용하며, href 속성을 이용해 목적지 URL을 지정합니다.

<a href="https://www.example.com">여기를 클릭하세요!</a>

 

이미지 (Image)

웹 페이지에 이미지를 추가하여 시각적으로 더 풍부하고 흥미로운 컨텐츠를 제공할 수 있습니다. <img> 태그를 사용하여 이미지를 삽입할 수 있어요. src 속성에 이미지 파일의 경로를 지정하고, alt 속성에는 대체 텍스트를 제공합니다. 구글에서 좋아하는 사진을 검색해서 현재 프로젝트 폴더에 image.jpg로 저장해주세요.

<img src="image.jpg" alt="이미지 설명">

 

목록 (List)

리스트는 항목을 구조적으로 나열할 때 사용되는 요소입니다. HTML에서는 순서가 있는 목록(<ol>)과 순서가 없는 목록(<ul>)을 사용할 수 있어요. 각 항목은 <li> 태그로 감싸집니다. 순서가 있는 목록은 기본 값으로 각 목록의 아이템마다 숫자가, 순서가 없는 목록은 글머리 기호( ●)가 생성이 됩니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

 

테이블 (Table)

테이블은 정보를 구조화하고 표 형태로 표시하는 데 사용됩니다. <table>, <tr>, <th>, <td> 태그를 조합하여 테이블을 생성할 수 있어요. <th>는 테이블 헤더 셀, <td>는 테이블 데이터 셀을 나타냅니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
  </tr>
</table>

 

이렇게 다양한 HTML 태그를 활용하여 웹 페이지를 더욱 다채롭게 만들 수 있습니다. 다음 시간에는 폼(form)에 대해 알아보도록 하겠습니다. 그럼 다음 시간에 뵙겠습니다!

부트캠프 주니어 3강 - Form (폼)