초코의 풀스택 도전기 5: HTML의 세계를 정리하다(2)

이전 편에서: 초코의 풀스택 도전기 4: HTML의 세계를 정리하다(1)

초코의 풀스택 도전기 4: HTML의 세계를 정리하다(1)

 

도입

초코는 이번 편에서 HTML의 태그뿐 아니라, 태그 외에 포함되는 다양한 요소들과 폼(form)을 통한 사용자와의 상호작용 방법을 더 깊이 탐구해보기로 했다. HTML은 단순히 태그로만 구성된 것이 아니라, 텍스트, 주석, 스크립트 등의 요소가 함께 포함되며, 웹사이트는 이를 통해 더욱 동적이고 사용자가 친화적인 경험을 제공할 수 있다.

 

3. 태그 외에도 들어가는 것들

HTML 문서에는 태그만 들어가는 게 아니다. 웹페이지를 구성하는 데 필요한 여러 요소들이 함께 포함될 수 있는데, 대표적으로 텍스트, 주석, 그리고 스크립트가 있다. 태그는 콘텐츠를 감싸며 브라우저에게 그 콘텐츠가 어떤 역할을 하는지 알려주지만, 그 안에 다양한 형태의 요소들이 들어갈 수 있다. 이 요소들이 각각 어떻게 작동하는지 알아보자.

1) 텍스트

태그 안에는 일반 텍스트가 포함되어 브라우저에 표시된다. 예를 들어, <p> 태그 안에 텍스트를 넣으면 해당 텍스트가 단락(paragraph)으로 표시된다.

<p>이 문장은 태그 안에 들어가는 텍스트입니다.</p>

 

여기서 <p> 태그는 브라우저에게 "이건 단락이야"라고 알려주며, 그 안의 텍스트가 웹페이지에 직접 표시된다. 태그는 텍스트를 감싸는 역할을 하며, 그 안의 텍스트가 사용자에게 보여지는 내용이 된다.

2) 주석

HTML에서 주석은 코드 설명이나 개발자 메모를 적는 데 사용된다. 주석은 브라우저에 표시되지 않고, HTML 코드 내부에만 보이는 설명으로 남는다. 주석은 다른 개발자가 코드를 이해하기 쉽도록 도와주거나, 일시적으로 특정 코드를 비활성화할 때 유용하다.

<!-- 이 부분은 주석입니다. -->
<p>이 문장은 브라우저에 표시됩니다.</p>

 

여기서 **<!-- 이 부분은 주석입니다. -->**는 브라우저에는 보이지 않으며, 코드 설명으로만 남는다. 주석은 코드 유지 보수와 이해를 돕는 중요한 요소이다.

 

3) 스크립트

HTML 문서에는 스크립트를 추가하여 웹페이지에 동적인 기능을 더할 수 있다. 스크립트는 주로 자바스크립트 코드를 HTML에 포함시켜, 사용자의 상호작용에 따라 웹페이지가 반응하도록 만든다. 예를 들어, 버튼을 클릭했을 때 알림을 표시하는 기능 등을 추가할 수 있다.

<script>
  alert('Hello, World!');
</script>

 

위 코드는 페이지가 로드될 때 팝업(alert) 창을 띄워 "Hello, World!" 메시지를 표시한다. 이렇게 <script> 태그 안에 자바스크립트 코드를 추가하여 웹페이지에 동적 동작을 구현할 수 있다.

 

4) 혼합 예시: 텍스트, 주석, 스크립트

HTML 문서 안에는 텍스트, 주석, 스크립트가 자유롭게 함께 들어갈 수 있다. 아래는 그 예시이다:

<!-- 페이지 시작 -->
<h1>초코의 웹페이지</h1>
<p>이 문장은 텍스트입니다. 웹페이지에 표시됩니다.</p>

<!-- 자바스크립트 추가 -->
<script>
  console.log('페이지가 로드되었습니다.');
</script>

 

여기서 <h1>과 <p> 태그는 제목과 단락을 표시하며, 주석은 코드 설명으로 사용된다. 또한, 스크립트는 개발자 콘솔에 '페이지가 로드되었습니다.'라는 메시지를 출력한다. 

 

4. 폼: 사용자와 상호작용하는 방법

초코는 웹사이트에서 사용자와 상호작용하는 데 중요한 역할을 하는 폼(form)에 대해 궁금해졌다. 폼은 사용자가 데이터를 입력하고, 그 데이터를 서버로 전송할 수 있는 인터페이스이다. 로그인, 회원가입, 검색 등에서 사용자가 정보를 입력할 때, 모두 폼을 이용한다. 웹 개발에서 폼은 사용자와 웹사이트 간의 데이터 교환을 가능하게 만드는 중요한 도구이다.

