728x90
๋ฐ์ํ
์น ๊ฐ๋ฐ์ ํ๋ฉด์ ํญ์ ๋งค์ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ์ ์ฌ์ง์ ์ ๊ฐ ์ง์ Bootstrap์ ์ฌ์ฉํ์ฌ ๋ง๋ ํญ ์ ๋๋ค.
์ฐจ๋ก๋๋ก ํญ ์ฌ์ฉ๋ฒ์ ๋ํด ์๋ ค๋๋ฆฌ๊ฒ ์ต๋๋ค.
โ ์ธ๋ถ ์คํ์ผ์ํธ ์ ์ฉ
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">๊ธฐ๋ณธ์ ์ผ๋ก <head> ํ๊ทธ ์์ ๋ฃ์ด ์ฃผ์ ์ผ ํฉ๋๋ค.
โ ํญ ๋ฉ๋ด ๊ตฌ์ฑ
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="saleList-tab"
data-bs-toggle="tab"
data-bs-target="#saleList"
type="button"
role="tab"
aria-controls="saleList"
aria-selected="true"
>
ํ๋งคํํฉ
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="myreview-tab"
data-bs-toggle="tab"
data-bs-target="#purchaseList"
type="button"
role="tab"
aria-controls="purchaseList"
aria-selected="false"
>
๊ตฌ๋งคํํฉ
</button>
</li>
</ul><ul>, <li> ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์์ ์๋ ๋ชฉ๋ก์ ๋ง๋ค๊ณ ๋ฒํผ์ผ๋ก ํญ ๋ฉ๋ด๋ฅผ ๋ง๋ค์์ต๋๋ค.
โ ๋ฉ๋ด๋ณ ๋ด์ฉ ๊ตฌ์ฑ
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="saleList-tab"
role="tabpanel"
aria-labelledby="saleList"
>
<table class="tb-w100 text-center">
<colgroup>
<col style="width: 30%" />
<col style="width: 20%" />
<col style="width: 20%" />
<col style="width: 30%" />
</colgroup>
<tr>
<th>์ํ๋ช
</th>
<th>์ต๊ณ ์
์ฐฐ๊ฐ</th>
<th>๊ฒฝ๋งค์ํ</th>
<th>๋จ์ ๋ง๊ฐ์๊ฐ</th>
</tr>
<tr>
<td>HTML</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CSS</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>JAVASCRIPT</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div
class="tab-pane fade"
id="purchaseList"
role="tabpanel"
aria-labelledby="purchaseList-tab"
>
...
</div>
</div>- <table> ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ๋ฉ๋ด๋ณ ๋ด์ฉ์ ๊ตฌ์ฑํ์์ต๋๋ค.
- <colgroup> ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ๊ฐ ์ด๋ง๋ค ๋๋น๋ฅผ ์ง์ ํ์์ต๋๋ค.
โ ํญ ์ ํ JS ์ ์ฉ
<script>
let key = '${param.key}';
console.log(key);
if (key === 'saleList') {
$('#buyList-tab').removeClass('active');
$('#saleList-tab').addClass('active');
$('#buyList').removeClass('show active');
$('#saleList').addClass('show active');
} else if (key === 'buyList') {
$('#saleList-tab').removeClass('active');
$('#buyList-tab').addClass('active');
$('#saleList').removeClass('show active');
$('#buyList').addClass('show active');
}
</script>
โ Bootstrap JavaScript plugin ์ ์ฉ
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script>๋ฅผ </body> ํ๊ทธ๊ฐ ๋ซํ๊ธฐ ์ ์ ํ์ด์ง ๋ ๋ถ๋ถ์ ๋ฃ์ด ํ์ฑํ ์ํต๋๋ค.
์ง๊ธ๊น์ง Bootstrap ํญ ์ฌ์ฉ๋ฒ์ ๋ํด ์์๋ณด์์ต๋๋ค!
'Frontend > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ๋ฐ์ํ ํค๋ ๋ง๋ค๊ธฐ (feat. mediaQuery) (0) | 2022.09.26 |
|---|---|
| [CSS] CSS Units(px, em, rem, vw, vh, %)์ ๋ํด ์์๋ณด์โ๏ธ (0) | 2022.08.09 |
