Spike!

HTML은 웹의 구조를 담당합니다. HTML이 전반적인 골격을 잡으면, 거기에 CSS가 색채와 디자인을 더하고, Javascript가 interactivity를 담당합니다. 이 중 제일 쉬우면서도, 근본이 되는 것이 바로 HTML입니다. HTML을 풀어서 쓴것이 Hypertext markup language인데, 이때 markup = content입니다. 브라우저는 웹사이트의 content 구조에 대한 설명을 HTML을 통하여 받습니다. 무엇이 타이틀이고, 무엇이 링크인지, 구글이 사이트를 검색하기 위해서 무슨 키워드를 사용하는지.. 등에 대한 정보를 HTML로 받는 것이죠.

HTML를 작성하는 일반적인 방식은 다음과 같습니다

<tagname attributename=”attributevalue”> content </tagname>

태그를 통해 content를 감싸줍니다. attribute(특성)는 이것의 추가적인 정보를 전달합니다. 특성 이름 = "값" 형식으로 이루어지는데, 이때 ""(큰따옴표)를 활용해야 합니다.

HTML문서의 전반적인 골자는 다음과 같습니다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

보시면 head와 body의 큰 두가지 부분으로 html이 나눠지는 것을 확인할 수 있습니다. head는 페이지에 관한 기본적인 세팅을 하는 곳입니다. 여기에 있는 내용들은 html을 브라우저를 통해 열었을 때 보여지지 않습니다. 브라우저 화면 상에 보여질 내용은 전부 body태그 안에 있어야 합니다. head 태그 안에는 다양한 정보들을 작성할 수 있습니다. 구글에 html tag를 검색하면 수많은 값들이 나오는데요, 이를 전부 외우지 말고 필요할 때마다 찾아서 쓰시는 편이 낫습니다.

이런건 좀 알아둘 필요도 있어보입니다. 이것은 브라우저에게 text를 어떤식으로 구현해야 되는지를 말해주는 것입니다. 올바르지 않은 charset value를 입력하면 텍스트가 깨져보일 수 있습니다.

meta태그는 메타데이터를 제공합니다. 사이트 자체의 정보, 사이트 설명 등이 해당 태그안에 들어갑니다.

body태그 안에 브라우저에서 html을 열었을 때 보이는 컨텐츠들을 작성하실 수 있습니다. <ol>과 <ul>을 통해, 각각 ordered/unordered list를 작성할 수 있습니다.

<ol>

<li>목록1</li>

<li>목록2</li>

</ol>

<a>(anchor)는 다른 웹사이트로 이동하는 태그입니다. 앵커에는 어디로 이동하는지에 대한 부가적인 정보가 필요한데, 이때 href라는 attribute를 통해 이를 지정합니다. href는 hyperlink reference로, href="링크"의 형식으로 이동하려는 링크를 지정해주시면 됩니다.

<img/>태그입니다. Self-closing tag이기 때문에 다른 태그들과 다르게 /로 닫아주는 태그가 없습니다. <img src="이미지링크"> 의 형식인데, 내 컴퓨터에 있는 이미지나 온라인상에 이미지 모두 사용할 수 있습니다. src는 <img/>에서만 사용하는 attribute입니다.

태그에는 semantic태그와 non-semantic tag가 있습니다. semantic tag라 함은, html 문서를 보기만 해도 그것이 무엇인지 짐작 가능한 것을 뜻합니다. 대표적인 non-semantic tag인 <div>는 박스(구획)역할을 합니다. html의 구획을 나누기 위해 div를 남용하다 보면 html 작성자는 편할 수 있겠지만, 읽는 자의 입장에서는 <div>안의 컨텐츠가 무엇을 의미하는지 알아차리기 어려울 것입니다. 이러한 <div>남용을 피하기 위해서 semantic tag를 열심히 사용하는 것이 좋습니다.

<body>

<header>

<h1>This is title</h1>

</header>

</body>

여기서 header를 div로 바꾸어도 html을 실행했을 때 아무 차이는 없습니다. 다만 html문서를 읽는 사람은 이것이 제목이구나 하고 쉽게 알아차릴 수 있는 것이죠. <main>(내용), <footer>(꼬릿말)등의 다양한 semantic tag가 있습니다. 코드를 보고 직관적으로 이해할 수 있게 이들을 애용하는 것이 좋습니다

body안의 어떤 태그에나 넣을 수 있는 attribute가 있습니다. 이것은 id입니다. id가 고유 식별자 이기 때문입니다. 따라서 하나의 element당 단 하나의 id만 넣을 수 있고, 이것은 고유해야 합니다.

Web1. HTML