1. HTML5 선언
HTML5에서는 문서의 첫 줄에 HTML5 문서임을 선언하는 코드가 들어가야 합니다. 이 선언은 브라우저에게 HTML5 표준을 사용해 문서를 해석하라고 지시합니다.
<!DOCTYPE html>2. 모바일 지원 태그
모바일 환경에서도 웹 페이지가 잘 표시되도록 해주는 태그입니다. viewport 메타 태그를 사용해 화면 너비를 디바이스 너비에 맞추고, 확대 비율을 1로 설정합니다. 이 태그가 없으면 모바일 화면에서 페이지가 너무 작게 표시될 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">3. 문단 태그
HTML에서 문단을 구성하거나 텍스트를 분리하는 데 사용되는 태그들입니다.
<br />: 줄바꿈을 할 때 사용합니다. 스스로 닫히는(Self-closing) 태그입니다.
첫 번째 줄<br />두 번째 줄<p>: 문단을 나타내는 태그입니다. 각 문단은<p></p>로 묶습니다.
<p>이것은 하나의 문단입니다.</p><div>: 블록 요소로, 주로 레이아웃을 나누거나 큰 덩어리의 콘텐츠를 그룹화할 때 사용합니다.
<div>여러 요소를 묶는 컨테이너입니다.</div><span>: 인라인 요소로, 텍스트의 일부에 스타일을 적용하거나 그룹화할 때 사용합니다.
<span>텍스트의 일부</span>4. 목록 태그
HTML에서 리스트 형태의 콘텐츠를 나타낼 때 사용되는 태그들입니다.
<ul>: 순서가 없는 목록을 만드는 태그입니다. 각 항목은<li>태그로 묶습니다.
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul><ol>: 순서가 있는 목록을 만드는 태그입니다. 숫자나 알파벳 순서로 표시됩니다.<dl>: 정의 목록을 만들 때 사용합니다.<dt>는 정의될 항목이고,<dd>는 해당 항목의 정의를 나타냅니다.
5. 테이블 태그
<table>: 표 전체를 감싸는 태그입니다.border: 테이블 테두리의 두께를 설정합니다.width: 테이블의 너비를 지정합니다. (px 또는 %로 설정 가능)cellpadding: 각 셀 내부 여백을 설정합니다.cellspacing: 각 셀 사이의 간격을 설정합니다.
<tr>: 표의 행을 나타내는 태그입니다.<td>: 표의 각 셀(데이터)을 나타내는 태그입니다.border: 테이블 테두리의 두께를 설정합니다.width: 테이블의 너비를 지정합니다. (px 또는 %로 설정 가능)cellpadding: 각 셀 내부 여백을 설정합니다.cellspacing: 각 셀 사이의 간격을 설정합니다.
<th>: 표의 헤더 셀을 나타내며, 기본적으로 텍스트가 굵게 표시됩니다.
6. 이미지 태그
HTML의 <img>태그는 웹 체이지에 이미지를 삽입할 때 사용됩니다. 이 태그는 다양한 속성을 지원하여 이미지를 효율적으로 표시하고, 접근성과 유연성을 높일 수 있습니다. <img> 태그는 스스로 닫히는(Self-closing) 태그이기 때문에 <img /> 형태로 작성됩니다.
1. 기본 구조
이미지를 삽입할 때 가장 기본적인 형태의 <img> 태그는 다음과 같습니다.
<img src="image.jpg" alt="이미지 설명" />src(source): 이미지 파일의 경로를 지정합니다. 로컬 파일 경로나 절대 URL을 사용할 수 있습니다.alt(alternative text): 이미지가 표시되지 않을 때 대체 텍스트를 나타냅니다. 시각 장애인을 위한 접근성을 높이는 데 중요한 속성입니다.
2. 주요 속성들
src (필수)
이미지 파일의 경로를 지정하는 속성입니다. 이 속성이 없으면 이미지가 표시되지 않습니다.
- 절대 경로: 외부 URL을 사용하여 이미지를 삽입할 수 있습니다.
<img src="https://example.com/image.jpg" alt="외부 이미지" />- 상대 경로: 현재 페이지와 같은 서버에 있는 이미지 파일을 상대 경로로 삽입할 수 있습니다.
<img src="images/picture.jpg" alt="내부 이미지" />예시코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 상대경로 -->
<img src="./daum.jpg" /><br />
<img src="./daum.jpg" widh="364" hight="301" /><br />
<!--
웹 경로 : https:// 로 시작
표에 배경도 색상이 아닌 이미지를 줄 수도 있다.
-->
</body>
</html>alt (필수)
이미지의 대체 텍스트를 지정하는 속성입니다. 이미지를 볼 수 없는 사용자에게 텍스트로 설명을 제공하며, SEO(검색 엔진 최적화)에도 도움이 됩니다.
<img src="image.jpg" alt="꽃이 핀 아름다운 정원" />width와 height
이미지의 가로 및 세로 크기를 지정합니다. 픽셀(px)이나 퍼센트(%) 단위로 설정할 수 있으며, 원본 비율을 유지하려면 한쪽 크기만 설정하는 것이 좋습니다.
<img src="image.jpg" alt="사이즈 설정 예제" width="300" height="200" />- 반응형 크기 설정:
%를 사용하여 화면 크기에 맞게 이미지를 조정할 수 있습니다.
<img src="image.jpg" alt="반응형 이미지" width="50%" />title
이미지에 마우스를 올렸을 때 툴팁으로 표시되는 텍스트를 지정합니다. 보조적인 설명을 추가할 때 유용합니다.
<img src="image.jpg" alt="풍경 이미지" title="아름다운 풍경" />loading
이미지의 로딩 방식을 지정하는 속성입니다. lazy 값으로 설정하면 스크롤을 내려서 이미지가 화면에 나타날 때 로드되므로 페이지 로딩 속도를 개선할 수 있습니다.
lazy: 필요한 순간까지 이미지를 로드하지 않습니다 (지연 로딩).eager: 즉시 이미지를 로드합니다 (기본값).
<img src="image.jpg" alt="지연 로딩 이미지" loading="lazy" />srcset과 sizes
반응형 이미지를 제공할 때 사용되는 속성으로, 다양한 화면 크기에 따라 다른 해상도의 이미지를 선택적으로 로드할 수 있게 합니다.
srcset: 이미지 파일을 여러 해상도로 제공하여 최적의 해상도를 자동으로 선택합니다.sizes: 뷰포트의 너비에 따라 이미지를 표시할 크기를 정의합니다.
<img src="image-400.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="반응형 이미지" />7. 링크 태그
HTML에서 <a> 태그는 링크를 생성하는 데 사용됩니다. <a> 태그를 사용하여 다른 페이지, 파일, 이메일 주소, 전화번호 등 다양한 리소스로 연결할 수 있습니다.
기본 <a> 태그 구조
<a> 태그는 링크를 생성하는데, href 속성에 이동할 URL을 지정하고, 링크 텍스트를 태그 사이에 작성합니다.
<a href="https://example.com">Example 사이트로 이동</a>이 기본 구조에서 href 속성은 링크가 연결될 URL을 지정하고, "Example 사이트로 이동"은 클릭 가능한 텍스트로 표시됩니다.
주요 속성들
href(필수)
- 링크의 목적지 URL을 지정하는 속성입니다.
- 절대 경로 또는 상대 경로를 사용할 수 있으며, 외부 사이트 URL, 내부 페이지 경로, 파일 경로 등 다양한 형태로 사용됩니다.
<!-- 외부 링크 -->
<a href="https://example.com">외부 사이트로 이동</a>
<!-- 내부 링크 -->
<a href="/about">About 페이지로 이동</a>
<!-- 파일 다운로드 링크 -->
<a href="/files/document.pdf">PDF 파일 다운로드</a>예제코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 다른 페이지 링크 -->
<a href="./ex02.html">ex02.html</a><br />
<a href="https://www.daum.net">다음 바로가기</a><br />
<a href="https://www.daum.net"><img src="./tomcat.svg"/></a><br />
<!-- 브라우저가 해석할 수 있는 파일(이미지, 일반 텍스트 파일, Pdf)을 링크 걸면 내용이 보임-->
<a href="./daum.jpeg"><img src="./tomcat.svg"/></a><br />
<!-- 브라우저가 해석할 수 없는 파일을 링크 걸면 다운로드 -->
<a href="./apach-tomcat-10.1.31-windows-x64.zip">다운로드</a><br />
</body>
</html>target
- 링크를 클릭했을 때 열릴 위치를 지정하는 속성입니다.
- 주로
_blank,_self,_parent,_top의 네 가지 값을 사용합니다.
| 값 | 설명 |
|---|---|
| _blank | 새 탭이나 새 창에서 링크 열기 |
| _self | 현재 탭 또는 창에서 링크 열기 (기본값) |
| _parent | 부모 프레임에서 링크 열기 |
| _top | 최상위 프레임에서 링크 열기 |
<a href="https://example.com" target="_blank">새 탭에서 열기</a>| 속성 | 설명 | 예시 |
|---|---|---|
| href | 링크의 목적지 URL을 지정 | href="https://example.com" |
| target | 링크가 열릴 위치를 지정 (_blank, _self 등) | target="_blank" |
| rel | 링크와 대상 간의 관계를 설정 (noopener, nofollow 등) | rel="noopener noreferrer" |
| download | 링크된 파일을 다운로드할 수 있도록 설정 | download="report.pdf" |
| title | 링크에 대한 추가 설명을 제공, 마우스 오버 시 툴팁 표시 | title="보고서 다운로드" |
| hreflang | 링크 대상의 언어를 지정 | hreflang="es" |
| tel: | 전화번호를 링크하여 클릭 시 전화 걸기 기능 제공 | href="tel:+821012345678" |
| mailto: | 이메일 주소를 링크하여 클릭 시 이메일 클라이언트 열림 | href="mailto:info@example.com" |
<!-- 외부 링크, 새 탭에서 열기, 보안 강화 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer" title="Example 사이트 방문">
Example 사이트로 이동
</a>
<!-- 파일 다운로드 링크 -->
<a href="/files/report.pdf" download="연간보고서.pdf" title="연간 보고서 다운로드">
연간 보고서 다운로드
</a>
<!-- 전화번호 링크 (모바일에서 클릭 시 전화 걸기) -->
<a href="tel:+821012345678" title="홍길동에게 전화하기">
홍길동에게 전화 걸기
</a>
<!-- 이메일 링크 (클릭 시 이메일 클라이언트 실행) -->
<a href="mailto:info@example.com?subject=문의사항&body=안녕하세요, 궁금한 사항이 있습니다.">
이메일 보내기
</a>
``