[할 일 목록 #1] HTML 으로 기본 페이지 만들기 (To-do list)

강의 목표:

html으로 할 일 목록의 기본 페이지를 만들겠습니다. 이번 시간에 만들 html 페이지의 모습입니다. 처음에는 사용자 입력칸, 버튼, 제목, 리스트를 추가 하겠습니다.

완성된 모습:

See the Pen todo list html only by David Kijung Park (@ramiram) on CodePen.

파일 만들기:

먼저 이번 프로젝트에 쓰일 파일들을 만들 '할 일 목록' 폴더를 만들어 줍니다. 여기에 프로젝트에 필요한 파일들을 만들 예정입니다.

폴더 안에 이번 강의에 사용할 index.html 파일을 만들어 줍니다. (보통 웹 사이트들의 시작 지점 파일은 index.html으로 이름 짓습니다.)

따라오시면서 중간중간에 index.html 파일을 크롬이나 사파리와 같은 브라우저로 열면 만드는 과정을 볼 수 있습니다. 맨 아래 이번 강의에서 완성된 코드가 있으니 참고하셔도 좋습니다.

기본 HTML 페이지의 틀:

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      <!-- 제목 -->
    </title>
  </head>
  <body>
    <!-- 컨텐츠 -->
  </body>
</html>

아직 시작도 안 했는데 뭐가 이렇게 많냐고요? 걱정하지 마세요. 복사만 하시면 됩니다. html 파일의 기본 틀이라고 생각하시면 되고 계속 이용하실 수 있습니다. 위에 기본 틀은 거의 모든 웹사이트에서 사용된다고 볼 수 있습니다.

위에 제공된 기본 코드를 새로 만든 index.html 파일에 복사합니다.

코드 설명:

<!DOCTYPE html> 이 파일이 html임을 선언해 줍니다. 모든 html 파일은 이 선언으로 시작해야 합니다. 여기서 html은 이 파일이 html5 파일임을 설명합니다.

<html> 이 태그 안에 모든 html 내용이 들어갑니다. 여기에 언어 속성을 꼭 지명해 주세요. 브라우저와 서치 엔진에 도움이 됩니다.

<head> 이 태그 안에는 제목, 스타일, 스크립트 메타 정보와 같은 유저에게는 보이지 않는 이 웹 페이지에 대한 정보를 담고 있습니다.

<meta> 이 문서에 관한 추가 정보를 제공합니다. 위에 틀에서는 문자 세트와 뷰포트에 대한 정보를 정의하고 있습니다.

<title> 이 페이지의 제목은 필수입니다. 브라우저 탭 등에 표시됩니다.

<body> 본격적으로 유저에게 보이는 콘텐츠를 넣는 곳입니다.

코딩 시작:

이제 <body> 태그 안에 본격적으로 코딩을 시작하겠습니다. 기본적인 HTML 태그들로 이 웹 페이지에 필요한 요소(element) 들을 추가하겠습니다.

1. <input>으로 사용자 입력 칸 만들기

<input> 태그를 넣으면 사용자가 키보드 입력을 할 수 있는 칸이 만들어집니다. 속성으로 id와 placeholder를 설정합니다. id는 이 태그에 이름을 붙이는 것으로 Javascript나 css에서 이 태그를 지명/선택할 수 있게 해 줍니다. placeholder는 입력 칸에 힌트를 더해줍니다.

아래의 코드를 <body> 태그 안에 넣어줍니다.

<input id="input" placeholder="예) 코딩공부하기" />

2. <button>으로 버튼 만들기

<button> 태그를 쓰면 버튼을 만들 수 있습니다. 속성으로 id를 설정합니다.

아래의 코드를 <input> 아래 넣어줍니다.

<button id="add-button">추가</button>

3. <div>로 <input>과 <button> 감싸기

<div>는 html 요소들을 무리 짓기 위해 사용합니다. 하나의 틀 또는 상자라고 생각하면 편합니다. 무리 짓는 이유는 다양하지만 보통 한꺼번에 꾸미기 편하게 사용됩니다. 웹 페이지의 다양한 섹션들을 나누기에도 사용됩니다. 여기서 <input>과 <button>을 같이 스타일링 하기 위해서 감싸줍니다.

속성으로 클래스를 설정합니다.

<div>로 <input>과 <button>을 감싸 줍니다.

<div class="input-container">
     <input id="input" placeholder="예) 코딩공부하기" />
     <button id="add-button">추가</button>
</div>

4. <h1>으로 제목 넣기

<h1> 태그는 큰 제목을 빠르게 넣을 수 있습니다. 보통 HTML 파일 안에 한 개의 <h1> 태그를 넣는 것을 추천드립니다. <h1> 태그를 넣으면 접근성에도 도움이 됩니다. 참고로 <h2>, <h3>,..., <h6> 태그로 부제목을 넣을 수도 있습니다.

아래의 코드를 <div> 태그 아래 넣어 줍니다.

<h1>할 일 목록</h1>

5. <ul>, <li>로 리스트 만들기

<ul>로 리스트를 만들 수 있습니다. 리스트를 만드는 태그로는 <ul> (unodered list)과 <ol> (odered list)이 있습니다. <ul>은 목록을 땡땡이로 만들고 <ol>은 목록에 숫자를 자동으로 붙여 줍니다. 우리는 <ul>을 사용하겠습니다. 속성으로 id를 설정합니다.

<li> (list item)으로 목록에 아이템을 추가할 수 있습니다. 속성으로 class를 설정합니다. 클래스도 아이디와 마찬가지로 Javascript나 css에서 이 태그를 지명/선택할 수 있게 해 줍니다.

Id와 class의 차이점:
아이디는 일반적으로 한 HTML 파일에 한개의 태그에만 설정합니다. 유니크하게 만들기 위해서입니다.
클래스는 보통 여러 태그에 사용될 경우에 이용합니다. 한 번에 많은 CSS를 설정하기에 유용합니다.

아래의 코드를 <h1> 아래 넣어줍니다.

<ul id="list">
    <li class="list-item">코딩팍 팔로우하기</li>
</ul>

6. <div>로 지금까지 만든 요소들 정리하기

<div>로 위에서 만든 요소들을 정리 해주도록 하겠습니다. 먼저 <h1>과 <ul>을 한 <div>에 넣도록 하겠습니다. 한 상자에 넣기 위해서 입니다.

<div> 태그로 위의 요소들을 감싸줍니다.

<div class="list-container">
    <h1>할 일 목록</h1>
    <ul id="list">
      <li class="list-item">코딩팍 팔로우하기</li>
    </ul>
</div>

마지막으로 지금까지만든 모든 요소들을 <div>로 묶어 주도록 하겠습니다. 보통 모든 요소들을 묶어주면 레이아웃할때 관리하기가 편리합니다.

<div> 태그로 지금까지 만든 요소들을 감싸줍니다.

<div class="container">
    <div class="input-container">
         <input id="input" placeholder="예) 코딩공부하기" />
         <button id="add-button">추가</button>
    </div>
    <div class="list-container">
        <h1>할 일 목록</h1>
        <ul id="list">
             <li class="list-item">코딩팍 팔로우하기</li>
        </ul>
    </div>	
</div>

정리:

지금까지 잘 따라오셨다면 아래의 코드를 완성하셨습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      할일 목록
    </title>
  </head>
  <body>
    <div class="container">
      <div class="input-container">
        <input id="input" placeholder="예) 코딩공부하기" />
        <button id="add-button">추가</button>
      </div>
      <div class="list-container">
        <h1>할 일 목록</h1>
        <ul id="list">
          <li class="list-item">코딩팍 팔로우하기</li>
        </ul>
      </div>
    </div>
  </body>
</html>

축하합니다!

기본적인 html은 완성하셨습니다. 아직은 버튼이 작동하지도 않고 스타일링이 완벽하지도 않습니다. 다음 시간에는 css를 이용해서 오늘 만든 html을 꾸며 보겠습니다.

다음 편 바로가기:

[할 일 목록 #2] CSS 로 이쁘게 꾸미기

'개발 Develop > HTML, CSS, Javascript' 카테고리의 다른 글

[HTML 배우기] input 태그: 사용자 입력칸 (0)	2020.05.23
[할 일 목록 #3] Javascript로 버튼 누르는 기능 만들기 (To-do list) (0)	2020.05.23
[할 일 목록 #2] CSS 로 이쁘게 꾸미기 (To-do list) (0)	2020.05.21
[할 일 목록 #0] 웹 사이트 만들기 프로젝트 HTML, CSS, Javascript로 할 일 목록 (To-do List) 만들기 소개 (0)	2020.05.20
코딩팍과 함께 실전 코딩 배우기 (0)	2020.05.20