폼의 기본 구조

HTML 폼은 <form> 태그로 시작하며, 그 안에 다양한 입력 필드와 버튼 같은 요소들이 들어간다. 폼의 기본 목적은 사용자가 입력한 데이터를 서버로 전송하는 것이다.

<form action="/submit" method="POST">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">제출하기</button>
</form>

• 폼의 주요 속성
  • action: 폼 데이터를 처리할 서버의 URL을 지정하는 속성이다. 사용자가 폼을 제출하면 해당 URL로 데이터가 전송된다.
    • 예: action="/submit"은 데이터를 /submit 경로로 전송한다.
  • method: 데이터를 전송하는 방식으로, 주로 GET 또는 POST 방식이 사용된다.
    • GET: 데이터를 URL의 쿼리 스트링에 포함시켜 전송한다.
    • POST: 데이터를 HTTP 요청 본문에 포함시켜 전송한다. 보안이 필요한 데이터 전송에 주로 사용된다.

폼에서 사용하는 주요 요소들

1) <input> 태그: 사용자 입력 필드

사용자로부터 데이터를 입력받을 수 있는 필드다. 입력 필드의 타입에 따라 다양한 형태의 데이터를 받을 수 있다.

<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>

 

코드를 실행하면 아래와 같이 이메일을 입력받을 수 있도록 된다. 

2. <label> 태그: 입력 필드에 대한 설명

입력 필드에 대한 설명을 제공하는 태그로, 사용자에게 필드의 의미를 알려준다. for 속성을 사용해 입력 필드의 id와 연결된다.

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>

 

코드를 실행하면 아래와 같이 비밀번호를 입력할 수 있는 칸이 생성된다. 

3. <button> 태그: 폼 제출 버튼

<button> 태그는 사용자가 폼을 제출할 수 있는 버튼을 정의한다. type="submit" 속성을 사용하면, 폼의 데이터를 서버로 전송하는 제출 버튼으로 동작한다.

<button type="submit">로그인</button>

 

코드를 실행하면 로그인 버튼이 생성된 것을 확인할 수 있다.

다양한 입력 필드 예시

1. 텍스트 입력 필드 (type="text")

사용자가 자유롭게 텍스트를 입력할 수 있는 필드다.

<label for="name">이름:</label>
<input type="text" id="name" name="name" required>

 

2. 이메일 입력 필드 (type="email")

이메일 형식의 데이터를 입력받는 필드로, 잘못된 이메일 형식이 입력되면 오류가 발생한다.

<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>

 

3. 비밀번호 입력 필드 (type="password")

입력한 문자를 숨기는 비밀번호 입력 필드다 .

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>

 

4. 체크박스 (type="checkbox")

여러 옵션 중 하나 또는 여러 개를 선택할 수 있는 필드다 .

<label>
  <input type="checkbox" name="agree" required>
  이용 약관에 동의합니다
</label>

 

체크박스에 체크한 모습을 보여준다.

5. 라디오 버튼 (type="radio")

여러 옵션 중 하나만 선택할 수 있는 라디오 버튼이다. 여러 개의 옵션이 있지만, 동시에 하나만 선택 가능하다.

<label>
  <input type="radio" name="gender" value="male"> 남성
</label>
<label>
  <input type="radio" name="gender" value="female"> 여성
</label>

 

코드를 실행하면 남성, 여성에서 선택할 수 있도록 라디오 버튼이 생성된 것을 확인할 수 있다.

 

6. 드롭다운 목록 (<select>)

사용자가 선택할 수 있는 여러 옵션을 제공하는 드롭다운 목록이다.

<label for="job">직업:</label>
<select id="job" name="job">
  <option value="developer">개발자</option>
  <option value="designer">디자이너</option>
  <option value="manager">매니저</option>
</select>

 

코드를 실행하면 아래와 같은 화면이 나오고, 옵션을 개발자, 디자이너, 매니저 중에 선택할 수 있다.

폼의 동작 과정

1. 데이터 입력: 사용자가 텍스트 필드, 체크박스, 라디오 버튼 등을 통해 데이터를 입력한다.
2. 폼 제출: 제출 버튼을 클릭하면 입력한 데이터가 서버로 전송된다.
   1. GET: 데이터가 URL의 쿼리 스트링으로 전송된다.
   2. POST: 데이터가 HTTP 요청 본문에 포함되어 전송된다.
3. 서버에서 데이터 처리: 서버는 전송된 데이터를 받아 처리하고, 그에 맞는 응답을 반환한다.

 

전체 코드

