HTML Documents.
HTML 문서는 <!DOCTYPE html>으로 시작해야 하며
<html>로 시작해서 </html> 로 끝납니다.
문서가 보여지는 부분은 <body> ~ </body> 사이입니다.
<!DOCTYPE> 선언.
<!DOCTYPE> 선언은 HTML 문서의 첫 줄에 위치하여 문서의 형식(Doctype)을 지정합니다.
이 선언은 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지를 알려주는 역할을 합니다.
<!DOCTYPE html>
HTML Headings.
HTML에서 제목(Headings)을 나타내기 위해 <h1>부터 <h6>까지의 태그를 사용합니다.
제목 태그들은 문서의 구조를 정의하고 각 섹션의 중요도를 표시하는 데 사용됩니다.
<h1>은 가장 중요한 제목을 나타내며, 문서에서 한 번만 사용해야 합니다.
<h2>부터 <h6>까지는 중요도가 낮아지며, 순차적으로 사용됩니다.
제목 태그는 브라우저에 따라 기본적으로 다른 크기와 스타일을 가지며,
CSS를 사용하여 추가적인 스타일링을 할 수 있습니다.
제목 태그는 문서의 구조를 의미적으로 나타내기 때문에 검색 엔진 최적화(SEO)에도 영향을 미칠 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs.
HTML에서 문단(Paragraphs)을 나타내기 위해 <p> 태그를 사용합니다.
<p> 태그는 텍스트의 단락을 정의하며, 블록 수준 요소(block-level element)입니다.
문단은 일반적으로 텍스트 블록으로 간주되어 줄바꿈이 적용되고, 기본적으로 위 아래에 여백이 있습니다.
문단 내에서는 일반적으로 텍스트와 함께 다른 HTML 요소들도 사용할 수 있습니다.
예를 들어, 문단 내에 강조 텍스트를 나타내기 위해 <em> 태그를 사용할 수 있습니다.
문단 태그는 웹 페이지에서 텍스트를 구조화하고 의미를 부여하는 데 사용됩니다.
주요 내용이나 문장의 그룹을 나타내는 데 유용하며, 스타일링이나 레이아웃을 위한 용도보다는 의미적인 요소로 활용되어야 합니다.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a <em>paragraph</em> with emphasized text.</p>
</body>
</html>
HTML Links.
HTML Links는 웹 페이지에서 다른 웹 페이지로 이동할 수 있는 하이퍼링크를 생성하는 데 사용되는 요소입니다.
링크를 클릭하면 해당 링크가 가리키는 웹 페이지로 이동하거나, 파일을 다운로드하거나, 이메일을 보낼 수 있습니다.
HTML에서 링크를 생성하는 가장 일반적인 요소는 <a> 태그입니다. <a> 태그는 다음과 같은 형식으로 사용됩니다:
<a href="링크 주소">링크 텍스트</a>- 구글의 홈페이지로 이동하는 링크를 생성하려면 다음과 같이 작성
- 링크를 클릭한 후 새 창이나 탭에서 링크를 열도록 하려면 target 속성을 사용
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<!-- <br> 태그는 강제 개행을 위한 태그로, 일반적으로 텍스트의 흐름을 바꾸는 용도로 사용됩니다.
따라서 레이아웃을 조정하기 위해 <br> 태그를 남용하는 것은 권장되지 않습니다.-->
<a href="https://www.google.com">Go to Google</a><br>
<a href="https://www.google.com" target="_blank">Go to Google</a>
</body>
</html>HTML Links
HTML links are defined with the a tag:
Go to GoogleGo to Google
HTML Images.
HTML에서 이미지를 표시하기 위해 <img> 태그를 사용합니다.
src 속성은 이미지 파일의 경로 또는 URL을 지정하고, alt 속성은 이미지를 설명하는 대체 텍스트를 지정합니다. 대체 텍스트는 이미지를 표시할 수 없는 경우에 대신 표시되는 텍스트입니다. 이를 통해 웹 접근성을 개선할 수 있습니다.
또한, <img> 태그에는 다양한 속성을 추가하여 이미지의 크기, 스타일, 링크 등을 지정할 수 있습니다. 일부 주요 속성은 다음과 같습니다:
width와 height 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다.
style 속성을 사용하여 CSS 스타일을 직접 지정할 수 있습니다.
title 속성을 사용하여 이미지에 대한 추가 정보를 제공할 수 있습니다.
usemap 속성을 사용하여 이미지에 링크 영역을 정의한 이미지 맵을 적용할 수 있습니다.
이와 같이 <img> 태그를 사용하여 HTML에 이미지를 삽입할 수 있으며, 추가적인 속성과 기능을 활용하여 이미지를 스타일링하거나 상호작용성을 높일 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="https://item.kakaocdn.net/do/75e402fe47122beeed4e853466d8b943f43ad912ad8dd55b04db6a64cddaf76d"
alt="잔망루피 이모티콘" width="200" height="180">
</body>
</html>HTML Images
HTML images are defined with the img tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<!-- URL 잘못된 경우 -->
<img src="https://item.kakaocdn.net/do/7"
alt="잔망루피 이모티콘" width="200" height="180">
</body>
</html>
출처 : https://www.w3schools.com/html/html_basic.asp
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - CSS (0) | 2023.07.12 |
|---|---|
| HTML 튜토리얼 - HTML Colors (0) | 2023.07.11 |
| HTML 튜토리얼 - HTML 텍스트 서식 / 인용문 / 인용 요소 (0) | 2023.07.07 |
| HTML 튜토리얼 - HTML Styles (0) | 2023.06.23 |
| HTML 튜토리얼 - HTML 소개 (0) | 2023.06.22 |