๋ชฉ์ฐจ
๋ถํธ์คํธ๋ฉ์ ํ์ฉํ ์น ๋์์ธ์์ ๊ฐ๋ก ํญ ์กฐ์
๋ถํธ์คํธ๋ฉ์ ๋ฐ์ํ ์น ๋์์ธ์ ์ฝ๊ฒ ๋ง๋ค์ด์ฃผ๋ ํ๋ ์์ํฌ์ ๋๋ค. ๊ทธ๋ฐ๋ฐ ๋๋๋ก, ํนํ ์๋ก ์์ํ๋ ๋ถ๋ค์๊ฒ๋ ๊ทธ๋ฆฌ๋ ์์คํ ์ด๋ ์ปจํ ์ด๋ ์ฌ์ฉ์ ์์ด ํผ๋์ ์ค ์ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ๋ถํธ์คํธ๋ฉ์ ๊ฐ๋ก ํญ(width) ๊ด๋ จ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ค๋ช ํ๊ณ ์ ํฉ๋๋ค.
๋ถํธ์คํธ๋ฉ์ ๊ทธ๋ฆฌ๋ ์์คํ ์ดํด
๋ถํธ์คํธ๋ฉ์ ๊ทธ๋ฆฌ๋ ์์คํ
์ ์ปจํ
์ด๋, ํ(row), ๊ทธ๋ฆฌ๊ณ ์ด(column) ์ธ ๊ฐ์ง ์ฃผ์ ๊ตฌ์ฑ ์์๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ์ด๋ค์ ๋ฐ์ํ ๋ ์ด์์์ ๋ง๋ค๊ธฐ ์ํด ์๋ก ํจ๊ป ์๋ํฉ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก, .row
ํด๋์ค๋ ๊ฐ๋ก ๋ฐฉํฅ์ ์ฌ๋ฐฑ์ ๋ง๋ค์ด๋ด๋๋ฐ, ์ด๋ ์ด๋ค์ด ์ ์ ํ ๊ฐ๊ฒฉ์ ์ ์งํ ์ ์๋๋ก ํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด ์ฌ๋ฐฑ์ .row
๊ฐ ๋ถ๋ชจ ์์์ ๊ฒฝ๊ณ๋ฅผ ๋ฒ์ด๋๊ฒ ๋ง๋ค ์๋ ์์ต๋๋ค.
๋ถํธ์คํธ๋ฉ width grid incorrect
.row
ํด๋์ค๊ฐ ๋ถ๋ชจ ์์์ ๊ฒฝ๊ณ๋ฅผ ๋์ด์๋ ์ํฉ์ด ๋ฐ์ํ๊ณ , .info
๋ฐ ๋ค๋ฅธ ์์๋ค๊ณผ์ ์ผ๊ด์ฑ์ด ๋จ์ด์ง๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ด๋ ๋ถํธ์คํธ๋ฉ์ ๊ทธ๋ฆฌ๋ ์์คํ
์ด ์๋ํ ๋ฐ์๋ ๋ค๋ฅด๊ฒ ์๋ํ๋ ๊ฒ์
๋๋ค.
ํด๊ฒฐ ๋ฐฉ์
ํด๋น ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ .container
๋๋ .container-fluid
ํด๋์ค๋ฅผ ์ ์ ํ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ์ด๋ค์ .row
์ ํจ๊ป ์ฌ์ฉ๋ ๋, ์ฌ๋ฐ๋ฅธ ํจ๋ฉ๊ณผ ๋ง์ง์ ์ค์ ํ์ฌ ์์๋ค์ด ์์์น ๋ชปํ ๋ฐฉ์์ผ๋ก ํ์ฅ๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
<div id="wrapper">
<!-- .container ๋๋ .container-fluid ํด๋์ค๋ฅผ ์ถ๊ฐํฉ๋๋ค. -->
<div class="container">
<div class="row">
<div class="col-12">
...
</div>
</div>
</div>
</div>
.container
๋ ๋ฐ์ํ ๊ณ ์ ๋๋น ์ปจํ
์ด๋๋ฅผ ์ ๊ณตํ๋ฉฐ, .container-fluid
๋ ์ ์ฒด ๋๋น๋ฅผ ์ฌ์ฉํ๋ ์ปจํ
์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
๊ตฌ์ฒด์ ์ธ ์์ ๋ฐฉ๋ฒ
๊ธฐ์กด์ ์ฝ๋์์ .row
์์ ์ฃผ๋ณ์ .container
ํด๋์ค๋ฅผ ์ถ๊ฐํจ์ผ๋ก์จ, ๊ทธ๋ฆฌ๋์ ์์ ๋ง์ง์ด .container
์ ์ํด ์์๋์ด ๋ด๋ถ ์์๋ค์ด ๋ถ๋ชจ ์์๋ฅผ ๋ฒ์ด๋์ง ์๊ฒ ๋ฉ๋๋ค.
์๋๋ ์์ ๋ ์์ ์ฝ๋์ ๋๋ค:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
#wrapper {background: yellow; max-width: 500px; margin: 0 auto; }
.info {background: blue;}
#side {background: red}
#data {background: orange;}
</style>
<div id="wrapper">
<!-- .container ํด๋์ค ์ถ๊ฐ -->
<div class="container">
<div class="row">
<div class="col-12">
...
<div class="row">
<!-- ๋ด๋ถ row์ ๋ํด์๋ container ํด๋์ค๊ฐ ํ์ ์์ต๋๋ค. -->
<section id="side" class="col-md-4 col-lg-3">
...
</section>
<section class="col-md-8 col-lg-9">
...
</section>
</div>
</div>
</div>
</div>
</div>
์ฃผ์ ์ฌํญ
๋ถํธ์คํธ๋ฉ์ ํด๋์ค๋ฅผ ์ฌ์ฉํ ๋๋ ํด๋น ํด๋์ค๊ฐ ์ด๋ ํ ์ํฅ์ ๋ฏธ์น๋์ง, ๊ทธ๋ฆฌ๊ณ ๋ถ๋ชจ-์์ ๊ด๊ณ์์ ์ด๋ป๊ฒ ์ํธ์์ฉํ๋์ง ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ํด๋์ค๋ฅผ ์ถ๊ฐํ๊ฑฐ๋ ์ ๊ฑฐํ ๋๋ง๋ค ์น ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํ๊ณ , ๋ณ๊ฒฝ ์ฌํญ์ด ๊ธฐ๋ํ ๋๋ก ์ ์ฉ๋๋์ง ํ์ธํ์ธ์.
๋ถํธ์คํธ๋ฉ, ์น ๋์์ธ, ๋ฐ์ํ ๋ ์ด์์, ๊ทธ๋ฆฌ๋ ์์คํ , ์ปจํ ์ด๋, ์ด, ํ, CSS, ๋ง์ง, ํจ๋ฉ, ๋ถ๋ชจ ์์, ์์ ์์, ๋๋น ์กฐ์ , ์ต๋ ๋๋น, ๊ณ ์ ๋๋น, ์ ์ฒด ๋๋น
๋๊ธ