I. ์์
๋ถํธ์คํธ๋ฉ์ UI ํ๋ ์์ํฌ๋ก ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์ด ์ ์ฉํ๊ฒ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
์ํ๋ ๋์์ธ์ ๋น ๋ฅด๊ณ ํธ๋ฆฌํ๊ฒ ๊ฐ๋ฐํ ์ ์๋ค๋ ์ฅ์ ๋ ์์ง๋ง, ์์นซํ๋ฉด ํฌ๋ฐํ๊ณ ์ง๋ฃจํ ๋์์ธ์ด ๋๊ธฐ ์ญ์์ ๋๋ค. ๊ทธ๋์ ๋ถํธ์คํธ๋ฉ์์๋ ์ฌ๋ฌ ๊ฐ์ง ์ปค์คํ ์ ์ง์ํ๊ณ ์์ต๋๋ค.
๊ทธ์ค Shard UI๋ ๋ถํธ์คํธ๋ฉ 4๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ถํธ์คํธ๋ฉ์ ๋ชจ๋ํ ๋์์ธ์ผ๋ก ๋ง๋ค ์ ์๋๋ก ๋์์ฃผ๊ณ ์์ต๋๋ค.
https://designrevision.com/demo/shards/
Shards Demo - A Modern UI Toolkit for Web Makers
Triggering this action might affect you later. Do you still want to continue?
designrevision.com
II. ์ ์ฉ
๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ์ ๋ถํธ์คํธ๋ฉ4์ ๋์ผํฉ๋๋ค.
https://github.com/DesignRevision/shards-ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS Dependencies -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/shards-ui@latest/dist/css/shards.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/shards-ui@latest/dist/js/shards.min.js"></script>
</body>
</html>
CDN
JS
<script src="https://unpkg.com/shards-ui@latest/dist/js/shards.min.js"></script>
CSS
<link rel="stylesheet" href="https://unpkg.com/shards-ui@latest/dist/css/shards.min.css">
III. ์ฌ์ฉ ์์
๊ทธ๋ผ ์ค ์ ์ฉ ์์๋ฅผ ๋ณด์ฌ๋๋ฆฌ๊ฒ ์ต๋๋ค.
๋จผ์ ๊ธฐ๋ณธ ๋ถํธ์คํธ๋ฉ ์ ๋๋ค.
https://github.com/StartBootstrap/startbootstrap-scrolling-nav
GitHub - StartBootstrap/startbootstrap-scrolling-nav: An unstyled Bootstrap HTML template for creating smooth scrolling, one pag
An unstyled Bootstrap HTML template for creating smooth scrolling, one page websites - created by Start Bootstrap - GitHub - StartBootstrap/startbootstrap-scrolling-nav: An unstyled Bootstrap HTML ...
github.com
์ด์ Shard UI๋ฅผ ์ ์ฉํด ๋ณด๊ฒ ์ต๋๋ค.
๋์์ธ์ด ๋ง์ด ๋ฐ๋์์ต๋๋ค.
๋ฌผ๋ก ์ด๋ฅผ ์ ํ์ฉํ๋ค๋ฉด ์์ค๊ธ์ ๋์์ธ๋ ๊ตฌํํ์ค ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด๋๊น์ง๋ ์ปค์คํ ์ด๊ณ ์ฝ๋์ ๋ฌด๊ฒ๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ํ์ฉํ๊ธฐ์๋ ์ ํฉํ์ง ์์ต๋๋ค.
์ด์์ผ๋ก ์ปค์คํ ๋ถํธ์คํธ๋ฉ Shard UI๋ฅผ ์๊ฐํด๋๋ ธ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค.
'๐ป๊ธฐ์ > ์ ๋ณด๊ณต์ ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [ VSCode ] CSS ์๋์์ฑ์ด ๋จ์ง ์์ ๋ (0) | 2022.09.11 |
|---|---|
| VSCode ํ์ผ/ํด๋ ์์ด์ฝ ์ง๊ด์ ์ผ๋ก ๋ฐ๊พธ๊ธฐ (0) | 2022.01.09 |
| [ ์ฌ์ดํธ ] ๋ฌด๋ฃ ๋ฐฑ๋งํฌ ์ฌ์ดํธ - ํฐ์คํ ๋ฆฌ ๋ฐฉ๋ฌธ์ ์ฆ๊ฐ ๊ฟํ (0) | 2020.12.02 |
| [ youtube-dlc ] ์ ํ๋ธ์์ ์ฌ์ดํธ ์์ด 3์ด๋ง์ ๋ค์ด๋ก๋ ํ๊ธฐ (0) | 2020.11.14 |
| ์น๋ธ๋ผ์ฐ์ ์์ OS๋ฅผ ๊ตฌํํ๋ค (0) | 2020.11.13 |
