링크·이미지·리스트

1. 링크 태그 <a> 완전 정복

<!-- 기본 링크 -->
<a href="https://google.com">구글로 이동</a>

<!-- 새 탭에서 열기 -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">새 탭으로 열기</a>

<!-- 같은 사이트 내 이동 (상대 경로) -->
<a href="/about">소개 페이지</a>
<a href="./contact.html">연락처</a>

<!-- 페이지 내 특정 위치로 이동 (앵커) -->
<a href="#section2">섹션 2로 이동</a>
...
<h2 id="section2">이 섹션으로 이동됩니다</h2>

<!-- 이메일 링크 -->
<a href="mailto:info@example.com">이메일 보내기</a>

<!-- 전화 링크 (모바일에서 자동 전화 연결) -->
<a href="tel:+821012345678">전화 걸기</a>

target="_blank" 사용 시 반드시 rel="noopener noreferrer"를 함께 써야 합니다. 이유: 새 탭에서 열린 페이지가 원래 탭에 접근(Tabnapping 공격)하는 보안 취약점을 막기 위해서입니다.

2. 이미지 태그 <img>

<!-- 기본 이미지 -->
<img src="photo.jpg" alt="강아지 사진">

<!-- 크기 지정 (HTML 속성 vs CSS — CSS 권장) -->
<img src="logo.png" alt="회사 로고" width="200" height="100">

<!-- 외부 이미지 URL -->
<img src="https://example.com/banner.jpg" alt="배너">

<!-- 이미지를 링크로 감싸기 -->
<a href="https://google.com">
  <img src="google-logo.png" alt="구글 홈으로">
</a>

속성	역할	중요성
src	이미지 파일 경로 또는 URL	필수
alt	이미지 설명 텍스트 (이미지 로딩 실패 시·스크린리더 사용)	필수 (접근성·SEO)
width/height	크기 지정 (레이아웃 시프트 방지)	권장

alt=""(빈 문자열)은 장식용 이미지(배경 패턴 등)에만 사용합니다. 의미 있는 이미지에는 반드시 구체적인 설명을 씁니다.

3. 목록 태그 ul · ol · li

<!-- ul: 순서 없는 목록 (불릿 포인트 ●) -->
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

<!-- ol: 순서 있는 목록 (1. 2. 3.) -->
<ol>
  <li>재료 준비하기</li>
  <li>반죽하기</li>
  <li>오븐에 굽기</li>
</ol>

<!-- 중첩 목록 -->
<ul>
  <li>과일
    <ul>
      <li>사과</li>
      <li>바나나</li>
    </ul>
  </li>
  <li>채소</li>
</ul>

네비게이션 메뉴도 보통 ul > li > a 구조로 만듭니다. CSS로 bullet을 없애고 가로로 배치하면 깔끔한 메뉴가 완성됩니다.

4. 정의 목록 dl · dt · dd

<!-- 용어(dt)와 설명(dd) 쌍으로 구성 -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language. 웹페이지의 구조를 만드는 언어</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets. 웹페이지의 스타일을 지정하는 언어</dd>
</dl>

FAQ 페이지, 용어 사전, 제품 스펙 테이블에 dl을 사용하면 의미적으로 올바른 HTML을 작성할 수 있습니다.

5. 표 태그 table

<table border="1">
  <thead>                  ← 표 헤더 (제목 행)
    <tr>                   ← table row (가로 줄)
      <th>이름</th>       ← table header (굵고 가운데 정렬)
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>                  ← 표 본문
    <tr>
      <td>홍길동</td>     ← table data (일반 셀)
      <td>28</td>
      <td>개발자</td>
    </tr>
    <tr>
      <td>김영희</td>
      <td>32</td>
      <td>디자이너</td>
    </tr>
  </tbody>
  <tfoot>                  ← 표 하단 (합계·메모)
    <tr>
      <td colspan="3">총 2명</td>  ← colspan: 가로 셀 합치기
    </tr>
  </tfoot>
</table>

주의: table은 데이터를 표시하는 목적으로만 사용해야 합니다. 예전에는 table로 레이아웃을 만들었지만, 현대 웹에서는 CSS Flexbox와 Grid를 사용합니다.

관련 검색어  ·  HTML링크태그, img alt속성, HTML목록태그, table태그, a태그target, HTML표만들기, ul ol차이