jsp

[JSP] 들어가기에 앞서 HTML 필수 기본 내용 정리

사이버나그네 2024. 6. 13. 10:49

[배경]

 JSP 공부를 하다보니 기본적인 HTML 언어가 나오는데 대학교 3학년때 웹프로그래밍때 잠깐 배우고 시간이 많이 지나서 잊어버린 내용이 많았다. 그런 상태로 JSP공부를 하니 요리사가 원재료가 뭔지도 잘 모르고 요리부터 하는 느낌이었다. 그래서 이번에 가장 기본적인 HTML필수 내용을 다시 정리하면서 공부하려고 한다.

 

 

[내용]

1. HTML의 정의와 사용

 먼저 HTML의 정의를 찾아 보면 다음과 같이 나온다.

HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드이다. 예를 들어 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있다. 

 

 쉽게 말하자면, 콘텐츠의 구조를 정의하는 마크업 언어이다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소 로 이루어져 있다. 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 한다. 

 

아래의 예시를 보며 설명하자면 다음과 같다.

<p>My cat is very grumpy</p>

 

 

이 요소의 주요 부분 설명은 다음과 같다.

  1. 여는 태그 (Opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸진다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타낸다. 이 예제에서는 문단이 시작되는 위치를 나타낸다.
  2. 닫는 태그 (Closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다르다. 이것은 요소의 끝을 나타낸다. 이 예제에서는 문단이 끝나는 위치를 나타낸다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시된다.
  3. 콘텐츠 (Content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트이다.
  4. 요소 (Element): 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어진다.

이 요소는 속성도 가질 수 있는데 다음과 같이 사용한다.

<p class="editor-note">My cat is very grumpy</p>

 

<TAG 속성="값"></TAG>

 

이런식의 구성으로 이루어지고 사용된다. 세부적인 내용은 실제 HTML 문서를 보며 정리하고자 한다.

 

 

2. 예문을 통한 HTML 기본 태그 요소 의미

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

 

 

 -  가장 먼저 <> 이렇게 감싸져 있는걸 태그 라고 하고 태그는 각각의 기능이 있으며 태그를 열면 닫아야 한다. </>

<!DOCTYPE html> ->  html 문서로 인식하겠다는 의미이다.

<html> -> html 요소로 페이지 전체 콘텐츠를 감싸며 HTML의 시작이다.

<head> -> <head> 요소로 여기에는 사이트(문서)의 정보를 입력하는 공간이다.

<meta charset="utf-8" /> -> 검색엔진으로 정보를 검색하는 태그이다. (여기서는 인코딩형식이 UTF-8 이라는 뜻)

<title>My test page</title> -> 페이지 제목 " My test page"

</head> -> head 태그 끝

<body> -> <body> 요소로  페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐이다.

<img src="images/firefox-icon.png" alt="My test image" /> -> (여기서는 firefox 아이콘 이미지를 출력)

</body> -> body 태그 끝

</html> -> html 태그 끝

 

 

3. HTML 필수 태그 요소 참고 자료

 HTML 태그 요소가 정말 많지만 주관적으로 중요 하다고 생각한 필수적인 내용만 간단히 정리하였다. 추가로 요소의 모든 내용을 포함하고 있는 페이지는 여기를 참조 하면 좋을거 같다.

 

   1. 메인 루트

요소 설명
<html> HTML 문서의 루트(최상위 요소)를 나타내므로 root 요소라고도 한다. 다른 모든 요소는 이 요소의 자손이어야 한다.

 

   2. 문서 메타데이터

   요소 설명
<base> 문서의 모든 상대 URL에 사용할 기본 URL을 지정한다. 문서에는 이러한 요소가 하나만 있을 수 있다.
<head> 제목, 스크립트 및 스타일 시트와 같은 문서에 대한 기계 판독 가능 정보(메타데이터)를 포함한다.
<link> 현재 문서와 외부 리소스 간의 관계를 지정한다. 이 요소는 CSS에 연결하는 데 가장 일반적으로 사용되지만 무엇보다도 사이트 아이콘("favicon" 스타일 아이콘과 홈 화면용 아이콘 및 모바일 장치의 앱)을 설정하는 데도 사용된다.
<meta> <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
<style> 문서 또는 문서의 일부에 대한 스타일 정보를 포함한다. 이 요소를 포함하는 문서의 내용에 적용되는 CSS를 포함한다.
<title> browser의 제목 표시줄 또는 페이지의 탭에 표시되는 문서의 제목을 정의한다. 텍스트만 포함한다. 요소 내의 태그는 무시된다.

 

 

   3. 섹션 루트

요소 설명
<body> HTML 문서의 내용을 나타냅니다. 문서에는 이러한 요소가 하나만 있을 수 있다.

 

   4. 콘텐츠 섹션

 - 콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있다. 섹션 요소를 사용하여 머리글 및 바닥글 탐색, 콘텐츠 섹션을 식별하는 머리글 요소를 포함하여 페이지 콘텐츠에 대한 광범위한 개요를 만든다.

   요소 설명
<address> 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.
<article> 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.
<aside> 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현한다.
<footer> 가장 가까운 섹션 콘텐츠나 섹션 루트의 푸터를 나타냅니다. 푸터는 일반적으로 섹션의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
<header> 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
<h1>, <h2>, 
<h3>, <h4>, 
<h5>, <h6>		 6단계의 구획 제목을 나타낸다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮다.
<main> 문서 <body>의 주요 콘텐츠를 나타낸다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.
<nav> 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.
<section> HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아니다.

 

   5. 텍스트 콘텐츠

 - HTML 텍스트 콘텐츠를 사용하여 여는 <body>와 닫는 </body> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요하다.

요소 설명
<div> 유동 콘텐츠의 일반 컨테이너이다. CSS를 사용하여 어떤 식으로든 스타일을 지정할 때까지 콘텐츠나 레이아웃에 영향을 미치지 않는다.(예: 스타일이 직접 적용되거나 flexbox와 같은 일종의 레이아웃 모델이 적용됨) 부모 요소).
<dl> 설명 목록을 나타낸다. <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성한다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.
<dt> 설명 혹은 정의 리스트에서 용어를 나타낸다. <dl> 요소 안에 위치해야 한다. 보통 <dd> 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 <dd> 요소로 한꺼번에 서술할 수 있다.
<hr> 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다.
<li> 목록의 항목을 나타낸다. 반드시 정렬 목록(<ol>), 비정렬 목록(<ul>, 혹은 메뉴(<menu>) 안에 위치해야 한다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타낸다.
<menu> 사용자가 수행하거나 하는 명령 묶음을 말한다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함한다.
<p> 하나의 문단을 나타낸다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다.

 

   6. 인라인 텍스트 시멘틱

 - HTML 텍스트 콘텐츠를 사용하여 여는 <body>와 닫는 </body> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO에 중요하다.  모든 내용을 포함하고 있는 페이지는 여기를 참조하기 바란다.

   요소 설명
<a> href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다. <a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
<b> 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용한다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조한다. 그러나 <b>를 사용해 텍스트를 꾸미면 안된다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, <strong> 요소를 사용해 특별히 중요한 텍스트를 나타내기를 권장한다.
<br> 텍스트 안에 줄바꿈(캐리지 리턴)을 생성한다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용하다.

 

   7. 이미지 & 멀티미디어

 - HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원한다.

   요소 설명
<audio> 문서에 소리 콘텐츠를 포함할 때 사용한다. src 특성 또는 <source> 요소를 사용해 한 개 이상의 오디오 소스를 지정하며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고른다. MediaStream을 사용하면 미디어 스트림을 바라볼 수 있다.
<img> 문서에 이미지를 넣는다.
<link> 현재 문서와 외부 리소스 간의 관계를 지정한다. 이 요소는 CSS에 연결하는 데 가장 일반적으로 사용되지만 무엇보다도 사이트 아이콘("favicon" 스타일 아이콘과 홈 화면용 아이콘 및 모바일 장치의 앱)을 설정하는 데도 사용된다.
<meta> <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
<style> 문서 또는 문서의 일부에 대한 스타일 정보를 포함한다. 이 요소를 포함하는 문서의 내용에 적용되는 CSS를 포함한다.
<title> browser의 제목 표시줄 또는 페이지의 탭에 표시되는 문서의 제목을 정의한다. 텍스트만 포함한다. 요소 내의 태그는 무시된다.

 

[결론]

 이번에는 HTML에 대해 공부를 했는데, HTML은 콘텐츠의 구조를 정의하는 마크업 언어이다. 태그를 이용하여 일련의 요소를 활용하여 구성이 되어있고, 다양한 레이아웃을 설정하거나 표현하게 해준다. 디자인적인 측면의 기능들도 많이 가지고 있지만 CSS의 활용으로  HTML은 주로 구조와 컨텐츠를 정의하도록 많이 지양하고 있다. JSP에서 HTML을 구조화 하여 작성하면 가독성이 높아지고 유지보수가 용이해지니 더 많이 공부를 해야겠다.

 

[출처 및 참조]