๋ถํธ์คํธ๋ฉ : ๋ฐ์ํ ์น ๊ฐ๋ฐ์์ํ HTML, CSS, JSํ๋ ์์ํฌ
์น ํ๋ก์ ํธ ๊ฐ๋ฐ์ ์น ํ์ด์ง์ ์คํ์ผ์ ์ฃผ๊ณ ์ถ์๋ ๊ธฐ์กด์๋ css๋ฅผ ์ฌ์ฉํ์ฌ ์ง์ ์ฌ์ฉ์๊ฐ ์ฝ๋๋ฅผ ์ ๋ ฅํ์ฌ ์น ์ฌ์ดํธ๋ฅผ ๊พธ๋ฉฐ์ฃผ์๋ค.
๋ถํธ์คํธ๋ฉ์ css๋ก ์ง์ ์คํ์ผ์ ์ ๋ ฅํ์ง ์๊ณ ๋ ์ง์ ๋์ด์๋ ๋จ์ํ ์ฝ๋๋ง์ผ๋ก ์น ํ์ด์ง๋ฅผ ๊พธ๋ฐ ์ ์๋ค. ๋ถํธ์คํธ๋ฉ์ ์ฌ์ฉํ๋ฉด ์ฝ๋ฉ๋์ด ์ค์ด ๊ฐ๋ฐ์๊ฐ๋ ์ค์ด๋ค๊ณ , ๋์์ธ ๋ํ ๊น๋ํ๊ฒ ์ ์ํ ์ ์๋ค.
1. ๋ถํธ์คํธ๋ฉ ์ฌ์ฉ ์ ๊ธฐ๋ณธ ์ธํ
๋ถํธ์คํธ๋ฉ ํ์ด์ง์ ์ ์ : https://getbootstrap.com/
์์ ํ์ดํ ๋๊ณณ์ค ํ๊ณณ ํด๋ฆญ(์ด์งํผ ๊ฐ์ ์ฌ์ดํธ)
์ ๊ทธ๋ฆผ์ ๊ฒฝ๋ก๋ก ์ด๋ํ์ฌ CSS๊ด๋ จ ํ์ผ๋ค ๋ค์ด ๋ฐ๋๋ค.
cssํ์ผํด๋ ๋ง๋ค์ด ๋ค์ด๋ฐ์ css์๋ฃ ๋ณต์ฌํด ๋ถ์ฌ ๋ฃ์ด๋๋ค.
ํ๋ก์ ํธ ํ์ผ๋ด /resource์ cssํ์ผ ๋ง๋ค์ด ๋ฃ์ด๋ .
์์ ์ฌ์ง์ฒ๋ผ ๋นจ๊ฐ๋ฐ์ค ๋ด์ ์๋ ์ฝ๋๋ค JSP๋ด ๊ฐ์์์น์ ์ถ๊ฐํด์ค๋ค.
bootstrap์์ ์ค์ ์ฝ๋ ๊ฐ์ ธ์ ๋ถ์ฌ๋ฃ์ด๋ .
++css์ค์ 2์ค ๋ ์ถ๊ฐ๋จ. (๋ค์ด๋ก๋ ๋ฐ์ cssํ์ผ๋ค ๊ฒฝ๋ก ์ค์ ํด๋๊ฒ์)
++ js์ค์ ์ jquery๋ฒ์ ๊ณผ, eclipse๋ฒ์ ๊ณ ๋ คํด ์ฌ์ฉํ ๊ฒ
์ด๋ ๊ฒ๋ง ํ๋ฉด bootstrap์ฌ์ฉํ ์ค๋น๊ฐ ๋๊ฒ์ด๋ค!
2. ๊ธฐ์กด css์ bootstrapํ์ฉํ ๊ฒ์ ์ฐจ์ด
cssํ์ผ ๋ฐ๋ก ๋ง๋ค์ด ๋ถ๋ฌ์ ์ฌ์ฉํจ.
css๋ฅผ ์์ฑํ๊ฒ๋ณด๋ค BootStrap์ ํ์ฉํ๊ฒ์ด ์ฝ๋๊ฐ ๊ฐ๋จํ๊ณ ,
๊ฒฐ๊ณผ๋ฌผ์ด ๋ณด๋ค ๊ฐ๊ฒฐํ๊ณ ๊น๋ํจ.
3. ๋ถํธ์คํธ๋ฉ ํ์ฉ ์์
๋ถํธ์คํธ๋ฉ์ https://getbootstrap.com/ ์ฌ์ดํธ์ ์๋ ๋ถํธ์คํธ๋ฉ ์ฝ๋ ์ฐธ์กฐํด์ ์ฌ์ฉ.
โถ Container
JSP ์น ํ์ด์ง ์ฌ๋ฐฑ ์ค์
- ํจ๊ณผ์์ด div๋ง ์์ฑํ๋ฉด ์ฌ๋ฐฑ ์๋ ์ค์
- class: container ๋ ์์์ ์ฌ๋ฐฑ์ ์์ฑ
- class: container-fluid๋ ์์์ ์ฌ๋ฐฑ์ ๋ง๋ค์ง ์๊ณ ๊ฝ ์ฑ์ ์ถ๋ ฅํ๋ ํํ
์ด์ธ์๋ bootstrap์ฌ์ดํธ์์ ๋ค์ํ container๊ธฐ๋ฅ์ ์ฐพ์ ๋ณผ ์ ์์.
++container๋ 12๋ง๋๋ก ์ด๋ฃจ์ด์ ธ์์.
โถButtons
↓ bootstrap์ฐธ๊ณ ํด button๊ธฐ๋ฅ ํ์ฉํด๋ณด๊ธฐ ↓
โถNavbar
์์ ๊ทธ๋ฆผ๋ค๊ณผ ๊ฐ์ด ์ํ๋ ์คํ์ผ/๊ธฐ๋ฅ ์ฐพ์ JSPํ์ผ์ ์ถ๊ฐ
๋ถํธ์คํธ๋ฉ์์ ์ฐธ์กฐํ ์ฝ๋๋ค์ ํตํด ์ป์ด๋ธ ๊ฒฐ๊ณผ๋ฌผ!
++navbar์ active์์ฑ ํ์ฉํด ์ํ๋ ๋ฉ๋ด๊ธ์ ๊ฐ์กฐ์ํฌ์ ์์.
โถmodal
- ๋ฒํผ ํด๋ฆญ์ ํ์ธ์ฐฝ ๋จ๋ ๊ธฐ๋ฅ!
โถcarcousel_control
↓์์ ์ฌ์ง์ฒ๋ผ ๋ถํธ์คํธ๋ฉ ์ฐธ์กฐ!!
โถpagination
-ํ์ด์ง ๋ฒํผ๊ธฐ๋ฅ
++ ํ๋ผ๋ฏธํฐ๋ก ๋ค์ด์จ ํ์ด์ง ๊ฐ๋ง ํ๋์์ผ๋ก ํ์๋๋๋ก ํํ!
์์ ์์๋ค๊ณผ ๊ฐ์ด ์ํ๋ ๊ธฐ๋ฅ/์คํ์ผ
๋ถํธ์คํธ๋ฉ ํ์ด์ง์์ ์ฐพ์์ ์ฌ์ฉํ๋ฉด ๋จ!
'FOR SW ENGINEER๐ฉโ๐ป > JSP' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
JSP - MVC(model- view - controller) (0) | 2021.12.14 |
---|---|
JSP - Servlet (0) | 2021.12.10 |
JSP - ์ปค์คํ ํ๊ทธ(Custom Tag) (1) | 2021.12.01 |
JSP - JSTL (ํ์ค ํ๊ทธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ) (0) | 2021.11.29 |
JSP - ํํ์ธ์ด(EL, Expression Language) (0) | 2021.11.23 |