초코의 풀스택 도전기 3: HTML의 기초를 다지다 - 웹의 뼈대를 만드는 방법

스토리텔링 2024. 9. 22. 12:04

이전 편에서 : 초코의 풀스택 도전기 2: 프론트엔드의 문을 두드리다 - HTML, CSS, JavaScript를 만나다

초코의 풀스택 도전기 2: 프론트엔드의 문을 두드리다 - HTML, CSS, JavaScript를 만나다

풀스택 개발의 전반적인 개념을 어느 정도 이해한 초코는 드디어 프론트엔드 세계의 문턱에 섰다. 초코의 목표는 사용자에게 보이는 웹사이트의 외관을 만들고, 그들이 어떻게 경험하는지 이해

ethub.tistory.com

도입

초코는 마침내 HTML을 배울 준비를 마쳤다. 하지만 곧 중요한 질문이 떠올랐다.
"이 코드는 어디에 입력해야 하지? 그냥 종이에 적는 건 아니겠지?"

이 질문에 잠시 고민하던 초코는 중요한 사실을 깨달았다. 코딩을 위해서는 먼저 편집기를 설치해야 한다!

편집기 선택 (Choosing a Code Editor)

초코는 VSCode라는 편집기를 사용하기로 결정했다. “왜 VSCode를 사용해야 할까?” 초코는 스스로 질문해보았다. 그 이유는 간단했다.

VSCode를 선택한 이유:

사용하기 쉬움: 초보자도 쉽게 다룰 수 있는 직관적인 인터페이스를 제공한다.
강력한 확장성: HTML, CSS, JavaScript용 플러그인과 확장 기능을 통해 작업을 효율적으로 진행할 수 있다.
자동 완성 기능: 초코가 코드를 타이핑할 때 자동으로 완성해주는 기능이 있어 시간을 절약할 수 있다.

VSCode 설치 방법:

VSCode 공식 사이트에 접속해 자신의 운영체제에 맞는 설치 파일을 다운로드한다.
설치 파일을 실행하고, 지시에 따라 설치를 완료한다.
설치 후 VSCode를 실행하면 모든 준비가 완료된다. 실행하면 다음과 같은 화면이 나온다.

편집기 세팅 (Setting Up the Editor)

초코는 HTML을 배우기 전에, 먼저 코드 편집기를 세팅해야 한다는 것을 알게 되었다. HTML 코드를 작성하고, 그 결과를 바로 웹 브라우저에서 확인하려면 VSCode의 확장 탭에서 Live Server를 설치해야 한다.

Live Server 확장 설치

VSCode에서 HTML 파일을 쉽게 실시간으로 브라우저에서 확인하려면 Live Server라는 확장을 설치해야 한다.

VSCode의 왼쪽에 있는 확장(Extensions) 아이콘을 클릭한다.
검색 창에 'Live Server'를 입력한 후,
목록에서 Live Server를 선택해 설치(Install) 버튼을 클릭한다.
설치가 완료되면, HTML 파일을 열고 마우스 우클릭한 후 **'Open with Live Server'**를 선택하면 브라우저에서 실시간으로 HTML 결과를 확인할 수 있다.

이제 초코는 VSCode와 Live Server를 이용해 코드를 작성하고, 실시간으로 결과를 확인할 수 있게 되었다.

1. HTML의 기본 개념 (Basic Concepts of HTML)

이제 초코는 HTML의 기본 구조를 배우기로 했다. HTML은 웹페이지를 구성하는 언어로, 웹 브라우저가 이 코드를 해석해 화면에 페이지를 표시한다. 그럼 HTML 문서는 어떻게 구성되고, 각 부분에 어떤 내용을 입력해야 할까?

HTML 문서의 기본 틀

HTML 문서는 크게 네 가지 필수 요소로 나뉜다:

<!DOCTYPE html> 선언: HTML5 문서임을 선언하는 부분
<html> 태그: HTML 문서의 전체 구조를 감싸는 태그로, 문서의 시작과 끝을 나타냄
<head> 태그: 웹페이지의 메타 정보(페이지 제목, 인코딩 방식 등)를 담는 부분
<body> 태그: 웹페이지에서 실제 화면에 표시되는 내용을 담는 부분

