현재 파일 구조

현재 프로젝트 구조는 단순하게 구성했다.

Memo Evolution/
  index.html
  style.css
  .gitignore

처음에는 IntelliJ에서 Java 프로젝트를 만들면서 src, .idea, .iml 같은 파일들이 생성됐다.
하지만 현재 단계는 HTML/CSS 학습이 목적이므로, 불필요한 Java/IDE 설정 파일은 정리했다.

 

HTML 코드

현재 작성한 `index.html`은 다음과 같다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memo Evolution</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app">

    <div class="memo-form">
        <h2>새 메모 작성</h2>

        <label for="memo-title">제목</label>
        <input id="memo-title" type="text" placeholder="제목을 입력하세요">

        <label for="memo-content">내용</label>
        <textarea id="memo-content" placeholder="내용을 입력하세요"></textarea>

        <button type="button">메모 추가</button>
    </div>

    <div class="memo-list">
        <h2>메모 목록</h2>
        <p class="empty-message">아직 작성된 메모가 없습니다.</p>
    </div>
</div>
</body>
</html>

코드 구조 살펴보기

먼저 문서의 기본 구조는 다음과 같다.

<!doctype html>
<html lang="ko">

<!doctype html>은 이 문서가 HTML5 문서라는 것을 브라우저에 알려준다.

lang="ko"는 이 페이지의 주 언어가 한국어라는 뜻이다.
처음에는 en으로 작성했지만, 페이지 내용이 한국어이므로 ko로 수정하는 것이 더 적절하다.

<meta charset="UTF-8">

이 코드는 문자 인코딩을 UTF-8로 설정한다.
한글이 깨지지 않도록 하기 위한 설정이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 코드는 모바일 화면에서도 페이지가 적절한 크기로 보이도록 설정한다.

<link rel="stylesheet" href="style.css">

이 코드는 HTML 파일과 CSS 파일을 연결한다.
아직 CSS는 화면을 꾸미는 역할만 하고, 기능을 만들지는 않는다.

 

전체 화면을 감싸는 영역

<div class="app">

div는 여러 요소를 묶기 위한 태그다.

여기서는 메모장 전체 화면을 하나의 영역으로 감싸기 위해 app 클래스를 사용했다.
나중에 CSS에서 .app을 선택해서 전체 너비, 여백, 배경 등을 설정할 수 있다.

 

메모 작성 영역

<div class="memo-form">
    <h2>새 메모 작성</h2>

    <label for="memo-title">제목</label>
    <input id="memo-title" type="text" placeholder="제목을 입력하세요">

    <label for="memo-content">내용</label>
    <textarea id="memo-content" placeholder="내용을 입력하세요"></textarea>

    <button type="button">메모 추가</button>
</div>

이 영역은 사용자가 새 메모를 작성하는 부분이다.

h2는 영역 제목이다. 여기서는 “새 메모 작성”이라는 제목을 표시한다.

<label for="memo-title">제목</label>
<input id="memo-title" type="text" placeholder="제목을 입력하세요">

label은 입력창이 어떤 값을 입력받는지 설명하는 태그다.

label의 for="memo-title"과 input의 id="memo-title"이 연결되어 있다.
이렇게 연결하면 사용자가 “제목”이라는 글자를 클릭해도 해당 입력창이 선택된다.

<textarea id="memo-content" placeholder="내용을 입력하세요"></textarea>

textarea는 여러 줄의 텍스트를 입력할 때 사용한다.
메모 내용은 한 줄보다 길어질 수 있으므로 input이 아니라 textarea를 사용했다.

<button type="button">메모 추가</button>

버튼은 아직 동작하지 않는다.
현재는 HTML 구조만 만드는 단계이기 때문이다.

type="button"을 지정한 이유는 나중에 버튼이 불필요하게 폼 제출처럼 동작하지 않게 하기 위해서다.

메모 목록 영역

<div class="memo-list">
    <h2>메모 목록</h2>
    <p class="empty-message">아직 작성된 메모가 없습니다.</p>
</div>

이 영역은 작성된 메모들이 표시될 공간이다.

현재는 JavaScript 기능이 없기 때문에 실제 메모가 추가되지는 않는다.
그래서 더미 데이터를 넣기보다는 “아직 작성된 메모가 없습니다.”라는 빈 목록 메시지를 보여주도록 했다.

나중에 JavaScript 단계에서는 사용자가 입력한 메모를 이 영역에 동적으로 추가하게 된다.

 

아직 기능은 없지만, HTML 구조를 먼저 잡아두면 이후 CSS와 JavaScript를 붙일 때 훨씬 이해하기 쉽다.

'Project > Memo Evolution' 카테고리의 다른 글

#6 메모 내용 줄바꿈 처리하기  (0) 2026.06.11
#5 메모데이터를 배열로 관리  (0) 2026.06.11
#4 입력한 메모를 화면에 추가하기  (0) 2026.06.10
#3 JavaScript 연결하고 버튼 클릭 감지  (0) 2026.06.10
#2 CSS로 메모장 화면 꾸미기  (0) 2026.06.10

티스토리툴바