๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/NodeJS

[NodeJS+Express] 3.์ •์ ํŒŒ์ผ ๋„ฃ์–ด์ฃผ๊ธฐ (cssํŒŒ์ผ ๋“ฑ๋ก) & Bootstrap ์ด์šฉํ•˜๊ธฐ

by KASSID 2023. 9. 23.

๋ชฉ์ฐจ

    ์ด์ œ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋””์ž์ธ ํ•ด๋ณด์ž.

     

    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์„ ์ด์šฉํ•ด๋ณด์ž!

     

    https://getbootstrap.com/

     

    Bootstrap

    Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

    getbootstrap.com

     

     

    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

    ๊ด€๋ จ๊ธ€

    ๋Œ“๊ธ€

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”