다음은 초코가 작성한 기본 HTML 문서의 예시다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>초코의 프로필 페이지</title>
  </head>
  <body>
    <h1>안녕하세요! 저는 초코입니다.</h1>
    <p>프로그래밍을 배우고 있는 초보 코더입니다.</p>
  </body>
</html>

각 부분의 역할을 자세히 알아보자.

<!DOCTYPE html> 선언:
- 이 선언은 브라우저에게 "이 문서는 최신 버전의 HTML5 형식을 따릅니다"라고 알리는 역할을 한다.
- 모든 HTML 문서는 이 선언으로 시작해야 한다.
<html> 태그:
- 이 태그는 HTML 문서의 시작과 끝을 나타낸다. 모든 HTML 코드는 <html> 태그 안에 들어가야 한다.
- (중요) 웹페이지의 모든 요소는 <html> 태그 안에 있어야 브라우저가 인식할 수 있다.
<head> 태그:
- 웹페이지의 메타 정보(meta information)를 담고 있는 부분이다. 메타 정보란 페이지의 제목, 문자 인코딩 방식, 검색 엔진이 인식할 정보 등을 의미한다.
- 위 코드에서는 <title>초코의 프로필 페이지</title>가 웹페이지의 제목을 설정하고, <meta charset="UTF-8">은 문자 인코딩 방식을 UTF-8로 지정한다. UTF-8은 대부분의 언어를 지원하는 인코딩 방식이다.
- 이 태그 안에 작성된 내용은 브라우저 상단의 탭 제목에 표시되거나 검색 엔진에 의해 사용된다.
<body> 태그:
- 이 부분은 웹페이지에서 실제로 보이는 내용을 담고 있다.
  <h1>, <p> 같은 태그는 모두 <body> 안에 작성해야 하며, 이 안에 있는 모든 내용이 브라우저에 표시된다.
- 위 코드에서는 <h1>안녕하세요! 저는 초코입니다.</h1>가 제목을 표시하고, <p>프로그래밍을 배우고 있는 초보 코더입니다.</p>가 간단한 설명을 출력한다.
- (중요) 화면에 표시할 텍스트, 이미지, 링크 등 모든 웹페이지 요소는 반드시 <body> 안에 위치해야 한다.

초코는 이 기본 구조를 작성하고, 브라우저에서 열어보았다.

"와! 이게 내가 만든 첫 번째 웹페이지야!" 초코는 웹페이지가 실제로 브라우저에 표시되는 모습을 보고 놀라워했다.

실습 단계:

이제 여러분도 초코처럼 HTML의 기본 구조를 따라해 보세요!
VSCode와 Live Server를 사용하여 첫 번째 웹페이지를 만들고 실시간으로 결과를 확인할 수 있습니다.

VSCode에서 새 파일을 생성하세요.
- 파일 이름은 test.html 로 저장합니다. (파일 이름 끝에 .html 확장자를 꼭 붙여야 합니다.)
위에 나와 있는 코드를 test.html 파일에 작성하세요.
파일을 저장하고, 마우스 오른쪽 버튼을 클릭한 뒤 Open with Live Server를 선택하세요.
브라우저가 자동으로 열리며, 위 코드에서 작성한 내용을 화면에 확인할 수 있습니다.
- 웹페이지가 열리면, "안녕하세요! 저는 초코입니다."라는 제목과
  "프로그래밍을 배우고 있는 초보 코더입니다."라는 문장이 표시될 것입니다.

2. 시맨틱 HTML (Semantic HTML)

초코는 이제 시맨틱 HTML을 배우기로 했다. "시맨틱? 그게 뭐지?" 초코는 처음에는 이 용어가 낯설었지만, 웹페이지를 더욱 의미 있게 만드는 중요한 개념이라는 것을 깨달았다.

시맨틱 HTML은 단순히 웹페이지를 구성하는 태그들을 사용하는 것이 아니라, 각 태그의 의미와 역할을 명확히 정의하여 웹페이지의 구조를 더 잘 이해할 수 있도록 하는 것이다. 예를 들어, <div> 태그는 아무런 의미가 없는 블록 요소이지만, <header>, <footer>, <article> 등의 시맨틱 태그는 그 안에 포함된 내용이 무엇을 위한 것인지 명확하게 표현해 준다.

왜 시맨틱 HTML을 사용할까?

초코는 시맨틱 HTML이 왜 중요한지에 대해 알아보기 시작했다.

