[HTML] HTML 기본 문법 : 1. 성분과 구조 Element and Structure

.. Introduction to HTML

HTML 은 HyperText Markup Language 의 약자이다.

HTML의 기본적인 구조를 시각화하면 아래와 같다.

<p> Paragraph Element

Paragraph Element(문단 요소)인 <p>은 text 블록을 나타낸다.

<p>Hello World</p>

html은 기본적으로 opening tag와 closing tag를 가지는데, 여기서 <p>는 opening tag를, </p>는 closing tag를 나타낸다.

'Hello World"는 <p>가 가지는 text block, 즉 content(내용)이다.

<body> Body Element

<body> Element는 HTML 문서의 내용을 나타낸다. <body> tag 안의 내용은 web browser 위에 보여진다.

NOTE: 한 문서에는 오직 하나의 <body> tag만 올 수 있다!

<body>
 <h1>Let's Learn HTML!</h1>
</body>

HTML Structure

HTML은 가족 트리 구조로 구성되어 있다. HTML 요소들은 부모, 조부모, 형제자매, 자식, 손주 등을 가질 수 있다.

즉, HTML에는 계층구조가 있다.

<body>
   <div>
      <h1>이건 div의 자식이자 body의 손주이다.</h1>
      <h2>이건 h1의 형제자매이다. </h2>
   <div>
<body>

<h1> - <h6> Heading Elements

HTML은 총 6단계의 Heading Elements(제목 요소들)를 사용할 수 있다. Heading Elements는 가장 높은 레벨인 <h1>부터 가장 낮은 레벨인 <h6>까지 나열할 수 있다. 높은 단계일 수록 크기가 더 크다!

<h1>Breaking News</h1>
<h2>이건 1번째 subheading입니다.</h2>
<h3>이건 2번째 subheading입니다.</h3>
...
<h6>이건 5번째 subheading입니다.</h6>

<div> Div Element

<div>는 HTML 문서의 section(부분)을 나누는 container로 사용된다. <div>는 제목(headings), 절, 링크, 이미지 등의 내용을 포함할 수 있다.

하위 html 요소에 같은 스타일을 동시 적용가능하며, <div>를 입력할 경우 실제 시각적으로 나타나는 것은 없다.

<div>
   <h1>그룹 요소의 첫번째 섹션</h1>
   <p>섹션의 텍스트</p>
</div>
<div>
   <h1>그룹 요소의 두번째 섹션</h1>
   <p>섹션의 텍스트2</p>
</div>

Attribute Name and Values

HTML의 속성은 name과 value를 사용해서 구성된다. (e. name="value")

그리고 요소의 적용을 바꾸거나 설정하기 위해서는 HTML의 opening tag에 넣을 수 있다.

<elemnetName name="value"></elementName>

<span> Span Element

<span>은 문장 안에서 텍스트를 담는 컨테이너이다. 글자를 꾸미기 위해 텍스트를 그룹으로 묶어 사용할 수 있게 한다.

그러나 <span>은 텍스트의 큰 덩어리에서 몇 글자를 구별하기 위한 포괄적인 컨테이너이기 때문에, 만약 더 많은 의미요소(semantic element)를 사용할 수 있다면 이 성분의 사용은 피하는 것이 좋다.

<p><span>이 글자</span>는 주변 텍스트와 다른 스타일이 적용될 수 있다.</p>

<em> Emphasis Element

<em>은 텍스트를 강조하기 위해 사용된다. 이 성분을 사용하면, 브라우저는 대체로 디폴트인 이탤릭체를 사용해서 텍스트를 강조한다.

<P>이건 <em>이탤릭체로 강조된 단어</em>이다.</p>

<strong> Strong Element

<storng>은 중요하고, 심각하고, 긴급한 텍스트를 강조한다. 이 성분을 사용하면, 브라우저는 대체로 디폴트인 볼드체(bold)를 사용해서 텍스트를 강조한다.

