HTML #1 문서 기본 구조

soso·2020년 11월 8일

HTML

목록 보기

1/2

1. HTML 문서 기본 구조

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> HTML 기본 구조 </title>
  </head>
  <body>
    <img scr="이미지.확장자">
    <p> 원하는 이미지를 넣으세요 </p>
  </body>
</html>

1-1. !doctype

문서 유형(document type)을 지정해주는 태그로 웹 문서의 시작을 알리는 html 태그보다 먼저 사용한다.

현재 문서가 HTML5 언어로 작성되었다는 것을 알려준다.

1-2. html

실제 문서 정보와 내용의 시작과 끝을 알려주는 태그이다.

lang: 언어 지정하는 속성

<html lang="ko"> #문서에서 사용할 언어를 한국어로 지정
  ...
</html>

언어 표기를 제대로 하지 않는다면, 웹 페이지에서 검색 기능을 제대로 이용할 수 없을 것이다.

1-3. head

웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아야할 정보들은 head 부분에 입력한다.

<title>: 웹 브라우저의 제목 표시줄에 표시되는 정보

<title> 문서 제목 </title>

<meta>: 문자 인코딩 방법을 지정

<meta charset="utf-8"> #화면에 한글 표시

1-4. body

실제 브라우저에 표시된 내용을 입력한다.

<h1>~<h6>: 제목 텍스트로, h1이 가장 크고 h6이 가장 작다.
<p>: 텍스트 앞뒤로 빈 줄을 만들어 텍스트 단락 생성
<br>: 줄 바꾸는 태그로, 닫는 태그 없음
<b>: 텍스트 진하게 표시
<i>: 텍스트 이탤릭체로 표시
<img>: 이미지 추가
<a>: 웹 문서나 외부 사이트 연결

<body>
  <h1> 제목 예시 </h1>
  <h2> 제목 예시 </h2>
  <h3> 제목 예시 </h3>
  <h4> 제목 예시 </h4>
  <h5> 제목 예시 </h5>
  <h6> 제목 예시 </h6>
  <p> 텍스트 단락을 만들어 봅시다 </p>
  <p> <b>텍스트</b> 단락을 <br>
    <i>만들어</i> 봅시다</p>
  <img scr="file_name.확장자">
  <a href="사이트주소"> 사이트 </a>

2. 실습

Notepad++에서 html 코드를 작성하였고, xampp의 Apache 모듈을 이용하여 코드를 확인하였습니다.

<!doctype html> 
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title> 원어스 - 붉은 실 </title>
	</head>
	<body>
		<h1> 눈을 감고 있어 아무도 없는 길 위에서 </h1>
		<h2> 헤매이고 있어 불어오는 바람마저도 </h2>
		<h3> 혹시나 들릴까 이름을 불러봐 </h3>
		<h4> 기억을 걷다 보면 </h4>
		<h5> 알게 될 거야 다 운명일 테니 </h5>
		<h6> 실을 따라갈게 미로 속을 헤매 </h6>
		<p> 조금 시간이 걸려도 널 잡을게 </p>
		<p> <b> 걱정하지 마 </b> 너와 나 <br>
		<i> 인연은 닿을 거야 </i> </p>
		<img src="red.png">
		<p><a href="https://vibe.naver.com/search?query=%EC%9B%90%EC%96%B4%EC%8A%A4%20%EB%B6%89%EC%9D%80%EC%8B%A4"> 붉은 실 ♬ </a></p>
	</body>
</html>

요즘 즐겨 듣는 노래 가사로 html 실습을 해 보며 태그와 속성이 어떻게 적용되는지 확인하였습니다.

※ 참고문헌

DO it! HTML5 + CSS3 웹 표준의 정석, 고경희 저, 이지스퍼블리싱