구조적 명확성
- 시맨틱 HTML을 사용하면 웹페이지의 구조가 더 명확해진다. <header>나 <nav>, <section> 같은 태그들은 각각이 어떤 역할을 하는지 설명해 준다. 예를 들어, <header>는 페이지나 섹션의 상단을 의미하고, <footer>는 하단을 나타낸다. 이렇게 각 태그가 가지는 의미를 통해 웹페이지의 구조가 논리적으로 구성된다.
접근성(Accessibility)
- 시맨틱 태그를 사용하면 보조기기를 사용하는 사용자들이 웹페이지를 더 쉽게 이해할 수 있다. 스크린 리더 같은 장치가 시맨틱 태그를 해석해 사용자에게 그 부분이 무엇을 의미하는지 알려주기 때문에, 장애가 있는 사용자에게도 친화적인 웹페이지가 된다.
검색 엔진 최적화(SEO)
- 시맨틱 HTML은 검색 엔진이 웹페이지의 내용을 더 잘 이해하고 인덱싱할 수 있도록 돕는다. 검색 엔진은 시맨틱 태그를 통해 중요한 콘텐츠가 어디에 있는지, 페이지의 구조가 어떻게 구성되는지 쉽게 파악한다. 예를 들어, <article> 태그를 사용하면 그 안의 내용이 주요 본문이라는 것을 검색 엔진이 알 수 있다.
유지보수와 협업
- 웹페이지의 구조가 명확해지면, 코드를 읽는 다른 개발자들이 쉽게 이해할 수 있다. 시맨틱 HTML을 사용하면 코드가 직관적이기 때문에, 협업할 때도 소통이 원활해지고 유지보수도 쉬워진다.

시맨틱 HTML 예시

초코는 시맨틱 HTML을 이용해 자신만의 블로그 구조를 만들어 보기로 했다. 예전에는 단순히 <div> 태그로만 구성된 웹페이지를 만들었지만, 이제는 시맨틱 태그를 사용해 더 명확하고 의미 있는 웹페이지를 구성해 보았다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <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>

    <section id="contact">
      <h2>연락처</h2>
      <p>이메일: choco@example.com</p>
    </section>

    <footer>
      <p>Copyright © 2024 초코의 블로그</p>
    </footer>
  </body>
</html>

시맨틱 태그 설명:

<header>: 웹페이지나 섹션의 상단에 사용되는 태그로, 보통 제목이나 내비게이션 링크를 포함.
<nav>: 내비게이션 메뉴를 정의하는 태그로, 사용자들이 페이지 내 다른 섹션으로 쉽게 이동할 수 있도록 도와줌.
<section>: 페이지의 구체적인 섹션을 정의하며, 각각의 섹션은 특정 주제나 기능을 설명.
<footer>: 페이지 하단의 부가 정보를 나타내는 태그로, 보통 저작권 정보나 연락처를 포함.

시맨틱 HTML을 사용하지 않은 경우:

시맨틱 HTML을 사용하지 않으면, 코드가 단순히 레이아웃을 나열하는 것처럼 보여 웹페이지의 의미를 명확히 파악하기 어렵다. 반면 시맨틱 태그를 사용하면, 각 부분의 의미와 역할이 명확해진다.

<div>
  <div>초코의 블로그</div>
  <div>소개 | 연락처</div>
  <div>
    <p>저는 웹 개발을 배우고 있는 초보 코더입니다.</p>
    <p>이메일: choco@example.com</p>
  </div>
  <div>© 2024 초코의 블로그</div>
</div>

초코는 이제 웹페이지를 더 체계적으로 만들 수 있게 되었다. "이제 사람들이 내 블로그를 쉽게 탐색할 수 있겠어!" 초코는 시맨틱 태그가 얼마나 유용한지 깨달았다.

실습: 나만의 시맨틱 HTML 페이지 만들기

이제 초코처럼 여러분도 시맨틱 태그를 사용해 더 의미 있는 웹페이지를 만들어 보세요! 웹페이지를 구성할 때, 각 태그가 어떤 의미를 가지는지 생각하면서 페이지를 만들어 보면, 시맨틱 HTML의 중요성을 더 잘 이해할 수 있을 것입니다.

3. HTML 폼 요소 (HTML Form Elements)