<p>이건 <strong>중요한</strong> 글자다!</p>

<br> Line Break Element

<br>은 텍스트 안에서 줄바꿈을 할 수 있게 하는 성분이다. 즉, 브라우저 안의 공간을 수정하여 enter 효과를 준다.

따라서 글자의 문단을 나누고 싶은 경우에 특히 유용하게 사용된다. 줄바꿈 성분은 opening tag만 필요하고 closing tag를 가지지 않는다.

줄바꿈을 위해서 사용한다.<br>
시를 적을 때 유용하게 쓸 수 있다!<br>
줄이 바뀌었다!

<li> List Item Element

리스트 아이템 성분 <li>는 리스트 안에서 리스트 아이템을 만든다.

부모 element는 <ol>과 <ul>이 있다. 이 둘은 자식으로 <li> 요소만 가질 수 있으며, 자신 안에 하나 이상의 <li>가 필수적으로 들어가야 한다.

<ol>은 정렬 목록 태그이다.
숫자로 출력되며, 순서가 중요한 목록에 사용된다.

<ul>은 비정렬 목록 태그이다.
불릿(•)으로 출력되며, 순서가 중요하지 않은 목록에 사용된다.

<ol>
   <li>사과를 얇게 슬라이스로 썬다.<li>
   <li>얇게 자른 사과와 설탕을 냄비에 넣고 녹인다.</li>
</ol>

<ul>
   <li>쿠키</li>
   <li>우유</li>
</ul>

<img> Image Element

<img>는 HTML 문서 안에 이미지를 넣을 수 있는 요소이다. src 성분은 이미지의 URL을 나타내며, 반드시 태그 안에 포함되어야 한다. <img>는 종료 태그(closing tag)가 필요없는 빈 태그(empty tag)이다.

이미지의 주소(URL, Uniform Resource Locator) : 웹 주소 or 파일이 저장된 지역 주소

<img src="image.png">

alt : Attribute

<img>는 alt 속성을 사용해서 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시할 수 있다. 대안 텍스트는 만약에 올바르지 않은 URL 때문에 이미지를 불러오는데 실패했을 경우 나타나게 된다.

이런 alt 속성이 나타날 때는 예를 들어 이미지의 형식이 브라우저에서 지원하지 않을 때, 이미지가 보여지는 것이 막혔을 때, 아니면 이미지가 URL를 받지 못했을 때를 들 수 있다.

텍스트는 스크린 리딩 소프트웨어(Screen reading software)사용되거나, 웹페이지의 이미지가 무슨 내용인지에 대해 텍스트 해석을 제공함으로써 시각이 손상된 사용자를 돕기 위해 사용된다.

<img src="path/to/image" alt="노란색 해바라기의 이미지">

<video> Video Element

<video>는 비디오를 재생하기 위한 미디어 플레이어를 넣는 요소이다. src 속성은 비디오의 URL을 포함한다. controls 속성을 넣으면 미디어 플레어어 안에 비디오의 실행을 제어할 수 있는 제어기(플레이 버튼, 정지 버튼)가 표시된다.

<img> 태그와 달리 시작 태그와 종료 태그가 모두 필요하다.

NOTE: 속성을 지원하지 않는 브라우저에서는 시작 태그(opening tag)와 종료 태그(closing tag) 사이의 내용이 fallback(대체 텍스트)로 보여진다.

<video src="test_video.mp4" controls>
   브라우저가 video를 지원하지 않습니다.
</video>

Document Type Declaration

문서 형식 선언문 <!DOCTYPE html>은 html 문서의 첫번째 줄에 필요하다.

<!DOCTYPE> 선언은 브라우저에게 어떤 종류의 문서를 예상해야 하는지와 어떤 버전의 HTML이 사용되고 있는지를 알려주는 지시문이며, 이 경우에는 HTML5를 의미한다.

항상 파일을 .html 확장자로 저장하게 한다.

<!DOCTYPE html>

