HTML 파일 만들기, 예제코드 입력 방법
HTML 에 대해 하나부터 열까지 차근차근 알려드릴게요!
우선 HTML을 배울 때 html 파일을 어떻게 만들고 예제에 나오는 코드를 어디에 입력해야 하는지부터 알아야 과정을 따라오실 수 있습니다.
### 1. HTML 파일 만들기
먼저, HTML 코드를 기록할 파일을 만들어야 합니다. 이를 위해 텍스트 편집기를 사용합니다. Windows에서는 메모장(Notepad), Mac에서는 텍스트 편집기(TextEdit), 또는 더 나은 편집기로 Visual Studio Code, Sublime Text 등을 사용할 수 있습니다.
#### Windows (메모장 사용 예시)
1. **메모장 열기**:
- `Windows 키`를 누르고 "메모장"을 검색하여 엽니다.
2. **HTML 코드 입력**:
- 메모장에 아래의 HTML 코드를 입력합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 HTML 문서</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 기본 HTML 문서의 예제입니다.</p>
</body>
</html>
3. **파일 저장**:
- `파일(File)` 메뉴를 클릭한 다음 `다른 이름으로 저장(Save As)`을 선택합니다.
- 파일 이름을 `example.html`로 지정하고, 파일 형식을 `모든 파일(All Files)`로 선택한 후, 원하는 위치에 저장합니다.
#### Mac (텍스트 편집기 사용 예시)
1. **텍스트 편집기 열기**:
- `Finder`를 열고, `응용 프로그램(Applications)` 폴더에서 `텍스트 편집기(TextEdit)`를 찾습니다.
2. **HTML 코드 입력**:
- 텍스트 편집기에서 새 문서를 열고, 아래의 HTML 코드를 입력합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 HTML 문서</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 기본 HTML 문서의 예제입니다.</p>
</body>
</html>
3. **파일 저장**:
- `파일(File)` 메뉴를 클릭한 다음 `다른 이름으로 저장(Save As)`을 선택합니다.
- 파일 이름을 `example.html`로 지정하고, `형식(Format)`을 `일반 텍스트(Plain Text)`로 선택한 후, 원하는 위치에 저장합니다.
### 2. HTML 파일 실행하기
HTML 파일을 저장한 후, 웹 브라우저를 사용하여 파일을 열어볼 수 있습니다. 대부분의 웹 브라우저는 HTML 파일을 직접 열 수 있습니다. 예를 들어, Chrome, Firefox, Safari, Edge 등에서 가능합니다.
#### 실행 방법
1. **파일 탐색기 열기**:
- HTML 파일을 저장한 위치로 이동합니다.
2. **HTML 파일 열기**:
- `example.html` 파일을 더블 클릭합니다.
- 기본 웹 브라우저가 실행되면서 HTML 파일을 렌더링하여 표시합니다.
3. **웹 브라우저에서 확인**:
- 웹 브라우저에서 HTML 문서의 내용을 확인할 수 있습니다.
- 예제에서는 "안녕하세요!"라는 제목과 "이것은 기본 HTML 문서의 예제입니다."라는 문단이 표시될 것입니다.
이렇게 하면 HTML 코드를 작성하고, 저장하고, 실행하는 과정을 완료할 수 있습니다.
이제 기본중에 기본을 이해하셨으니 다음 글부터 보시면서 차근차근 따라해 보시겠어요?^^
댓글
댓글 쓰기