[NBread] 초보도 따라하는 엔빵계산기 만들기3

728x90

HTML 이란? (HyperText Markup Language)

HTML (HyperText Markup Language) 은 웹 페이지의 뼈대를 만드는 언어입니다.
쉽게 말해, 웹 사이트의 기본 구조를 담당하는 역할을 합니다.
웹사이트를 만든다 = HTML로 뼈대를 만들고, CSS로 꾸미고, JavaScript로 기능을 추가하는 것으로 함축할수 있습니다.

HTML 문서의 기본 구조

웹 페이지를 만들려면 HTML 문서의 기본 구조를 알아야 합니다.
HTML은 여러 가지 태그(tag) 를 사용해서 웹 페이지를 구성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

이 코드가 웹 페이지의 기본 구조의 예시입니다.

<!DOCTYPE html> : HTML5 버전 문서임을 선언
<html lang="ko"> : 문서의 시작 (한국어 설정)
<head> : 웹페이지의 제목, 설정 정보 포함
<title> : 브라우저 탭에 표시될 제목
<body> : 화면에 보이는 실제 콘텐츠

HTML 태그(Tag)란?

HTML 태그는 웹 페이지의 요소(텍스트, 이미지, 버튼 등)를 만드는 역할을 합니다.
태그는 항상 <태그이름>내용</태그이름> 형식으로 감싸요.

태그	역할
<h1> ~ <h6>	제목(Heading)
<p>	문단(Paragraph)
<a>	링크(Anchor)
<img>	이미지(Image)
<ul> <ol> <li>	목록 (Unordered List, Ordered List, List Item)
<button>	버튼(Button)
<input>	사용자 입력 필드(Input Field)

<h1>제목 태그 예제</h1>
<p>이것은 문단입니다.</p>
<a href="https://www.google.com">구글로 이동</a>
<img src="image.jpg" alt="이미지 설명">
<button>클릭하세요!</button>

웹 페이지의 기본 구조 만들기

우리가 만들 더치페이 계산기의 구조를 파악해봅시다.
1. 인원 수 입력 : 몇 명이서 나눌지 입력
2. 총 금액 입력 : 전체 금액 입력
3. 계산 버튼 : 버튼을 누르면 계산
4. 결과 표시 : 1인당 부담해야 할 금액 표시

HTML 만들기

html 파일을 만들어서 웹페이지의 기본 구조를 작성해봅시다.

파일생성

VScode를 열어서 File- Open Folder를 눌러주세요.

원하는 위치에 폴더를 생성해주세요.

그럼 아래와 같이 생선된 폴더가 보입니다.

아래와 같이 New File을 눌러서 파일을 생성해주세요.

파일명은 index.html으로 생성하겠습니다.

자 이제 오른쪽에 생성된 파일이 열렸습니다.

아래의 소스코드를 전부 복사해서 열려있는 에디터에 붙여넣기 해주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>더치페이 계산기</title>
</head>
<body>
    <h1> 더치페이 계산기</h1>

    <label for="people"> 인원 수:</label>
    <input type="number" id="people" placeholder="몇 명인가요?" >

    <label for="total"> 총 금액:</label>
    <input type="number" id="total" placeholder="총 금액을 입력하세요" >

    <button id="calculate"> 계산하기</button>

    <h2> 결과</h2>
    <p id="result">여기에 계산 결과가 표시됩니다.</p>
</body>
</html>

h1 : 제목 표시
label + input : 사용자가 인원 수 & 총 금액 입력
button : 계산 버튼
p : 계산 결과를 표시할 공간

붙여넣기 한 다음 우클릭 - Open with Live Server을 클릭해줍니다.

웹브라우저가 하나 열리면서 위와같은 화면이 보였을겁니다.

HTML은 이렇게 웹페이지에 핵심이 되는 골격을 생성합니다.

다음시간에는 위에 만든 페이지를 CSS를 통해서 좀더 이쁘게 다듬어 보겠습니다!