초보자를 위한 HTML 페이지 제작 가이드

1. HTML 기본 구조

 

 

```html

HTML 기본 구조

HTML은 웹 페이지를 만들기 위한 언어로, 다음과 같은 기본 구조를 갖추고 있습니다:

• : HTML 문서의 버전과 유형을 정의합니다.
• : HTML 문서의 루트 요소로, 모든 요소를 감싸고 있습니다.
• : 문서의 메타데이터를 담고 있으며, 스타일 및 스크립트 파일을 링크할 수 있습니다.
• : 실제로 사용자에게 보여지는 내용을 포함하고 있습니다.

```

 

 

2. 제목(Header) 설정

 

 

```html

제목(Header) 설정

• h1: 문서의 주요 제목을 설정
• h2: 문서 내 하위 섹션의 제목을 설정
• h3: 하위 섹션의 하위 섹션의 제목을 설정
• h4: 섹션의 하위 섹션의 제목을 설정
• h5: 섹션의 하위 섹션의 하위 섹션의 제목을 설정
• h6: 문서 내용에서 사용하기 위한 부제목 설정

```

 

 

3. 단락(Paragraph) 작성

 

 

```html

• 단락(Paragraph)은 HTML 문서에서 텍스트를 나누는 데 사용됩니다.
• 단락은 p 태그를 사용하여 작성하며, 여는 태그 <p>와 닫는 태그 </p>로 구성됩니다.
• p 태그를 이용하면 각각의 텍스트 블록을 나누어 사용자에게 보다 쉽게 정보를 전달할 수 있습니다.
• 단락을 작성할 때는 문장 단위로 구성하여 내용을 명확하게 전달하는 것이 중요합니다.

```

 

 

4. 링크(Link) 추가

 

 

• 하이퍼링크(a 태그): 다른 웹페이지로 연결하는 링크를 만들 때 사용합니다.
• href 속성: 추가하려는 링크 주소를 지정합니다.
• target 속성: 링크를 어떤 방식으로 열지 설정할 수 있습니다.
• title 속성: 링크에 마우스를 올렸을 때 나타나는 툴팁을 설정할 수 있습니다.

 

 

5. 이미지(Image) 삽입

 

 

• 이미지 삽입 방법: 이미지를 삽입할 때는 <img> 태그를 사용한다.
• 이미지 경로 지정: 이미지 파일의 경로는 src 속성을 통해 지정한다.
• 대체 텍스트 제공: 이미지가 로드되지 않을 때 표시할 대체 텍스트는 alt 속성을 이용해 설정할 수 있다.
• 이미지 크기 조절: 이미지의 가로, 세로 크기를 조절하려면 width와 height 속성을 활용한다.
• 이미지 정렬: 이미지를 정렬하려면 align 속성을 사용하며, CSS를 통해 스타일링할 수도 있다.

 

 

6. 목록(List) 생성

 

 

```

• HTML: 웹 페이지의 기본 구조를 정의하는 언어
• CSS: 웹 페이지의 스타일을 꾸밀 수 있는 스타일 시트 언어
• JavaScript: 웹 페이지의 동적 기능을 추가할 수 있는 프로그래밍 언어
• 웹 호스팅: 웹 페이지를 인터넷 상에 공개할 수 있는 호스팅 서비스

```

 

 

7. 표(Table) 작성

 

 

• HTML Table은 웹페이지에 표를 작성하기 위한 태그입니다.
• <table> 태그를 사용하여 표의 전체를 감싸고, <tr> 태그를 사용하여 각 행을 정의합니다.
• 표의 각 셀은 <td> 태그로 구성되며, <th> 태그는 각 열이나 행의 제목을 정의합니다.
• 표에서 행을 구분하기 위해 <thead>, <tbody>, <tfoot> 태그를 사용할 수 있습니다.
• 표의 구조를 조정하기 위해 colspan(열 병합)과 rowspan(행 병합) 속성을 활용할 수 있습니다.

 

 

8. 폼(Form) 만들기

 

 

```html

• form 태그를 사용하여 폼을 만들 수 있습니다.
• `method` 속성을 사용해 데이터를 서버로 전송하는 방법을 지정할 수 있습니다.
• `action` 속성은 데이터를 전송할 서버 측 스크립트 파일의 URL을 지정합니다.
• `input` 태그를 사용해 사용자의 입력을 받을 수 있습니다. `type` 속성으로 입력 필드의 종류를 지정할 수 있습니다.
• `label` 태그를 사용하여 입력 필드에 라벨(설명)을 추가할 수 있습니다.
• `select` 태그를 사용하여 드롭다운 목록을 생성할 수 있습니다.
• `option` 태그를 사용하여 드롭다운 목록의 각 항목을 정의할 수 있습니다.
• `textarea` 태그를 사용하여 여러 줄의 텍스트를 입력할 수 있는 입력란을 만들 수 있습니다.
• 폼 데이터를 서버로 전송하는 방법에 대해 HTTP `GET`과 `POST` 메소드를 사용할 수 있습니다.

```