아래는 지금까지 다룬 모든 내용을 반영한 전체 HTML 코드이다. 이 코드는 텍스트, 주석, 스크립트, 그리고 폼을 포함하여 웹페이지의 구조와 다양한 기능을 담고 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>초코의 웹페이지</title>
</head>
<body>
  <!-- 페이지 상단 헤더 -->
  <header>
    <h1>안녕하세요, 저는 초코입니다!</h1>
    <nav>
      <a href="#about">소개</a>
      <a href="#contact">연락처</a>
    </nav>
  </header>

  <!-- 자기소개 섹션 -->
  <section id="about">
    <h2>소개</h2>
    <p>이 문장은 텍스트입니다. 웹페이지에 표시됩니다.</p>
  </section>

  <!-- 주석 예시 -->
  <!-- 이 부분은 주석입니다. 이 코드는 개발자 참고용입니다. -->

  <!-- 자바스크립트 예시 -->
  <script>
    console.log('페이지가 로드되었습니다.');
  </script>

  <!-- 폼: 사용자 데이터 입력 -->
  <section id="contact">
    <h2>연락처</h2>
    <form action="/submit" method="POST">
      <!-- 이름 입력 -->
      <label for="name">이름:</label>
      <input type="text" id="name" name="name" required>
      <br>

      <!-- 이메일 입력 -->
      <label for="email">이메일:</label>
      <input type="email" id="email" name="email" required>
      <br>

      <!-- 비밀번호 입력 -->
      <label for="password">비밀번호:</label>
      <input type="password" id="password" name="password" required>
      <br>

      <!-- 성별 선택 (라디오 버튼) -->
      <label>
        <input type="radio" name="gender" value="male"> 남성
      </label>
      <label>
        <input type="radio" name="gender" value="female"> 여성
      </label>
      <br>

      <!-- 직업 선택 (드롭다운 목록) -->
      <label for="job">직업:</label>
      <select id="job" name="job">
        <option value="developer">개발자</option>
        <option value="designer">디자이너</option>
        <option value="manager">매니저</option>
      </select>
      <br>

      <!-- 약관 동의 (체크박스) -->
      <label>
        <input type="checkbox" name="agree" required>
        이용 약관에 동의합니다
      </label>
      <br>

      <!-- 제출 버튼 -->
      <button type="submit">제출하기</button>
    </form>
  </section>

  <!-- 페이지 하단 푸터 -->
  <footer>
    <p>© 2024 초코의 웹페이지</p>
  </footer>
</body>
</html>

 

코드 설명:

1. 헤더 (<header>): 제목과 내비게이션 링크를 포함한 웹페이지 상단 영역이다.
2. 텍스트 (<p>): 단락을 나타내며, 웹페이지에 표시되는 텍스트이다.
3. 주석 (<!-- -->): 코드 내에서 설명을 적을 수 있는 부분으로, 브라우저에 표시되지 않는다.
4. 자바스크립트 (<script>): 페이지가 로드될 때 콘솔에 메시지를 출력하는 코드이다.
5. 폼 (<form>): 사용자로부터 데이터를 입력받아 서버로 전송하는 인터페이스이다.
   • 입력 필드 (<input>): 이름, 이메일, 비밀번호 등의 데이터를 입력받는다.
   • 라디오 버튼 (<input type="radio">): 성별 선택을 제공한다.
   • 드롭다운 메뉴 (<select>): 직업 선택을 위한 드롭다운 리스트이다.
   • 체크박스 (<input type="checkbox">): 이용 약관 동의를 위한 체크박스이다.
6. 푸터 (<footer>): 페이지 하단에 저작권 정보가 포함된 영역이다.

이 코드를 통해 웹페이지의 구조와 기능을 체계적으로 구성할 수 있다. 각 섹션은 HTML 요소들이 어떻게 작동하는지 보여주며, 사용자 입력과 동적 기능도 함께 구현되었다.

결론

HTML 문서는 단순히 태그로만 이루어진 것이 아니다. 텍스트는 사용자에게 직접 표시되고, 주석은 개발자들을 위한 설명으로 사용된다. 또한, 스크립트는 웹페이지에 동적 기능을 추가한다. 폼은 사용자가 데이터를 입력하고 서버로 전송하는 중요한 도구로, 로그인, 회원가입, 검색 등의 기능을 구현하는 데 필수적이다.

 

이제 초코는 HTML을 통해 웹페이지가 어떻게 구성되고 동작하는지 더욱 깊이 이해하게 되었다. 이제 초코는 HTML에 대한 이해를 바탕으로 CSS를 배우고, 자신의 웹페이지를 더 아름답고 기능적으로 만들 준비가 되었다.

 

 

다음 편 에서 : 초코의 풀스택 도전기 6: CSS로 웹페이지에 옷을 입히다