초코는 이제 HTML 폼 요소를 배우기로 했다. 폼은 웹페이지에서 사용자와 상호작용할 수 있는 중요한 기능이다. 예를 들어, 블로그에 댓글을 남기거나, 가입 신청을 하거나, 메시지를 보낼 때도 폼이 필요하다.

폼 요소의 기본 개념

HTML 폼은 주로 사용자에게서 데이터를 입력받아 서버로 전송하는 데 사용된다. 텍스트 입력 필드, 이메일 필드, 버튼 등이 폼의 주요 요소다.

HTML 폼 예시

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>초코의 연락처 폼</title>
  </head>
  <body>
    <h1>연락처 폼</h1>
    <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>
      <button type="submit">제출하기</button>
    </form>
  </body>
</html>

각 폼 요소의 설명:

<form>: 폼의 시작과 끝을 나타내는 태그로, 데이터를 서버로 전송하기 위한 정보를 담는다.
- action 속성: 폼 데이터를 처리할 서버의 URL을 지정한다.
- method 속성: 데이터 전송 방식을 지정한다. (GET 또는 POST)
<input>: 사용자가 데이터를 입력할 수 있는 필드를 나타낸다.
- type="text": 텍스트를 입력할 수 있는 필드.
- type="email": 이메일 형식의 데이터를 입력할 수 있는 필드.
<button>: 폼을 제출할 수 있는 버튼이다.

폼 요소 사용 예시

초코는 위 코드를 통해 이름과 이메일을 입력받는 폼을 만들었다. 이 폼을 사용해 방문자는 이름과 이메일을 입력한 후, '제출하기' 버튼을 누르면 데이터를 서버로 전송할 수 있다.

실습: 폼 요소를 활용한 나만의 연락처 페이지 만들기

이제 여러분도 초코처럼 HTML 폼 요소를 사용해 연락처 페이지를 만들어 보세요! 웹페이지에서 사용자의 데이터를 입력받아 서버로 전송하는 기능을 직접 구현해 보세요.

4. 프로젝트: 초코의 HTML로 나만의 프로필 페이지 만들기

초코는 HTML의 기본을 배우면서 자신이 배운 것을 활용해 프로필 페이지를 만들어 보기로 결심했다. 여러분도 초코와 함께 지금까지 배운 HTML 태그를 활용해 나만의 프로필 페이지를 만들어 볼 수 있다. 이 프로젝트는 실습을 통해 시맨틱 태그와 폼 요소를 사용하여 더 의미 있는 웹페이지를 만들어보는 기회가 될 것이다.

프로젝트 목표:

HTML의 다양한 태그를 사용해 나만의 프로필 페이지를 구성해 본다.
시맨틱 태그와 폼 요소를 활용하여 구조적이고 의미 있는 웹페이지를 만든다.

단계별 가이드

1) 페이지의 기본 틀 만들기

먼저, 우리가 만드는 페이지는 개인 프로필 페이지다. 그럼 이 페이지를 어떻게 구성할지 생각해보자. 페이지는 보통 아래와 같은 구조를 가진다:

상단에 제목과 내비게이션 메뉴가 있는 헤더.
자신의 소개를 담은 자기소개 섹션.
자신이 가진 기술을 설명하는 기술 섹션.
사용자로부터 연락처 정보를 입력받는 섹션.

이렇게 각 부분을 시맨틱 태그를 사용해 구조화해 보자.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>초코의 연락처 폼</title>
  </head>
  <body>
    <!-- 헤더 -->
    <header>
      <h1>안녕하세요! 저는 초코입니다.</h1>
      <nav>
        <a href="#about">소개</a>
        <a href="#skills">기술</a>
        <a href="#contact">연락처</a>
      </nav>
    </header>
  </body>
</html>

설명:

<header> 태그를 사용해 페이지 상단의 제목과 내비게이션 메뉴를 작성했다. 내비게이션 메뉴는 <nav> 태그 안에 들어가고, 사용자가 클릭하면 각 섹션으로 이동할 수 있도록 앵커 링크를 설정했다.
<h1>은 웹페이지의 가장 큰 제목을 나타낸다. "안녕하세요! 저는 초코입니다."라는 인사말을 보여준다.

2) 자기소개 섹션 추가하기