<html> HTML Element

<html> 요소는 HTML 문서의 최상위(root) 요소로, <!DOCTYPE> 선언 다음에 위치해야 한다.

HTML 문서의 모든 내용과 구조는 시작 <html> 태그와 종료 </html> 태그 사이에 포함되어야 한다.

<html> 태그 사이의 코드는 모두 HTML 코드로 해석된다.

<!DOCTYPE HTML>
<html>
   <!-- 내용이 들어간다. -->
</htmL>

<head> Head Element

<head>는 페이지에 보이진 않지만, HTML 페이지에 대한 일반적인 정보를 포함하는 요소이다.

그 정보는 메타데이터metadata라고 불리며, HTML 문서의 제목 등을 포함하며 stylesheets와 연결해준다.

*메타데이터metadata : 페이지에 직접적으로 보여지진 않는 페이지에 대한 정보

<!DOCTYPE html>
<html>
   <head>
      <!-- 메타데이터가 이 안에 포함된다. -->
   </head>
</html>

<title> Title Element

<title>은 HTML 문서의 제목을 정의하는 텍스트를 가진다.

제목은 브라우저의 제목 바bar나 HTML 페이지가 보여지는 tab 위에 보여진다.

<title>은 <head> 태그 안에만 포함될 수 있다.

<!DOCTYPE html>
<html>
   <head>
      <title>이 사이트의 제목</title>
   </head>
</html>

<a> Anchor Element

<a> 앵커 요소는 html 문서에 다른 페이지와 연결할 때 사용되는 하이퍼링크(hyperlinks)를 만들기 위해 사용된다.

하이퍼링크를 사용하면 다른 웹페이지, 같은 서버 안의 파일, 같은 페이지 안의 특정 위치, 또는 하이퍼링크 레퍼런스 속성(href)을 통한 다른 어떤 url이든 지정하여 이동할 수 있다.

href 속성은 앵커 속성이 지정할 위치를 정의한다.

만일 이미지를 링크로 바꾸고 싶다면, <img> 태그를 <a> 태그로 감싸면 된다.

<!-- 텍스트 링크 만들기 -->
<a href="https://andante-kim.tistory.com"> 내 블로그로 놀러오세요 </a>

<!-- 이미지 링크 만들기 -->
<a href="https://andante-kim.tistory.com"> 
   <img src="logo.jpg">이 이미지 클릭
</a>

<target> Target Attribute

<a> 앵커 요소에 있는 target 속성은 하이퍼링크가 어디에서 열릴지를 지정한다.
target="_blank" 값을 사용하면 최신 브라우저에서는 새 탭에서, 예전 브라우저나 하이퍼링크를 새 창에서 열도록 설정된 브라우저에서는 새 창에서 링크가 열리도록 브라우저에 알려주는 역할을 한다.

<a href="https://google.com" target="_blank">
   이 링크는 새 탭이나 새 윈도우에서 열린다.
</a>

File Path

HTML에서의 URL 경로는 절대 경로 또는 상대 경로이다.

예를 들어 절대경로는 https://andante-kim.tistory.com처럼 전체 URL을 사용하는 경우이며, 상대 경로는 같은 폴더나 같은 서버 안에 있는 로컬 파일을 가리키며 ./style.css와 같이 적을 수 있다.

상대 경로는 ./로 시작하고 그 뒤에 로컬 파일의 경로가 이어진다.
./는 현재 폴더를 기준으로 파일을 찾으라는 의미로, 브라우저에게 그 위치부터 파일을 찾아보라고 알려주는 역할을 한다.

<a href="https://andante-kim.tistory.com">절대경로 주소</a>

<a href="./about.html">상대경로 주소</a>

Unique ID Attributes

HTML에서는 각 요소를 구분하기 위해 특정하고 고유한 id 속성을 지정할 수 있다.

이렇게 지정된 id는 CSS나 JavaScript에서 해당 id 값을 불러와서 그 요소에만 스타일을 적용하거나 동작을 수행하는데 사용된다.

