HTML 02

기본구성

html은 사람처럼 머리(head)와 몸(body)으로 구성된다. 그래서 이해가 쉽다. html5에는 html4와 달리 이렇게 이해하기 쉬운 몇몇 태그들이 추가되었다. head태그 속에는 사이트의 기본 설정, 타이틀, 설명, 자바스크립트 링크, css파일의 링크 등 기본적인 설명 및 이 html파일이 연계하여 사용할 다른 플러그인들에 대한 정보가 담긴다. body태그는 실제로 시각적으로 표시할 내용에 해당하는 정보들이 담긴다.

<!doctype html>
<head>사이트의 설정, 요약</head>
<body>내용, 정보, 콘텐츠</body>

head와 body태그를 전체를 다시 html태그로 감싸주는 것이 관례였으나, html5에서는 첫 줄에 선언이 제대로 되었다면 바로 head태그로 시작할 수 있다. html태그와 head태그 때문에 전체적으로 앞부분에 2차례의 들여쓰기되는 부분이 상당히 낭비고 코드를 복잡하게 보이게 만든다.

<head>

  1. 한글이 원활하게 나올 수 있도록 문자셋을 설정해야 한다.
  2. 사이트의 제목(title)이 필요하다. 검색 엔진이 기본적으로 수집하는 항목이고, 브라우저 탭에 표시되는 내용이기도 하다.
  3. 한글 웹폰트를 설정한다. PC의 경우, 폰트만 설정해도 많은 것이 달라보이기 때문에 우선 복붙해보자.

위의 세 가지 사항이 가장 필수적이다.

<!doctype html>
<head>
	<meta charset="utf-8">
	<title>예제 기사</title>
	<link href='//spoqa.github.io/spoqa-han-sans/
	css/SpoqaHanSans-kr.css' 
	rel='stylesheet' type='text/css'>
</head>
<body>내용, 정보, 콘텐츠</body>

<body>

자 실제 기사의 내용에 해당하는 정보 형식은 많지 않다. 제목, 글, 이미지 이렇게 세가지 태그만 알고 있으면 간단한 기사는 충분히 작성할 수 있다.

  1. 제목(heading)은 <h1>태그다. h1, h2, h3, h4, h5, h6에 따라 여섯가지의 서로다른 태그가 존재하지만 글자크기를 css에서 담당하면서 h1을 제외한 나머지 태그는 쓰임새가 줄었다.
  2. 단락(paragraph)은 <p>태그다. 단락 구분이 잘 되어 있어야 읽기 편한 페이지가 되므로 가장 중요한 태그라고 할 수 있다. 단락 별로 p태그를 사용하여 마킹해야 한다.
  3. 이미지(image)는 <img>태그다. 이미지태그에는 이미지의 경로를 넣어주어야 한다.
<!doctype html>
<head>
	<meta charset="utf-8">
	<title>이미지의 이름설정</title>
	<link href='//spoqa.github.io/spoqa-han-sans
	/css/SpoqaHanSans-kr.css' rel='stylesheet' 
	type='text/css'>
</head>
<body>
	<h1>이미지 이름은 반드시 영문으로!</h1>
	<img src="./img/image-name.jpg">
	<p>웹사이트에 이미지를 삽입할 적에 가장 빈번한 실수는 
	이미지의 이름을 한글로 작성하는 것입니다. 반드시 이미지 이름은 
	영어로 작성해야 합니다. 그리고 여러 단어로 구성될 경우, 최근의 
	경향은 하이픈을 사용하여 구분하는 것이 좋습니다. 
	‘intro-image-01.jpg’와 같이 영문 소문자와
	하이픈을 사용하는 버릇을 들이는 것이 제일 좋습니다.</p>
	<p>한 가지 더 팁을 말씀드리자면, 이미지를 html파일과 
	같은 폴더에 넣게 되면 나중에 너무 복잡해지므로 
	‘img’와 같이 이미지 폴더를 
	별도로 만드는 것이 좋습니다</p>
</body>