자신의 간단한 소개를 적을 자기소개 섹션을 만들자. <section> 태그를 사용해 이 부분을 구분할 수 있다.

    <!-- 자기소개 섹션 -->
    <section id="about">
      <h2>소개</h2>
      <p>저는 웹 개발을 배우고 있는 초보 코더 초코입니다. 현재 HTML을 배우고 있으며, 앞으로 CSS와 JavaScript도 배울 계획입니다.</p>
    </section>

설명:

<section> 태그는 웹페이지의 특정 섹션을 나타낸다. 여기서는 자기소개 섹션으로 사용했다.
<h2>는 섹션의 제목으로, 여기서는 "소개"라는 제목을 사용했다.
<p> 태그는 단락을 나타내며, 자신에 대한 간단한 설명을 작성했다.

3) 기술 섹션 추가하기

이번에는 여러분이 어떤 기술을 가지고 있는지 나열하는 기술 섹션을 만들어보자. 여기서는 목록 태그를 사용하여 기술을 나열할 수 있다.

    <!-- 기술 섹션 -->
    <section id="skills">
      <h2>기술</h2>
      <ul>
        <li>HTML</li>
        <li>CSS (학습 예정)</li>
        <li>JavaScript (학습 예정)</li>
      </ul>
    </section>

설명:

<ul> 태그는 순서가 없는 목록을 만들 때 사용한다. 여기서는 배우고 있는 기술들을 나열하는 데 사용했다.
<li> 태그는 각각의 목록 항목을 나타낸다. HTML, CSS, JavaScript 등의 기술을 나열했다.

4) 연락처 섹션 만들기 (폼 요소 사용)

마지막으로, 여러분이 만든 페이지에서 방문자가 이름과 이메일을 입력할 수 있는 연락처 폼을 추가해보자.

    <!-- 연락처 섹션 -->
    <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>
        <button type="submit">메시지 보내기</button>
      </form>
    </section>

설명:

<form> 태그는 사용자로부터 데이터를 입력받아 서버로 전송하기 위한 부분이다.
- action="/submit": 폼이 전송될 URL을 지정한다.
- method="POST": 데이터를 전송하는 방법을 정의한다.
<label> 태그는 입력 필드에 대한 설명을 나타낸다. 여기서는 이름과 이메일을 입력받기 위한 설명을 추가했다.
<input> 태그는 실제로 데이터를 입력받는 필드다. type="text"는 텍스트를 입력받는 필드이고, type="email"은 이메일 형식의 데이터를 입력받는다.
<button> 태그는 폼을 제출하는 버튼을 나타낸다. 버튼을 클릭하면 사용자가 입력한 데이터를 전송하게 된다.

5) 푸터 추가하기

    <!-- 푸터 -->
    <footer>
      <p>Copyright © 2024 초코의 프로필 페이지</p>
    </footer>

설명:

<p> 태그를 사용해 간단한 텍스트를 푸터에 작성했다.

6) 프로젝트 결과

이제 여러분은 프로필 페이지를 완성했습니다. 이 페이지는 시맨틱 태그와 폼 요소를 사용해 의미 있고 구조적인 웹페이지를 만들어보는 실습 프로젝트였다. 초코와 함께 첫 번째 프로필 페이지를 만들면서, 웹페이지가 어떻게 구성되는지, HTML 태그가 어떻게 사용되는지에 대해 더 깊이 이해할 수 있었다. 아래는 전체 코드를 보여준다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>초코의 연락처 폼</title>
  </head>
  <body>
    <!-- 헤더 -->
    <header>
      <h1>안녕하세요! 저는 초코입니다.</h1>
      <nav>
        <a href="#about">소개</a>
        <a href="#skills">기술</a>
        <a href="#contact">연락처</a>
      </nav>
    </header>
    <!-- 자기소개 섹션 -->
    <section id="about">
      <h2>소개</h2>
      <p>저는 웹 개발을 배우고 있는 초보 코더 초코입니다. 현재 HTML을 배우고 있으며, 앞으로 CSS와 JavaScript도 배울 계획입니다.</p>
    </section>    
    <!-- 기술 섹션 -->
    <section id="skills">
      <h2>기술</h2>
      <ul>
        <li>HTML</li>
        <li>CSS (학습 예정)</li>
        <li>JavaScript (학습 예정)</li>
      </ul>
    </section>
    <!-- 연락처 섹션 -->
    <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>
        <button type="submit">메시지 보내기</button>
      </form>
    </section>   
    <!-- 푸터 -->
    <footer>
      <p>Copyright © 2024 초코의 프로필 페이지</p>
    </footer>
  </body>
