[HTML] 기초

HTML(Hypertext Markup Language) : 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드, 컨텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게 하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져 있다.

1. 요소

요소는 태그(여는 태그, 닫는 태그)와 컨텐츠로 이루어져 있다.

요소는 위와 같이 속성도 가질 수 있으며, 컨텐츠로 표시되지 않는 추가적인 정보를 담고 있다. 속성의 조건은 다음과 같다.

2. 문서 기본 틀

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Title of Page</title>
  </head>
  <body>
  
  </body>
</html>

HTML 문서의 기본 구성이라고 하면 다음과 같다.

<!DOCTYPE html> - 모든 HTML문서의 최상단에서 찾을 수 있는 필수 서문이다. 브라우저가 문서를 렌더링 할 때 "quirks mode"(en-us)로 바뀌지 않도록 하는 것이 유일한 목적이다.
<html></html> - 페이지 전체의 컨텐츠를 감싸며, 루트 요소라고도 한다. 문서의 고유 언어를 설정하는 lang 속성을 포함한다.
<head></head> - 페이지를 조회하는 사람들에게 보여주는 컨텐츠가 아닌 제작자가 HTML 페이지에 포함하고 싶어 하는 재료들을 위한 컨테이너 역할을 한다. 여기에는 검색 결과에 표시되길 원하는 페이지 설명, CSS, 문자 집합 선언 등과 같은 것들을 포함한다.
<meta charset="utf-8"> - 문서가 사용할 문자를 utf-8로 설정한다.
<title></title> - 페이지 제목을 설정한다. 로드된 페이지 브라우저의 탭에 나타나는 제목이다. 북마크나 즐겨찾기에서 페이지를 설명하는 용도로도 쓰인다.
<body></body> - 페이지에 방문한 사용자들에게 보여주길 원하는 모든 컨텐츠를 담고 있다.

3. 태그

3.1. 텍스트 관련

<h[1-6]> : 제목을 표시할 때 사용된다. <h1>이 가장 크고 <h6>이 가장 작다. <h1>은 한 문서 안에 하나만 사용하는 것이 권장된다.
<p> : paragraph, 새 문단을 연다.
<b> : bold, 볼드(두껍게) 효과를 준다.
<i> : italic, 이텔릭(기울임 꼴) 효과를 준다.
<strong> : 강조 효과를 준다.
<em> : <strong>보다 약한 강조를 나타낼 때 사용한다.
<ins> : insert, 밑줄을 표시한다.
<del> : delete, 취소선을 표시한다.
<s> : strikethough, 취소선을 표시한다. 약한 삭제의 의미를 가진다.
<u> : underline, 밑줄을 표시한다. 주로 철자 오류 지적에 쓰인다는 점이 <ins>와 구분된다.
<sup> : superscript, 텍스트를 위첨자로 표시한다.
<sub> : subscript, 텍스트를 아래첨자로 표시한다.
<small> : 텍스트를 조금 더 작게 표시한다.
<br> : line break, 문단 내 줄 바꿈을 한다.
<hr> : horizontal rule, 가로줄을 넣는다.
<abbr> : 약어를 설명하기 위한 태그이다.
<wbr> : 글이 길어지면 띄어쓰기가 없어도 이 태그가 쓰인 부분에서 자동 개행이 이루어진다.
<blockquote> : 인용구를 기술하는 태그이다.
<q> : <bloackquote>의 인라인 버전.

3.2. 목록 관련

<li>와 </li> 사이에 목록을 넣으면 하위 목록도 만들 수 있다.

3.3. 링크, 이미지 관련

<a> : anchor, 하이퍼링크를 생성하는 태그이다. href 속성을 써서 <a href="링크"> 내용 </a>와 같이 작성한다.
<img> : image, 페이지에 이미지를 추가하는 태그이다.
- src 속성 : 이미지 파일의 경로를 지정한다.
- alt 속성 : 이미지를 볼 수 없는 경우에 이미지에 대한 설명을 제공한다.
- title 속성 : 이미지에 대한 추가정보를 제공한다. 로고 이미지에 마우스르 갖다 대면 말풍선으로 뜬다.
- height, width 속성 : 이미지의 세로, 가로폭을 지정한다.

3.4. 테이블 관련

3.5. 기타

<style> : CSS 사용. 되도록이면 <link> 태그를 쓰기를 권장한다.
<script> : 스크립트를 사용한다. type 속성 생략 시 자바 스크립트로 인식한다.
<div> : 박스 또는 레이어. 일명 '웹 표준' 개념이 많은 사람들에게 퍼지게 된 이후 테이블 태그 대신 레이아웃을 만드는 데 자주 사용되고 있다.
<span> : <div>의 인라인 버전이다.

세테크