[HTML] HTML 기초
HTML 기초
Achievement Goals
- HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
- HTML이 Markup language라는 것을 이해할 수 있다.
- “구조를 표현하는 언어” 라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
- Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
- div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
- ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
- input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
- 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
- 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
- HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.
HTML 기본 구조
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello</h1>
<div>
</div>
</body>
</html>
자주 사용하는 Tag
이미지 출처: https://www.advancedwebranking.com/html/
HTML의 기본 구조
<HTML>
<HEAD>
<TITLE>문서의 제목</TITLE>
</HEAD>
<BODY>
내용
</BODY>
</HTML>
이 내용을 기반으로 자주 사용되는 Tag를 정리해봤다.
- html
: 웹 페이지 시작과 끝. 웹 페이지는 <html>로 시작해서 </html>로 끝난다
<! doctype>는 문서 유형을 지정하는것. 웹 브라우저가 페이지를 어떻게 해석해야 하는지 알려준다.
- head
: 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
<title>, <meta> 등이 들어간다.
- body
브라우저에 실제 표시되는 내용
- div & span
콘텐츠들을 그룹핑할때 사용.
<div></div>는 한줄만큼,
<span></span>은 콘텐츠 크기만큼 공간을 차지한다.
- a
anchor, 웹 페이지나 외부 사이트 링크해주는 태그
<a href="연결할 링크 경로">내용</a> 형식으로 사용
*<a>에서 사용할 수 있는 속성 값
1) target : 새 창 or 새 탭에서 링크를 열 때 사용
_balnk 새로운 탭 or 창
_self 현재 탭 or 창
_parent 현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창
_top 최상위 탭 or 창, 없으면 현재 탭 or 창
2) title : 링크의 툴팁을 표시(커서 올렸을 때 나오는 내용)
<a href="연결할 링크 경로" title="링크내용 설명">
3) id : 같은 페이지 안에서 이동할 때 사용
이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만든다
- script
실행 가능한 코드를 웹 페이지에 포함시킬때 사용한다.
주로 javascript 코드를 넣을때 사용한다 // <body> 맨 마지막에 삽입
- link
외부 파일을 연결할 때 사용.
<link hrel="외부 css파일 경로" rel="stylesheet" type="text/css">
- img
이미지 삽입
<img src="이미지 경로">
<img> 태그 하나당 1개의 이미지를 삽입할 수 있다.
- p
단락을 나누는 태그로 쌍으로 존재, 정보로서 좀더 가치있는 태그, sementic tag,
시각적으로 부족한 경우 css를 사용해서 좀더 정교하게 표현할 수 있다
- ul & li & ol
<ul>
<li>의 부모태그로 반드시 자식태그를 가진다
Unordered list의 약자로 점이 앞에 찍힌다
<ol>
<li>의 부모태그로 반드시 자식태그를 가진다
Ordered list의 약자로 숫자가 앞에 찍힌다
<li></li>
어디서부터 어디까지가 서로 연관된 항목인지 경계를 짓기위한 그루핑 필요
부모태그가 필요하다
- style
스타일 정보를 정의할 때 사용하는 태그
<head></head> 사이에 넣어서 사용한다.
- br
닫지 않는 태그, 시각적인 효과만, 줄 바꾸기, 줄바꾸기 여러번 하고 싶으면 중복해서 사용가능
- hn
h1~h6까지 있다. <h1>이 글자가 제일 크고 <h6>로 갈수록 작아진다.
시맨틱 태그
프로그래밍에서 시맨틱은 조각의 요소를 의미한다. html의 경우 시맨틱 요소는 “이 페이지에서 최상위 제목” 인 텍스트를 감싸는 역할(또는 의미)를 나타낸다.
시맨틱 태그 종류
form, table, img, 등이 있으며, HTML5에서 추가된 시맨틱 태그는 아래와 같다.
header : 헤더를 의미
nav : 네비게이션을 의미
aside : 사이드에 위치하는 공간을 의미
section : 본문의 여러 내용 (article)을 포함하는 공간을 의미
article : 본문의 주 내용이 들어가는 공간을 의미
footer : 푸터를 의미
왜 시맨틱 태그를 사용하는가
시맨틱 태그는 html 문서를 보다 직관적으로 알아볼 수 있게 하는 효과를 지닌다. 태그 이름만 봐도 웹 문서에서 어떤 역할을 하는지 추측이 가능하다. 또한 문서가 구조적으로 정확하게 분리되면서 다양한 디바이스의 화면에서 더 표현하기 쉬워졌다. 또한 검색엔진이 html을 분석할 때 보다 더 정확한 컨텐츠를 식별하기 쉬워 빠르고 정확하게 정보를 찾아낼 수 있게 된다.