</html>

여러분도 이 예시를 참고하여, 자신만의 정보로 페이지를 구성해보고, HTML 태그를 어떻게 활용할 수 있을지 실험해 보세요!

5. 마무리 (Conclusion)

초코는 이번 챕터에서 HTML의 기본 구조와 시맨틱 태그, 그리고 폼 요소를 배우며, 자신의 프로필 페이지를 완성했다. 이제 초코는 단순히 텍스트를 나열하는 것이 아닌, 의미 있는 구조와 사용자와의 상호작용을 포함한 웹페이지를 만들 수 있는 기초를 다졌다. 프로필 페이지를 만들면서 초코는 웹 개발의 첫 단계를 성공적으로 마쳤고, 웹페이지가 어떻게 작동하는지에 대한 더 깊은 이해를 가지게 되었다.

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

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

도입초코는 웹 개발을 시작한 지 얼마 되지 않았지만, 벌써부터 머릿속에 수많은 물음표가 떠올랐다. "태그? 그게 뭘까? HTML은 그냥 텍스트를 나열하는 것 같지만, 정말 그게 다일까? 그리고 폼이

ethub.tistory.com

'스토리텔링' 카테고리의 다른 글

초코의 풀스택 도전기 6: CSS로 웹페이지에 옷을 입히다 (0)	2024.10.01
초코의 풀스택 도전기 5: HTML의 세계를 정리하다(2) (2)	2024.09.28
초코의 풀스택 도전기 4: HTML의 세계를 정리하다(1) (0)	2024.09.28
초코의 풀스택 도전기 2: 프론트엔드의 문을 두드리다 - HTML, CSS, JavaScript를 만나다 (0)	2024.09.21
초코의 풀스택 도전기 1: 초보 코더 초코의 이야기 - 풀스택(Full Stack)이란 무엇일까? (0)	2024.08.11

ABOUT ME

EduTech Hub EduTech Hub

도입

편집기 선택 (Choosing a Code Editor)

편집기 세팅 (Setting Up the Editor)

1. HTML의 기본 개념 (Basic Concepts of HTML)

HTML 문서의 기본 틀

실습 단계:

2. 시맨틱 HTML (Semantic HTML)

왜 시맨틱 HTML을 사용할까?

시맨틱 HTML 예시

시맨틱 HTML을 사용하지 않은 경우:

실습: 나만의 시맨틱 HTML 페이지 만들기

3. HTML 폼 요소 (HTML Form Elements)

폼 요소의 기본 개념

HTML 폼 예시

각 폼 요소의 설명:

폼 요소 사용 예시

실습: 폼 요소를 활용한 나만의 연락처 페이지 만들기

4. 프로젝트: 초코의 HTML로 나만의 프로필 페이지 만들기

프로젝트 목표:

단계별 가이드

2) 자기소개 섹션 추가하기

3) 기술 섹션 추가하기

4) 연락처 섹션 만들기 (폼 요소 사용)

5) 푸터 추가하기

6) 프로젝트 결과

5. 마무리 (Conclusion)

'스토리텔링' 카테고리의 다른 글

티스토리툴바

ABOUT ME

도입

편집기 선택 (Choosing a Code Editor)

편집기 세팅 (Setting Up the Editor)

1. HTML의 기본 개념 (Basic Concepts of HTML)

HTML 문서의 기본 틀

실습 단계:

2. 시맨틱 HTML (Semantic HTML)

왜 시맨틱 HTML을 사용할까?

시맨틱 HTML 예시

시맨틱 HTML을 사용하지 않은 경우:

실습: 나만의 시맨틱 HTML 페이지 만들기

3. HTML 폼 요소 (HTML Form Elements)

폼 요소의 기본 개념

HTML 폼 예시

각 폼 요소의 설명:

폼 요소 사용 예시

실습: 폼 요소를 활용한 나만의 연락처 페이지 만들기

4. 프로젝트: 초코의 HTML로 나만의 프로필 페이지 만들기

프로젝트 목표:

단계별 가이드

2) 자기소개 섹션 추가하기

3) 기술 섹션 추가하기

4) 연락처 섹션 만들기 (폼 요소 사용)

5) 푸터 추가하기

6) 프로젝트 결과

5. 마무리 (Conclusion)

'스토리텔링' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바