๋ชฉ์ฐจ
์ด์ ์น์ฌ์ดํธ๋ฅผ ๋์์ธ ํด๋ณด์.
1. ์ ์ ํ์ผ ์ฝ์ ํ๊ธฐ
1) css ํ์ผ ์์ฑํ๊ธฐ
css ํ์ผ๊ณผ ๊ฐ์ ์ ์ ํ์ผ์ ๋ณดํต public ๋๋ ํ ๋ฆฌ์์ ๊ด๋ฆฌํ๋ค.
๋ฐ๋ผ์ ์์ฒ๋ผ public/main.css ๋ฅผ ์์ฑํด์ค๋ค.
2) public ๋๋ ํ ๋ฆฌ๋ฅผ ์๋ฒ์ ๋ฑ๋กํ๊ธฐ
app.use(express.static(__dirname + '/public'))
public ํด๋์ ์๋ ํ์ผ๋ค์ ์๋ฒ์์ ์ฌ์ฉํ ์ ์๋๋ก
์๋ฒ์ ๋๋ ํ ๋ฆฌ๋ฅผ ๋ฑ๋กํด์ค๋ค. (์คํ์ฃผ์)
3) htmlํ์ผ์ ๋ฃ์ด์ฃผ๊ธฐ
<link href="/main.css" rel="stylesheet">
html ํ์ผ์ header์ ์ <link> ํ๊ทธ๋ฅผ ์ฝ์ ํด์ฃผ๋ฉด ๋๋ค.
4) ํ์ธํด๋ณด๊ธฐ
/* main.css */
.square{
width: 100px;
height: 100px;
background: #4cb1ff;
}
2. Bootstrap ์ด์ฉํ๊ธฐ
์น์ฌ์ดํธ ๋์์ธ์ ๋น ๋ฅด๊ฒ ๊ตฌํํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ
Bootstrap์ ์ด์ฉํด๋ณด์!
1) Quick Start
Bootstap์ npm์ ์ด์ฉํด์ ์ค์นํ ์๋ ์์ง๋ง
์ด๋ฒ์๋ ๊ฐ๋จํ๊ฒ ํ๊ทธ๋ฅผ ๊ฐ์ ธ์์ ์ฌ์ฉํด๋ณด์.
https://getbootstrap.com/docs/5.3/getting-started/introduction/ (5.3๋ฒ์ )
์ ๋งํฌ์์ ์๋ 2๊ฐ์ ํ๊ทธ๋ฅผ ๊ฐ์ ธ์์
// css link ํ๊ทธ
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
// js script ํ๊ทธ
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link>ํ๊ทธ๋ header์ ์์นํ๊ณ , script ํ๊ทธ๋ <body>์ ๊ฐ์ฅ ๋ง์ง๋ง ์ค์ ์์นํ๋ค. (html ํ์ฑ ํ jsํ์ผ์ ์ ๋ก๋ ์ํด์)
'๐ | WEB DEV > NodeJS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[NodeJS+Express] 5. MongoDB์์ ๋ฐ์ดํฐ ๊บผ๋ด๊ธฐ (0) | 2023.09.24 |
---|---|
[NodeJS+Express] 4. MongoDB ํ์ฌํด์ฃผ๊ธฐ (0) | 2023.09.24 |
[NodeJS+Express] nodemon์ผ๋ก ์๋ํํ๊ธฐ (0) | 2023.09.23 |
[NodeJS+Express] 2.์๋ก์ด ํ์ด์ง ๋ง๋ค๊ธฐ (0) | 2023.09.23 |
[NodeJS+Express] 1. NodeJS, Express ์ธํ (0) | 2023.09.22 |
๋๊ธ