1. HTML이란?
하이퍼텍스트 마크업 랭귀지(Hyper Text Markup Language)의 줄임말이다. '하이퍼텍스트'란 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 뜻하고, '마크업'이란 태그(tag)를 사용해 제목이나 본문, 이미지 등을 표시하는 것을 뜻한다.
HTML에서 사용하는 태그들만해도 150개정도가 넘는데 자주 사용하는 tag를 우선 알아보고, 알고 있으면 편리한 태그는 무엇인지 스스로 판단하는 연습이 필요하다.
2. Tag 사용의 중요성
tag는 웹페이지 구성에 맞춰서 잘 사용하는 것이 중요한데, 예를 들면 블로그 제목에 coding을 쓸 때,
coding
<span style="font-size:24px">
coding
</span>
과
coding
<h4>coding</h4>두 가지 방법으로 코딩을 짤 수 있다. 웹 브라우저에서 봤을 때 글자 크기나 스타일은 똑같아 보이지만 검색엔진에서 coding을 검색했을경우 h3 태그를 사용한 후자가 더 검색이 잘 된다. 태그는 웹 문서에 표시하려는 내용을 전달하는 언어이기 때문에 정확하고 적절한 태그를 사용하는 것이 중요하다. 이 태그를 사용하기 전 기억해야할 몇 가지 사항들이 있다.
- 태그는 < >를 이용해 구분합니다.
예를 들면 이미지 삽입할 때는 'image'의 약자인 'img'를 < > 사이에 표시하면 < img >라는 태그를 사용한다. 웹 브라우저는 < > 안에 있는 문자는 태그로 인식한다!
- 태그는 소문자를 사용한다.
HTML 태그는 대소문자를 구별하지 않지만 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용하는 것을 권장한다. 그러니 꼭 소문자를 사용하자!
- 여는 태그와 닫는 태그를 정확히 입력한다.
앞에서 < h1 >로 태그를 열었으면 뒤에는 < /h1 >로 닫는 태그를 넣어주어야 태그 적용 범위로 인식한다. 닫는 태그도 있지만 닫는 태그가 필요한 태그에는 반드시 꼭 넣어줄 것!
- 들여쓰기를 사용한다.
단계별로 들여써서 태그간의 포함 관계를 눈으로 쉽게 확인할 수 있도록 적절히 들여쓰기를 사용하는 것이 좋다. 들여쓰기를 할 때는 Tab 키를 사용한다.
- 태그는 속성과 함께 사용한다.
<태그 속성="속성 값" 속성="속성 값" ... > 형태로 사용할 수 있다. 예를 들면
<img src = "이미지 파일 이름.." width=100%>의 경우에는 src 와 width는 태그의 보조 설명을 붙여주는 속성이 된다.
- 포함 관계를 명확히 해야한다.
HTML태그는 태그 안에 다른 태그를 포함시킬 수 있는데, 여는 태그와 닫는 태그를 정확히 맞춰 사용해야한다.
<u><i>코드뿌셔뿌셔박살박살</i></u>3. HTML 문서 기본 구조
<!doctype html>
<html>
<head>
<meta charset="uft-8">
<title>WEB1 - html</title>
</head>
<body>
<h1>제목제목제목이다!</h1>
<p>이건 내용 내용 내용 내용이지!</p>
</body>
</html>HTML 기본 구조
<!doctype html>은 웹 페이지가 HTML로 만들어졌다는 것을 뜻함. <html> : <body>와 <head>를 감싸는 태그로 웹 문서의 시작과 끝을 나타내는 태그. <head> : 본문을 설명하는 정보 태그. 실제 문서 내용이 아님. 스타일 및 스크립트 등 포함. <body> : 본문 내용 태그로 실제 웹 브라우저 화면에 나타나는 내용.
4. HTML의 다른 tag들
<title> : 웹 브라우저 제목 표시줄에 표시됨. 검색엔진은 제목 표시줄을 보고 페이지 전체의 내용 추측 <meta> : 문자 인코딩을 지정 <strong> : 문자를 진하게 표시함. <u> : 문자에 밑줄 <h1>~<h6> : 제목 텍스트. 일반 텍스트보다 크고 진하게 표시됨. h1이 가장 크게 표시됨. <p> : 문자 단락 생성. 정보로써 더 좋은 선택이 될 수 있음. <br> : 줄 바꾸기. 닫힌 태그 없음! 여러번 <br><br>하면 줄 많이 바꿀 수 있음.
