<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js</title>
<link rel="stylesheet" href="/main.css" type="text/css">
</head>
<body class="grey-bg">
<div class="white-bg">
<div class="list-box">
<h4>글제목임</h4>
<p>글내용임</p>
</div>
<div class="list-box">
<h4>글제목임</h4>
<p>글내용임</p>
</div>
</div>
</body>
</html><link rel="stylesheet" href="/public/main.css" type="text/css">css를 적용할 때 대부분의 경로는 /를 친 이후 경로를 적는데 막상 페이지에 가보니 적용이 안되서 많이 애를 먹었다. 두번 포기하고 세번 도전 중, server.js에서 app.use(express.static(__dirname + '/public'))사용을 적어놔서 다음 public 폴더 안에 있는 파일들은 위에 친 것처럼 상대경로나, 절대경로를 입력할 필요가 없다. 오히려 에러를 유발하게 해서 css가 적용이 안되기도 했다.
해결 방안으로는 찬찬히 생각해보던 중, 어차피 다양한 시도를 해볼거 한번 경로를 대충 집어넣어봐? 이러고 './main.css'를 넣었을 때 적용된 것에서 깨달았다. 현재폴더에서도 적용이 가능하다면 아무곳에서나 적용할 수 있는게 아닐까? 했다. 실제로 .이 있나 없나 차이는 없었지만 문제의 원인을 제대로 깨달았다.
app.use(express.static(__dirname + '/public'));여기서 __dirname은 현재 실행중인 파일의 이름을 나타내는 변수이기 때문에 실행되는 것이였다. 디렉토리의 절대경로를 포함하고 있기에 실행되는것이다.
'Node.js' 카테고리의 다른 글
| MongoDB 비밀번호 암호화 (2) | 2024.02.06 |
|---|---|
| list.ejs - 삭제기능 구현 오류 (0) | 2024.02.06 |
| 수정 오류 해결 - correction.ejs (0) | 2024.02.04 |
| ejs - 문법 오류 에러 (0) | 2024.02.04 |
| server.js - urlParams 오류 수정 (0) | 2024.02.04 |