Skip to content

Files

Latest commit

 

History

History
129 lines (104 loc) · 3.79 KB

2_4_6.mobile_Page.md

File metadata and controls

129 lines (104 loc) · 3.79 KB

게시판 애플리케이션을 다양한 기기에서 최적의 사용자 경험을 제공하기 위해, 반응형 웹 디자인을 적용하여 모바일 페이지를 구현할 수 있습니다. 이를 위해 CSS 미디어 쿼리를 활용하여 화면 크기에 따라 레이아웃과 스타일을 조정하는 방법을 소개합니다.

1. CSS 미디어 쿼리를 활용한 반응형 디자인 적용

CSS 미디어 쿼리를 사용하여 특정 화면 크기와 해상도에 따라 스타일을 조정할 수 있습니다. 이를 통해 각 디바이스에 적합한 레이아웃을 적용할 수 있습니다.

예를 들어, 다음과 같이 CSS 파일에 미디어 쿼리를 추가하여 모바일 화면에 적합한 스타일을 정의할 수 있습니다:

/* 기본 스타일 */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

/* 미디어 쿼리: 화면 너비가 768px 이하인 경우 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    margin: 0 10px;
  }

  h1 {
    font-size: 24px;
  }

  .post {
    padding: 10px;
    margin-bottom: 15px;
  }
}

2. 뷰 파일 수정

반응형 디자인을 적용하기 위해 EJS 템플릿 파일을 수정합니다. 예를 들어, views/index.ejs 파일에 다음과 같이 반응형 디자인을 위한 메타 태그와 CSS 파일을 추가합니다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>게시판</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <div class="container">
    <h1>게시판</h1>
    <a href="/new">새 글 작성</a>
    <ul>
      <% posts.forEach(post => { %>
        <li class="post">
          <h2><a href="/posts/<%= post.id %>"><%= post.title %></a></h2>
          <p><%= post.content %></p>
          <p><small><%= post.date %></small></p>
        </li>
      <% }) %>
    </ul>
  </div>
</body>
</html>

3. 정적 파일 제공 설정

Express 애플리케이션에서 정적 파일(CSS, 이미지 등)을 제공하기 위해 public 디렉토리를 생성하고, 해당 디렉토리를 정적 파일 제공 미들웨어로 설정합니다

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const port = 3000;

// EJS를 뷰 엔진으로 설정
app.set('view engine', 'ejs');

// Body-parser 설정
app.use(bodyParser.urlencoded({ extended: true }));

// 정적 파일 제공 설정
app.use(express.static(path.join(__dirname, 'public')));

// 게시글 데이터를 저장할 배열
let posts = [];

// 루트 경로에서 게시글 목록 표시
app.get('/', (req, res) => {
  res.render('index', { posts });
});

// 게시글 작성 폼 표시
app.get('/new', (req, res) => {
  res.render('new');
});

// 게시글 작성 처리
app.post('/create', (req, res) => {
  const { title, content } = req.body;
  const newPost = { id: posts.length + 1, title, content, date: new Date().toLocaleString() };
  posts.push(newPost);
  res.redirect('/');
});

// 게시글 상세 보기
app.get('/posts/:id', (req, res) => {
  const postId = parseInt(req.params.id);
  const post = posts.find(p => p.id === postId);
  if (post) {
    res.render('post', { post });
  } else {
    res.status(404).send('게시글을 찾을 수 없습니다.');
  }
});

// 서버 실행
app.listen(port, () => {
  console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});

위의 설정을 통해 public 디렉토리에 위치한 CSS 파일을 클라이언트에서 접근할 수 있습니다. 이제 다양한 화면 크기에 대응하는 반응형 디자인이 적용되어, 모바일 환경에서도 최적화된 게시판을 제공할 수 있습니다.