Microsoft의 Word나 구글 독스 등을 생각해봅시다. 이런 문서 편집기들은 여러 폰트와 사이즈, 스타일을 사용하죠. 또 여러분도 문서를 작성하며 제목, 본문, 마무리, 테이블, 이미지 등 다양한 콘텐츠를 사용해봤을거에요.
우리는 이런 문서를 볼 때 단숨에 본문과 해더, 이미지 등을 구별할 수 있습니다. 문맥을 파악할 수 있죠. 하지만 컴퓨터는 그런 직관을 가지고 있지 않습니다. 브라우저에서 문서를 정확하게 렌더링하기 위해선 각각의 콘텐츠가 무엇인지 명시적으로 표현해 주어야 하죠.
이 그림을 보고 단숨에 페이지의 콘텐츠들이 파악이 되죠? 우리의 컴퓨터는 그런 행위가 불가능합니다.
HTML을 이용한 구조 정의
구체적으로 어떻게 브라우저에 명시적으로 표현해 줄 수 있을까요? 여기서 바로 Hyper Text Markup Language(HTML)이 등장합니다.
HTML은 Markup language로 Structure/Layout에 대한 묘사를 제공해줍니다. 우리는 HTML elements로 콘텐츠를 감싸서 이런 구조를 정의하죠.
모든 HTML element는 태그를 이용해 형성됩니다. 각각의 콘텐츠에 대한 묘사가 가능하죠(descriptor). 예를 들어 p태그는 parahraph를 나타냅니다.
구체적인 예시를 보며 HTML에 대해 좀 더 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>A Basic Web Page</title>
</head>
<body>
<h1>My First HTML File</h1>
<p>Contratulations! You're well on your way to creating your own web pages.</p>
</body>
</html>첫 라인의 <!DOCTYPE html>은 도큐먼트 타입을 정의합니다. 브라우저에게 어떤 버전의 HTML로 작성되었는지 명시해주는 역할이죠. 위 파일의 경우 HTML5로 작성되었습니다.
이후 <html>태그부터 각각의 태그가 중첩되어 표시되고 있습니다. html의 가장 큰 특징은 이렇게 요소들이 중첩되어 표현이 가능하다는 것입니다. 이런 중첩은 tree형태의 자료구조를 만들어냅니다.
가장 부모인 html태그 안에는 head, body 태그가 존재합니다.
head는 보통 메타데이터를 표현하는데 사용됩니다. 또한 반드시 title태그를 갖고 있어야 합니다. 또한 javascript, CSS 파일도 포함할 수 있습니다.
화면에 표시되는 주요 내용은 body태그에 포함됩니다. 여기에 있는 내용이 우리의 브라우저에 표시되죠. body태그는 반드시 하나만 존재합니다.
HTML attributes
HTML attributes는 HTML element에 대한 추가적인 정보를 제공합니다. element의 프로퍼티로 생각할 수 있습니다. 각각의 HTML element는 한개 또는 여러개의 프로퍼티를 가질 수 있습니다(물론 없을수도 있구요).
예시를 하나 살펴봅시다.
<h2 title="This is a subheading">Hello, World!</h2>Attributes는 opening tag에 들어갈 수 있습니다. 공백을 기준으로 구분되며 key=value형태로 정의합니다. key와 value사이에 공백이 없는 것에 주의합시다.
Anchor elements / hyperlinking
World Wide Web의 가장 중요한 측면은 web의 다른 부분과 연결될 수 있는 능력입니다. 다른 HTML로 redirect할 수 없다면 "web"이라는 개념도 존재할 수 없죠.
우리는 anchor tag를 이용해 hyperlink를 만들어 HTML페이지를 다른 페이지에 연결시킬 수 있습니다.
<a href="http://www.google.com">Google</a>href attribute는 값이 URL인 Hypertext Reference를 나타냅니다. href가 나타낼 수 있는 ref종류는 다음과 같습니다.
- Email Address
- Phone Numbers
- Documents/Files
- 현재 페이지의 다른 부분
Headings
h1태그는 다들 익숙하시죠? 표준 HTML은 6개의 heading elements를 가지고 있습니다. h1~h6죠.
heading elements는 폰트 사이즈를 변경하기 위해 사용되어선 안됩니다. 1~6까지의 레벨은 semantic을 잘 나타내기 위해 사용되어야 합니다. main-header, sub-header 등의 의미이죠.
semantic, font-size등의 내용은 다음에 더 자세히 살펴보겠습니다.
Lists
우리의 웹페이지는 많은 경우 점이나 숫자로 표현되는 리스트를 포함합니다. 이런 표현은 HTML lists를 통해 만들 수 있습니다.
Unordered lists
to-dos같은 리스트를 만들때 사용할 수 있습니다. ul태그를 이용하여 만들며 각각의 요소(item)은 li태그를 이용해 표현합니다.
<h1>Grocery Items</h1>
<ul>
<li>Butter</li>
<li>Milk</li>
<li>Eggs</li>
<li>Cereal</li>
</ul>Ordered lists
item들이 특정한 순서를 가지고 있는 경우 사용될 수 있습니다. ol태그를 이용해 나타내며 item은 동일하게 li를 이용해 나타냅니다.
<ol>
<li>칫솔과 치약을 집는다.</li>
<li>치약을 짜서 칫솔에 묻힌다</li>
<li>이빨을 부드럽게 닦는다.</li>
<li>물로 이빨과 칫솔을 행구고 칫솔을 제자리에 놓는다.</li>
</ol>List element attributes: type & start
type attribute는 list의 style을 변경할 수 있도록 도와줍니다. 가질 수 있는 값은 다음과 같습니다.
ul 태그일 경우
- circle
- disc
- square
ol태그일 경우
- 1: Default numeric scheme
- I: Upper-case Roman numerals
- i: Lower-case Roman numerals
- A: Upper-case Alphabet
- a: Lower-case Alphabet
Ordered list는 start라는 또 다른 attirbute를 가질 수 있습니다. 이 태그는 시작하는 숫자의 값을 1 외의 다른 값으로 설정할 수 있도록 도와줍니다.
Inline vs block-level elements
HTML element의 콘텐츠가 렌더링되는 방법을 더 잘 이해하기 위해 inline, block-level에 대한 차이점을 이해해야 합니다.
Block-level elements
block-level HTML elements는 웹 페이지의 full width를 차지합니다.콘텐츠의 주변에 "block"을 형성하죠. 또 기본적으로 block-level element는 새로운 라인에서 시작합니다. 우리가 위에서 살펴본 대부분의 elements가 block-level elements입니다.
- Headings(h1~h6)
- Lists
- List Items(li)
- Paragraphs(p)
Inline elements
이름이 말해주듯 full width를 차지하지 않으며, content를 줄로 표현합니다. 또한 브라우저에서 렌더링 될 때 새로운 라인에서 시작하지 않습니다. inline-element들은 대표적으로 다음과 같습니다.
- Anchors(a)
- Images
- Bolding Text(strong)
- Emphasizing Text(em)
Divs
block-level element인 Div는 section을 나눌 수 있도록 도와줍니다. div태그는 특별한 무언가를 렌더링하지 않고, 콘텐츠를 여러 그룹으로 묶어서 나눌때 자주 사용됩니다. 이를 이용해 페이지를 구조적으로 나누는 것이 가능합니다.
id + class Attributes
id, class attributes는 특정 HTML elements를 구분하는데 사용할 수 있습니다.
id attribute는 unique identifier를 구성할 수 있도록 도와줍니다. 나중에 CSS, Javascript에서 특정 element를 구분할 때 사용할 수 있습니다. id를 사용할때는 다음과 같은 내용을 지켜야 합니다.
id값은 element별로 중복되지 않게 유니크해야 합니다. (오류는 없지만 안좋은 결과가 나올 수 있습니다)id값은 공백을 포함해선 안됩니다.- 하나의 element는 여러개의 id값을 가질 수 없습니다.
class 태그는 특정한 element를 구별한다는 점에서 id 와 유사합니다. 가장 다른 차이점들은 다음과 같습니다.
- 여러 elements가 같은 값을 가질 수 있습니다.
- 하나의 element가 여러 class 값을 가질 수 있습니다. 공백으로 구분하여 나타냅니다.
Images
img 태그를 이용해 웹페이지에 이미지를 넣을 수 있습니다. src attribute는 표시할 이미지의 경로를 나타내는데 사용됩니다. alt attribute는 image가 로드되지 않는 경우 대체할 문구를 표시하거나 시각장애가 있는 분들께 제공될 정보를 표현할 때 사용됩니다.
다른 태그들과 다르게 img 태그는 closing tage가 없습니다.
<!-- Incorrect img declaration -->
<img src="path/to/image/img.jpg" alt="A image"></img>
<!-- Correct img declaration -->
<img src="path/to/image/img.jpg" alt="A image">출처
- educative.io
짱짱