HTML이란 무엇일까..
HTML이란?
HyperText Markup Language
HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
Markup: 표시하다
하이퍼 텍스트와 콘텐츠를 표시하는 언어 그게 바로 HTML
기초 문법 그리고 태그
HTML 기초 문법
HTML에서 가장 중요한 것은 태그이다.
그럼 태그가 뭘까?
HTML에서 태그라는 것은..
웹 페이지의 구조와 콘텐츠를 정의하기 위해 사용되는 코드 조각인데
태그는 웹 브라우저가 해당 요소를 어떻게 해석하고 표시할지를 알려주는 역할을 한다.
HTML 태그는 대부분 열림 태그와 닫힘 태그이고,
열림 태그는 <태그이름> 형식으로, 닫힘 태그는 </태그이름> 형식으로 작성된다.
예시를 보면 이해가 쉽게 가능할 것이다.
주요 태그 몇가지를 살펴보자.
1. 제목 태그 (<h1> ~ <h6>): 제목을 정의하며, <h1>이 가장 중요한 제목을 나타낸다.
<h1>웹 페이지의 주요 제목입니다</h1>
<h2>부제목입니다</h2>
2. 단락 태그 (<p>): 텍스트 단락을 표시한다.
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
3. 링크 태그 (<a>): 다른 페이지나 리소스로 연결하는 하이퍼링크를 만든다.
<a href="https://www.example.com">Example 사이트로 이동</a>
4. 이미지 태그 (<img>): 이미지를 웹 페이지에 표시하며, 닫힘 태그 없이 사용된다.
<img src="image.jpg" alt="설명 이미지">
5. 강조 태그 (<strong>, <em>)
• <strong>: 텍스트를 강조하며, 주로 굵은 글씨로 표시. 중요한 의미를 부각할 때 사용한다.
• <em>: 텍스트를 기울임으로 표시하며, 일반적으로 중요한 의미를 부각하지만 뉘앙스나 감정을 전달할 때 사용한다.
<p>이 문장은 <strong>강조된</strong> 단어와 <em>기울임</em> 텍스트를 포함합니다.</p>
6. 줄바꿈 태그 (<br>)
• 줄 바꿈을 삽입할 때 사용한다.
• 다른 텍스트 태그와 달리 닫는 태그가 필요하지 않다. 단락 안에서 여러 줄을 나누어 표시할 때 유용함!
<p>이 문장은<br>줄 바꿈을 포함합니다.</p>
7. 수평선 태그 (<hr>)
• 문단이나 섹션을 구분하는 수평선을 삽입.
• 마찬가지로 닫힘 태그가 필요하지 않으며, 디자인과 레이아웃을 정리할 때 사용한다.
<p>첫 번째 단락</p>
<hr>
<p>두 번째 단락</p>
8. 인용 태그 (<blockquote>, <q>)
• <blockquote>: 긴 인용문을 사용할 때 활용하며, 기본적으로 들여쓰기 스타일이 적용된다.
• <q>: 짧은 인용문을 넣을 때 사용되며, 텍스트에 큰 따옴표를 적용해 준다.
<blockquote>이것은 긴 인용문입니다.</blockquote>
<p>그는 "<q>HTML은 재미있다</q>"라고 말했다.</p>
9. 수평 강조 태그 (<mark>)
• 텍스트의 특정 부분을 형광펜으로 강조하는 효과를 제공하여, 사용자에게 주목해야 할 내용을 표시할 때 사용됩니다.
<p>이 문장 중 <mark>중요한 부분</mark>을 강조합니다.</p>
10. 삭제 및 추가 태그 (<del>, <ins>)
• <del>: 삭제된 텍스트를 나타내며, 보통 텍스트에 취소선이 표시된다.
• <ins>: 새로 추가된 텍스트를 나타내며, 텍스트에 밑줄이 그어진다.
<p><del>삭제된 텍스트</del>와 <ins>새로 추가된 텍스트</ins>입니다.</p>
11. 코드 태그 (<code>, <pre>)
<code>: 프로그래밍 코드의 짧은 부분을 인라인으로 표시할 때 사용됩니다.
• <pre>: 코드 블록이나 특정 형식이 필요한 텍스트를 표시하며, 띄어쓰기와 줄 바꿈이 유지됩니다.
<p>인라인 코드 예시: <code>print("Hello")</code></p>
<pre>
def example():
print("This is a code block")
</pre>
12. 줄임말 태그 (<abbr>)
• 줄임말을 정의할 때 사용되며, 마우스를 올리면 전체 설명이 표시된다.
<p><abbr title="HyperText Markup Language">HTML</abbr>은 웹 페이지 제작에 사용됩니다.</p>
이외에도 여러가지 태그가 존재한다
HTML의 문서 구조
HTML 문서 구조는 웹 페이지의 콘텐츠와 레이아웃을 체계적으로 구성하고
웹 브라우저가 문서를 정확하게 해석하도록 돕는다.
HTML 문서의 기본 구조는 반드시 따라야 할 규칙이 존재 하는데
하여튼 이러한 구조를 통해 페이지가 효율적으로 렌더링된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<!-- 웹 페이지의 내용이 여기에 포함 -->
</body>
</html>
위 코드는 HTML의 기본구조를 한눈에 보기 쉽게 나타낸 것이다.
HTML 문서의 기본 구조는 <!DOCTYPE html>로 HTML5 문서임을 선언하는 것으로 시작한다.
그리고 나서 <html>, <head>, <body> 요소로 구성되는데
head에는 메타데이터와 리소스 정보가 포함되고 body에는 실제 화면에 표시될 콘텐츠가 담긴다.
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2024-2 웹기초 스터디] 김지수 #2주차 (1) | 2024.11.06 |
|---|---|
| [2024-2 웹기초 스터디] 김재승 #1주차 (1) | 2024.10.31 |
| [2024-2 웹기초 스터디 #1주차] 김민재 - HTML (0) | 2024.10.31 |
| [2024-2 웹기초 스터디] 김지수 #1주차 (0) | 2024.10.31 |
| [2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~) (0) | 2024.05.28 |
