#2 CSS로 메모장 화면 꾸미기

 

이전 단계에서는 HTML로 메모장 화면의 기본 구조를 만들었다.

이번에는 style.css를 작성해서 화면이 조금 더 메모장처럼 보이도록 스타일을 적용했다.
아직 JavaScript 기능은 없기 때문에 메모 추가 버튼을 눌러도 실제로 메모가 추가되지는 않는다.

이번 단계의 목표는 기능 구현이 아니라, HTML로 만든 요소들을 보기 좋게 배치하는 것이다.

 

현재 파일 구조

현재 프로젝트 구조는 다음과 같다.

Memo Evolution/
  index.html
  style.css
  .gitignore

 

CSS 코드

이번 단계에서 작성한 CSS는 다음과 같다.

body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f4f4f4;
}

.app {
    width: 500px;
    margin: 40px auto;
    padding: 24px;
    background-color: white;
}

.memo-form {
    margin-bottom: 32px;
}

.memo-form label {
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
}

.memo-form input,
.memo-form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.memo-form textarea {
    min-height: 120px;
    resize: vertical;
}

.memo-form button {
    display: block;
    width: 100%;
    margin-top: 16px;
}

button {
    margin-top: 12px;
    padding: 10px 16px;
    cursor: pointer;
}

.empty-message {
    color: #777;
}

 

화면 전체 스타일

먼저 body에 기본 스타일을 적용했다.

body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f4f4f4;
}

브라우저는 기본적으로 body에 약간의 여백을 가지고 있다.
그래서 margin: 0;으로 기본 여백을 제거했다.

글꼴은 sans-serif로 지정했고, 전체 배경은 연한 회색으로 설정했다.
배경을 회색으로 두면 가운데에 있는 흰색 메모장 영역이 더 잘 구분된다.

 

메모장 영역 가운데 배치

전체 메모장 화면은 .app 영역이 감싸고 있다.

.app {
    width: 500px;
    margin: 40px auto;
    padding: 24px;
    background-color: white;
}

이번 단계에서는 .app에 너비를 주고, 화면 가운데에 배치했다.

width: 500px;로 메모장 박스의 크기를 정했고, margin: 40px auto;로 위아래 여백을 주면서 좌우 가운데 정렬이 되도록 했다.

padding: 24px;은 박스 안쪽 여백이다.
이 값을 주지 않으면 입력창과 제목이 박스 가장자리에 붙어 보여서 답답하다.

 

입력 영역 정리

HTML만 작성했을 때는 label, input, textarea, button이 화면에서 정돈되어 보이지 않았다.
그래서 메모 작성 영역 안의 요소들을 위에서 아래로 자연스럽게 배치했다.

.memo-form label {
    display: block;
    margin-top: 12px;
    margin-bottom: 6px;
}

label을 block으로 바꿔서 입력창 위에 따로 표시되도록 했다.
이렇게 하면 “제목”과 제목 입력창, “내용”과 내용 입력창의 관계가 더 명확해진다.

.memo-form input,
.memo-form textarea {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

input과 textarea는 같은 너비로 맞췄다.
width: 100%;를 사용해서 부모 영역의 가로 폭을 모두 사용하도록 했다.

여기서 box-sizing: border-box;를 같이 사용했다.
처음에는 width: 100%와 padding을 같이 쓰면 입력창이 부모 영역보다 커질 수 있다는 점이 헷갈렸다.
box-sizing: border-box;를 사용하면 padding까지 포함해서 전체 너비를 계산하므로 입력창이 밖으로 삐져나가지 않는다.

 

내용 입력창 크기 조정

메모 내용은 제목보다 길게 작성될 수 있으므로 textarea에는 최소 높이를 지정했다.

.memo-form textarea {
    min-height: 120px;
    resize: vertical;
}

min-height: 120px;로 내용 입력창이 너무 작아 보이지 않게 했다.

또한 resize: vertical;을 사용해서 사용자가 세로 방향으로만 크기를 조절할 수 있게 했다.
가로 방향까지 조절할 수 있으면 전체 레이아웃이 어색해질 수 있기 때문이다.

 

버튼 정렬

처음 화면을 확인했을 때 메모 추가 버튼이 입력창과 따로 노는 느낌이 있었다.
그래서 버튼도 입력창과 같은 폭으로 맞췄다.

.memo-form button {
    display: block;
    width: 100%;
    margin-top: 16px;
}

이렇게 하니 제목 입력창, 내용 입력창, 메모 추가 버튼이 같은 폭으로 정렬되어 훨씬 안정적으로 보였다.

버튼에는 공통 스타일도 추가했다.

button {
    margin-top: 12px;
    padding: 10px 16px;
    cursor: pointer;
}

padding을 넣어 버튼 안쪽 여백을 확보했고, cursor: pointer;로 버튼 위에 마우스를 올렸을 때 클릭 가능한 요소처럼 보이게 했다.

 

빈 메모 메시지

아직 JavaScript 기능이 없기 때문에 메모 목록에는 실제 데이터가 표시되지 않는다.

<p class="empty-message">아직 작성된 메모가 없습니다.</p>

이 문구는 안내 메시지에 가까우므로 일반 텍스트보다 조금 흐리게 보이도록 했다.

.empty-message {
    color: #777;
}

 

 

 

 

HTML만 작성했을 때는 요소들이 단순히 위에서 아래로 나열된 느낌이었다.
CSS를 적용하니 같은 HTML 구조라도 훨씬 화면답게 보였다.

특히 입력창과 버튼의 너비를 맞추는 것만으로도 화면이 훨씬 정리된 느낌이 들었다.
아직 기능은 없지만, 사용자가 실제로 메모를 작성할 수 있는 화면에 가까워졌다.

 

 

지금까지는 정적인 화면이었다면, 다음 단계부터는 사용자의 동작에 따라 화면이 바뀌는 구조를 만들어볼 예정이다.