웹 또는 앱을 만들 때 꼭 사용되는 세 가지: HTML, CSS, JS 중 한 가지인 HTML 에 대해서 알아보자.
1. HTML 은 HyperText Markup Language, 즉 '구조를 표현하는 언어' 이다.
HTML 구조와 문법
HTML 구조는 부모가 하나이고 자식이 여러 가지인 트리 구조를 가지고 있다.
HTML 은 다양한 tag 들의 집합이다. (<> 부등호로 묶인 HTML 의 기본 구성 요소)
<!DOCTYPE HTML>
<html>
<head>
<title>About elk</title>
</head>
<body>
The truth about elk.
</body>
</html>
Opening tag, Closing tag, Self-closing tag 들이 존재한다.
- <div>나 <span> 같은 태그들은 </div>나 </span> 과 같이 꼭 태그를 닫아줘야 한다.
이 외에 몇 가지 Self-closing tag 들은 아래와 같이 정리했다.
- <area /> – clickable area inside an image map
- <base /> – new root or base path for relitive paths
- <br /> – single line break in a paragraph
- <embed /> – embeds things like flash
- <hr /> – change in type of content
- <iframe /> – frame inside the page
- <img /> – image
- <input /> – input field
- <link /> – include an external style sheet
- <meta /> – metadata about the page
- <param /> – parameter for an object
- <source /> – include media for video or audio
- <track /> – text track for video or audio
Most Used Tags in HTML / 자주 사용되는 HTML 요소(element)들을 몇 가지 알아보자.
- div & span
- 'div' 태그는 한 줄 전체를 차지하며, 줄 바꿈이 된다.
- 반면에, 'span' 태그는 태그 안의 컨텐츠 크기만큼 공간을 차지하며, 줄 바꿈이 되지 않는다.
- ul, ol, li 의 차이
- 'li' 태그는 태그 이름에서 유추할 수 있듯이, list를 의미한다.
- 'ul' 태그는 'unordered list'의 약자로, 지금 리스트들과 같은 bullet point 형식으로 리스트들이 담긴다.
- 'ol' 태그는 'ordered list'의 약자로, 번호가 매겨진 리스트들이다.
- input type
- 다양한 종류의 input type 들이 있다. (Ex., text, radio, checkbox 등)
- 그 중 'radio' 버튼은 name 속성으로 보기들을 묶어주지 않는다면 여러개 동시 선택이 가능해지기 때문에, 꼭 묶어줘야 한다.
- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
- HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
- img : 이미지 삽입
- <img src="link address">
- a : 링크 삽입
- <a href="link address"> </a>
- 새 탭으로 열기 : <a href="link address" target="_blank"> </a>
Head vs Body
위에 언급한 HTML 기본 구조에서 head 와 body 부분이 예전에 내가 헷갈렸듯 많은 사람들이 간혹 헷갈릴 수 있다.
이 두개의 차이 점은, 우리 눈에 보이는 것 (body) 와 눈에 보이지 않는 것 (head) 이라는 것만 알면 된다.
그럼 head 에는 뭐가 들어갈까?
우선은 HTML의 Head 부분에는 해당 페이지의 타이틀과, CSS 파일을 연결해주는 link 를 적는 정도로 우선 알고 지나가자.