Notice
Recent Posts
Recent Comments
ยซ   2024/12   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
In Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

A Joyful AI Research Journey๐ŸŒณ๐Ÿ˜Š

CSS: ํ”„๋ฆฐํŠธ ํ•  ๋•Œ ์›ํ•˜๋Š” ์š”์†Œ ์ตœ์ƒ๋‹จ, ์ตœํ•˜๋‹จ์— ๋‘๊ธฐ position:fixed, bottom:0 or top:0 ์‚ฌ์šฉํ•˜๊ธฐ ๋ณธ๋ฌธ

๐Ÿ’ปBootcamp Self-Study Revisionโœจ/HTML5, CSS, Bootstrap, JSP

CSS: ํ”„๋ฆฐํŠธ ํ•  ๋•Œ ์›ํ•˜๋Š” ์š”์†Œ ์ตœ์ƒ๋‹จ, ์ตœํ•˜๋‹จ์— ๋‘๊ธฐ position:fixed, bottom:0 or top:0 ์‚ฌ์šฉํ•˜๊ธฐ

yjyuwisely 2023. 4. 25. 22:15

230425

์•„๋ž˜ ์บก์ณ ์ด๋ฏธ์ง€๋Š” ์˜ค๋Š˜ ๋‚ด๊ฐ€ ๋งŒ๋“  ํŒ€ํ”„๋กœ์ ํŠธ์˜ ์ฆ๋ช…์„œ ์ƒ์„ธ ๋‚ด์—ญ ๋‹ค์šด๋กœ๋“œ ํŽ˜์ด์ง€์ด๋‹ค.
๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด pdf ์ €์žฅ์ด๋‚˜ ์ธ์‡„์ฐฝ์ด ๋œจ๋Š”๋ฐ
๋‚ ์งœ์™€ ๋ณ‘์›์žฅ์€ ์ตœํ•˜๋‹จ์— ์œ„์น˜ํ•˜๊ณ 
์ œ๋ชฉ๊ณผ ํ…Œ์ด๋ธ”, ํ™•์ธํ•จ์ด๋ผ๋Š” ๋ฌธ๊ตฌ๋Š” ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๋Š” ๊ฑธ ์›ํ–ˆ๋‹ค.

๋‚ ์งœ์™€ ๋ณ‘์›์žฅ ์ด๋ฆ„์€ ํด๋ž˜์Šค๋ช…์ด dateCheif์ด๊ณ ,

<p class="dateCheif text-center">
			20AA๋…„ B์›” C์ผ<br> 
            <b class="fs-5">์šธ์‚ฐ ๊ทธ๋ฆฐ ๋ณ‘์› ๋ณ‘์›์žฅ</b><br>
</p>

์ œ๋ชฉ๊ณผ ํ…Œ์ด๋ธ”, ํ™•์ธํ•จ์ด๋ผ๋Š” ๋ฌธ๊ตฌ๋Š” ํด๋ž˜์Šค๋ช…์ด container์ด๋‹ค.

<div class="container card shadow border-0 rounded-4 p-3">
		<h1 class="text-center fs-2 m-2 pb-3">์ง„๋ฃŒํ™•์ธ์„œ</h1>
		<table class="table text-center mb-5">
			<tr>
				<td class="fw-bold" style="background-color: #f2f2f2">ํ™˜์ž ์ด๋ฆ„</td>
				<td>์ด๋ฆ„</td>
				<td class="fw-bold" style="background-color: #f2f2f2">์ฃผ๋ฏผ๋“ฑ๋ก๋ฒˆํ˜ธ</td>
				<td>000000-0000000</td>
			</tr>
			<tr>
				<td class="fw-bold" style="background-color: #f2f2f2">์ƒ๋ณ‘๋ช… ์ฝ”๋“œ</td>
				<td>์ฝ”๋“œ ๋ฒˆํ˜ธ</td>
				<td class="fw-bold" style="background-color: #f2f2f2">๋ณ‘๋ช…</td>
				<td>๋ณ‘๋ช… ์ด๋ฆ„</td>
			</tr>
		</table>
		<p style="margin-bottom: 9rem;">์œ„์™€ ๊ฐ™์ด ์ง„๋ฃŒ๋ฐ›์•˜์Œ์„ ํ™•์ธํ•จ.</p>

ํ•ด๊ฒฐ์ฑ…์€ ์•„๋ž˜ css ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. postion:fixed์™€ ๊ฐ๊ฐ bottom:0์ด๋‚˜ top:0์„ ์“ด๋‹ค.

@media print {
  .dateCheif {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

@media print {
  .container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}


๊ฒฐ๊ณผ) ์‹ ๊ธฐํ•˜๊ฒŒ๋„ ๋‚ ์งœ์™€ ๋ณ‘์›์žฅ์€ ์ตœํ•˜๋‹จ, ๋‚˜๋จธ์ง€ ๋ฌธ๊ตฌ๋Š” ์ตœ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๊ฒŒ ๋๋‹ค!


728x90
๋ฐ˜์‘ํ˜•
Comments