유효한 id 속성은 영문자로 시작해야 하며, 영문자(a-Z), 숫자(0-9), 하이픈(-), 밑줄(_), 마침표(.)만 포함할 수 있다.

또한 id는 하나의 문서에서 중복되면 안되므로 주의해서 사용해야 한다.

id는 특히 div에 속한 콘텐츠를 정리하거나 구분할 때 매우 유용하다.

<h1 id="A1">안녕하세요</h1>

HTML Attributes

HTML 속성(attribute)은 요소의 시작 태그에 추가되어 그 요소를 설정하거나 기본 동작을 변경할 수 있는 값이다.
아래 예시에서는 <p>(단락) 요소에 id 속성을 사용해 고유한 식별자를 부여하고, style 속성을 사용해 기본 텍스트 색상을 변경하였다.

<p id="hello" style="color:green;">안녕하세요!</p>

Link to a Different Part of the Page #

<a> 앵커 요소는 href 속성을 사용해 같은 HTML 문서 안의 다른 부분으로 하이퍼링크를 만들 수 있다.
이때 # 기호 다음에 이동하고자 하는 요소의 id를 붙여서 원하는 위치를 가리킨다.

예를 들어 href="#section1"이라고 하면, id="section1"인 요소로 이동하게 된다.

<div>
   <p id="a1">이곳으로 이동해보자.</p>
</div>

<a href="#a1">누르면 이동합니다.</a>

Whitespace

프로그래머는 요소간의 관계를 시각화하기 위해 줄바꿈(whitespace)과 들여쓰기를 사용한다. 두 도구 모두 브라우저에서 요소들의 위치는 html 파일에 있는 공백이나 들여쓰기의 양과는 무관하다는 점을 활용하고 있다.

HTML 문서에서 줄바꿈과 같은 공백(whitespace)은 블록 수준 요소들 사이에 추가되더라도 브라우저에서는 일반적으로 무시되며,
렌더링된 HTML 페이지에서 간격을 늘리는 용도로 적용되지 않는다.
대신, 이러한 공백은 HTML 문서 자체를 더 잘 정리하고 읽기 쉽게 만들기 위한 목적으로 사용된다.

즉, whitespace는 눈에 보이는 화면 간격이 아니라 코드 정리를 위한 요소이다.

<p>첫번째 문장</p>

<p>두번째 문장</p>

Indentation

HTML 코드는 중첩 수준이 깊어질 때마다 텍스트의 들여쓰기 수준도 한 단계씩 증가하도록 설정해야 한다.
보통 중첩 한 단계당 두 칸 또는 네 칸의 공백을 사용하는 것이 일반적인 관례이다.

<div>
  <h1>제목</h1>
  
  <ul>
    <li>아이템1</li>
    <li>아이템2</li>
  </ul>
</div>

Comments

HTML에서는 로 끝나는 사이에 주석(comments)을 추가할 수 있다.
주석 안에 있는 내용은 브라우저에 표시되지 않으며, 보통 코드의 일부를 설명하거나 추가적인 정보를 제공하는 용도로 사용된다.
주석은 한 줄 또는 여러 줄에 걸쳐 작성할 수 있다.

주석을 사용하는 이유는 다음과 같다.

코드를 완성한 후 먼 훗날 다시 코드를 볼 때 코드 작성자 자신이나 다른 사람이 쉽게 이해하도록 도울 수 있다.
이전 코드를 지우지 않고 새로운 코드를 작성할 수 있다.

<!-- 이해를 돕기 위해 주석을 달아봅시다! -->

HTML Tags

하나의 HTML 태그는 여는 꺾쇠 괄호 < 다음에 요소 이름이 오고, 닫는 꺾쇠 괄호 >로 마무리되는 형태로 작성된다.
예를 들어, 다음은 <div> 태그의 여는 태그이다.

<div>