현재 Back-end를 주로 개발하고 있지만, 프로젝트 개발에 Front-end도 필수라 생각하여 간단한 웹을 제작하며 배운 HTML 태그들을 정리하였습니다. ㅎㅎ
HTML은 기본적으로 아래와 같은 구조를 갖습니다. (html, head, body)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
Content
</body>
</html>
<head>:
- 문서에 대한 메타데이터를 포함합니다.
- <title> 요소를 비롯하여, 웹 브라우저가 웹 페이지를 표시하는 데 도움이 되는 정보(예: charset 및 viewport 설정)를 포함합니다.
<title>:
- 웹 페이지의 제목을 정의합니다.
- 이 제목은 브라우저의 탭에 표시되며, 북마크 또는 검색 엔진 결과에도 사용됩니다.
<body>:
- 실제 화면에 표시되는 콘텐츠를 포함하는 요소입니다.
- 텍스트, 이미지, 링크, 스크립트, 스타일 등 웹 페이지의 모든 요소를 여기에 포함할 수 있습니다.
참고
visual code에서 !(느낌표)를 html 파일에 입력하면 자동으로 기본 템플릿을 만들어 줍니다.
<p> 태그
HTML에서 <p> 태그는 문단(paragraph)을 정의하는 데 사용됩니다. <p> 태그로 감싼 텍스트는 독립적인 문단으로 간주되며, 기본적으로 앞뒤에 여백이 있어 다른 콘텐츠와 구분됩니다.
특징
- 블록 요소: <p> 태그는 블록 레벨 요소로, 각 문단이 화면 너비를 전부 차지하며 다른 콘텐츠는 줄바꿈되어 표시됩니다.
- 자동 여백: <p> 태그로 감싸진 텍스트는 기본적으로 위아래에 여백(margin)이 적용되어 있어 문단 간 간격이 자동으로 생깁니다.
- 문서 구조화: 여러 개의 <p> 태그를 사용하여 문서를 여러 문단으로 나누어 가독성을 높이고 문서 구조를 명확히 할 수 있습니다.
<p> 태그의 사용 규칙
- 블록 요소 안에서만 사용: <p> 태그는 주로 <div>, <section>, <article> 등의 블록 요소 안에서 사용됩니다.
- 다른 블록 요소를 포함하지 않음: <p> 태그 내부에 또 다른 블록 요소(<div>, <h1>, <table> 등)를 포함하지 않는 것이 좋습니다.
<p> 태그와 다른 시맨틱 요소와의 차이
- 문단 구분을 위해 특화된 태그로, 텍스트를 논리적 구조로 나누고 가독성을 높이는 데 주로 사용됩니다.
- 제목을 나타내는 <h1>, <h2> 등과 달리, 일반 텍스트 콘텐츠를 문단 형태로 그룹화하는 데 적합합니다.
즉, <p> 태그는 HTML에서 텍스트를 독립적인 문단으로 나누어 표시하는 데 사용되며, 기본적으로 문단 사이에 여백이 생깁니다. 문서의 가독성을 높이고 구조를 명확히 하기 위해 여러 문단을 구분할 때 유용한 태그입니다.
? 시맨틱 태그가 뭘까요?? 🤔
HTML 태그는 시맨틱(Semantic) 태그와 비시맨틱 태그로 분류할 수 있는데요,
시맨틱 태그와 비시맨틱 태그의 구분
- 시맨틱 태그: 태그 이름만으로도 해당 콘텐츠의 의미나 역할을 쉽게 이해할 수 있습니다.
- 비시맨틱 태그: 이름만으로는 콘텐츠의 의미를 알 수 없으며, 단순히 레이아웃을 구성하거나 스타일을 적용하는 용도로 스타일링과 레이아웃을 관리하는 데 사용됩니다.
시맨틱 태그의 종류
시맨틱 태그는 HTML5에서 주로 도입되었으며, 문서의 구조와 의미를 명확하게 전달하기 위해 사용됩니다. 대표적인 시맨틱 태그는 다음과 같습니다:
- <header>: 페이지나 섹션의 머리글을 나타냅니다.
- <footer>: 페이지나 섹션의 바닥글을 나타냅니다.
- <nav>: 내비게이션 링크를 포함하는 영역을 나타냅니다.
- <main>: 문서의 주요 콘텐츠를 나타내며, 페이지에서 한 번만 사용해야 합니다.
- <section>: 콘텐츠의 주제를 기준으로 구획을 나누는 데 사용됩니다.
- <article>: 독립적인 콘텐츠 블록을 나타내며, 블로그 글, 뉴스 기사, 포럼 게시물 등을 의미합니다.
- <aside>: 주 콘텐츠와 관련된 부가 정보나 사이드바를 나타냅니다.
- <figure> 및 <figcaption>: 이미지, 그래프 등의 콘텐츠와 그 설명을 위한 태그입니다.
- <mark>: 강조를 위해 하이라이트된 텍스트를 나타냅니다.
- <time>: 날짜나 시간을 나타냅니다.
- <h1> ~ <h6>: 제목을 나타내는 태그로, 문서의 구조와 계층을 정의합니다.
- <p>: 문단을 나타내는 태그로, 텍스트를 독립된 문단으로 구분합니다.
비시맨틱 태그의 종류
비시맨틱 태그는 레이아웃을 구성하거나 스타일링을 적용하기 위해 사용되며, 콘텐츠의 의미를 직접적으로 전달하지 않습니다. 대표적인 비시맨틱 태그는 다음과 같습니다:
- <div>: 블록 레벨 요소로, 큰 구역을 나누거나 그룹화할 때 사용됩니다.
- <span>: 인라인 요소로, 텍스트 일부에 스타일을 적용하거나 스크립트를 사용할 때 사용됩니다.
정리하자면,
- 이름을 보고 의미를 알 수 있으면 시맨틱 태그입니다. 예를 들어, <header>는 헤더 영역을 의미하고 <nav>는 내비게이션을 의미합니다. HTML5 시맨틱 태그는 위와 같이 콘텐츠의 목적에 맞게 다양한 요소를 제공하여, 문서의 구조와 의미를 더 명확하게 표현 할 수 있게 도와줍니다. 이는 접근성, SEO 최적화, 그리고 가독성 향상에 기여합니다.
- 구조적 또는 의미적 역할이 없고 스타일링과 레이아웃을 위한 태그는 비시맨틱 태그입니다. 예를 들어 <div>와 <span>은 콘텐츠에 특정 의미를 부여하지 않고, 단순히 그룹화하거나 특정 부분에 스타일을 적용할 때 사용됩니다.
<span> 태그
HTML의 <span> 태그는 짧은 텍스트나 작은 콘텐츠 조각을 묶어서 스타일링하거나 스크립트를 적용할 때 사용하는 인라인 요소입니다. <span>은 텍스트의 일부를 스타일링하거나 특정한 속성을 적용하고 싶을 때 유용하게 사용됩니다.
<span> 태그의 특징
- 인라인 요소: <span>은 인라인 요소로, 텍스트 줄 안에서 다른 텍스트와 함께 이어져 표시됩니다. 줄바꿈을 하지 않고 콘텐츠의 일부만 스타일링할 수 있습니다.
- 스타일링 및 스크립팅에 유용: 특정 텍스트에 CSS 스타일을 적용하거나 JavaScript로 제어할 때 주로 사용합니다.
- 구조적 의미 없음: <span> 자체는 아무런 의미적 또는 구조적 역할을 가지지 않으며, 스타일링과 스크립트 적용을 위한 컨테이너 역할만 합니다.
- <span>은 특정 텍스트의 일부를 스타일링하거나 JavaScript로 조작할 때 사용되는 인라인 요소입니다.
- 텍스트나 콘텐츠 일부에만 적용하고, 전체 레이아웃에 영향을 미치지 않도록 할 때 유용합니다.
즉, 위에서 만든 <p> 요소 안에 <span>을 넣어 특정 단어만 강조하도록 설정할 수 있습니다. (줄바꿈 없음)
<li> 태그
HTML에서 <li> 태그는 리스트 항목(List Item)을 나타낼 때 사용합니다. <li>는 순서 있는 리스트(<ol>)나 순서 없는 리스트(<ul>) 안에 포함되어 리스트의 각 항목을 정의합니다.
<li> 태그 사용법
<li> 태그는 <ul>(순서 없는 리스트)나 <ol>(순서 있는 리스트) 안에 포함되어 각각의 리스트 항목을 생성합니다.
위에서 생성한 문단을 순서 없는 리스트로 만들어 보겠습니다.
<li> 태그의 주요 특징
- 리스트의 각 항목을 정의: <li>는 리스트 항목을 나타내며, 단독으로 사용되지 않고 반드시 <ul> 또는 <ol> 태그 안에 포함되어야 합니다.
- 중첩 가능: <li> 태그 안에 다른 리스트를 중첩하여 계층 구조의 리스트를 만들 수 있습니다.
<a> 태그 (하이퍼링크)
HTML의 <a> 태그는 하이퍼링크(anchor)를 생성하는 데 사용되며, 다른 페이지, 파일, 이메일 주소 또는 외부 웹 사이트로 이동할 수 있게 해줍니다. <a> 태그의 href 속성은 링크의 목적지(URL)를 지정하는 데 필수적입니다.
<a href="URL">링크 텍스트</a>
- href 속성: Hypertext Reference의 약자로, 링크가 이동할 URL을 지정합니다.
- 링크 텍스트: <a> 태그와 </a> 사이에 위치하며, 클릭 가능한 텍스트로 표시됩니다.
<a> 태그의 target 속성
target 속성은 링크 클릭 시 링크된 URL이 열리는 위치를 지정하는 속성입니다. target 속성을 사용하면 링크가 현재 탭, 새 탭, 새 창 등에서 열리도록 설정할 수 있습니다.
- _self (기본값)
- 링크를 현재 탭이나 창에서 엽니다.
- _blank
- 링크를 새로운 탭 또는 창에서 엽니다.
- 새 탭으로 열리기 때문에 사용자가 원래 페이지를 유지할 수 있습니다.
- 보안상, 외부 사이트로 연결할 때 새 탭을 열기 위해 _blank를 사용할 경우 <a> 태그에 rel="noopener noreferrer"를 추가하는 것이 좋습니다.
- _parent
- 링크를 현재 프레임의 부모 프레임에서 엽니다.
- 프레임 구조에서 사용되며, 상위 프레임을 지정할 때 사용합니다.
- _top
- 프레임을 포함한 모든 계층을 무시하고 최상위 창이나 탭에서 링크를 엽니다.
이번에는 <h1> 태그와 <img> 태그를 함께 사용할 예정이기 때문에 한꺼번에 정리하였습니다.
<h1> 태그
HTML에서 <h1> 태그는 가장 높은 수준의 제목(Heading)을 정의하는 데 사용됩니다. <h1>은 문서의 주요 제목을 나타내며, 페이지에서 가장 중요한 제목으로 간주됩니다. 제목은 <h1>에서 <h6>까지 있으며, <h1>이 가장 크고, <h6>이 가장 작습니다.
<h1> 태그의 특징과 용도
- 페이지의 주요 제목: <h1>은 일반적으로 페이지의 최상위 제목으로 사용되며, 페이지나 섹션의 주제를 나타냅니다.
- SEO에 중요: 검색 엔진은 <h1> 태그를 보고 페이지의 주제를 이해하기 때문에, SEO(검색 엔진 최적화)에서도 중요한 요소로 작용합니다.
- 한 페이지에 하나의 <h1> 권장: 문서의 의미를 명확히 하기 위해, 보통 한 페이지에 하나의 <h1> 태그를 사용하는 것이 좋습니다.
<img> 태그
HTML에서 <img> 태그는 이미지를 웹 페이지에 삽입할 때 사용됩니다. <img> 태그는 **빈 태그(empty tag)**로, 닫는 태그가 없으며, 여러 속성을 통해 이미지를 정의하고 스타일링할 수 있습니다.
<img src="image.jpg" alt="Description of the image"/>주요 속성
- src (source)
- 이미지의 경로(위치)를 지정하는 속성으로, 필수 속성입니다.
- 로컬 파일이나 외부 URL을 사용할 수 있습니다.
- 예: <img src="image.jpg"/> 또는 <img src="외부 url"/>
- alt (alternative text)
- 대체 텍스트로, 이미지를 설명하는 내용이 들어갑니다.
- 이미지가 로드되지 않을 때 이 텍스트가 대신 표시되며, 시각 장애가 있는 사용자들이 사용하는 스크린 리더가 이 텍스트를 읽어줍니다.
- 예: <img src="image.jpg" alt="A beautiful landscape"/>
- SEO와 접근성을 위해 중요한 속성입니다.
- width 및 height
- 이미지의 크기를 지정합니다. 픽셀(px) 단위 또는 백분율(%)로 크기를 설정할 수 있습니다.
- 예: <img src="image.jpg" width="300" height="200/">
- width와 height를 함께 설정하면 이미지의 원본 비율이 유지됩니다.
- title
- 이미지에 마우스를 올렸을 때 툴팁으로 표시되는 텍스트를 설정할 수 있습니다.
- 예: <img src="image.jpg" alt="A beautiful landscape" title="Beautiful Landscape"/>
- loading
- 이미지 로딩 방식을 지정하는 속성으로, 페이지 로딩 최적화에 사용됩니다.
- lazy: 사용자가 이미지가 있는 위치로 스크롤할 때 이미지를 로드합니다.
- eager: 페이지가 로드될 때 즉시 이미지를 로드합니다.
- 예: <img src="image.jpg" alt="A beautiful landscape" loading="lazy"/>
아래에서 <img>와 <h1>을 <header> 라는 시맨틱 태그로 감싸고 있습니다. 이는단지 <img>와 <h1>을 grouping 하는 역할로, <header>가 없어도 구조에는 영향이 없습니다. 하지만, <header>로 감쌈으로써 추후에 CSS를 사용하여 동일한 styling 적용이 가능합니다.
종류가 너무 많네요...ㅎㅎ
To be continued..
'Full Stack' 카테고리의 다른 글
| Docker compose로 MongoDB 사용하기 (Mac) (2) | 2024.11.19 |
|---|