๐Ÿ’›[๋ถ€์ŠคํŠธ์ฝ”์Šค_์›น UI ๊ฐœ๋ฐœ] 13. ๋ ˆ์ด์•„์›ƒ

๐Ÿ‘พยท2021๋…„ 1์›” 28์ผ
0

HTML & CSS

๋ชฉ๋ก ๋ณด๊ธฐ
13/20

๋ ˆ์ด์•„์›ƒ ์†Œ๊ฐœ

๋ ˆ์ด์•„์›ƒ์˜ ์‚ฌ์ „์  ์˜๋ฏธ
: ์ฑ…์ด๋‚˜ ์‹ ๋ฌธ, ์žก์ง€ ๋”ฐ์œ„์—์„œ ๊ธ€์ด๋‚˜ ๊ทธ๋ฆผ ๋”ฐ์œ„๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ •๋ฆฌํ•˜๊ณ  ๋ฐฐ์น˜ํ•˜๋Š” ์ผ.

์ด์ฒ˜๋Ÿผ ์›น์—์„œ ๋””์ž์ธ์ด ๋œ ์›นํŽ˜์ด์ง€์˜ ๊ตฌ์„ฑ ์š”์†Œ๋“ค์„ ํšจ๊ณผ์ ์œผ๋กœ ์ •๋ฆฌํ•˜๊ณ  ๋ฐฐ์น˜ํ•˜๋Š” ์ผ์„ layout์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

๋ ˆ์ด์•„์›ƒ์€ ๋ฐฐ์น˜ ๊ตฌ์„ฑ์— ๋”ฐ๋ผ์„œ ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
๋ณดํ†ต ๋ ˆ์ด์•„์›ƒ์€ ๊ทธ๋ฆฌ๋“œ๋กœ ์งœ์ธ ๊ตฌ์„ฑ ์ˆœ์„œ๋‚˜ ์œ„์น˜์— ๋”ฐ๋ผ์„œ ๋ถˆ๋ฆฌ๋Š” ๋Œ€ํ‘œ์ ์ธ ์ด๋ฆ„์ด ์žˆ๋‹ค.

  • 1๋‹จ ๋ ˆ์ด์•„์›ƒ(๊ฐ€์žฅ ๊ธฐ๋ณธ)
  • ์ƒ๋‹จ ๊ณ ์ • ๋ ˆ์ด์•„์›ƒ
  • ์ƒ, ํ•˜๋‹จ ๊ณ ์ • ๋ ˆ์ด์•„์›ƒ
  • 2๋‹จ ๋ ˆ์ด์•„์›ƒ(์ฝ˜ํ…์ธ ์˜ ์˜์—ญ์ด ๋‘๊ฐœ๋กœ ๋‚˜๋ˆ„์–ด์ง)
  • 3๋‹จ ๋ ˆ์ด์•„์›ƒ
  • ๋‹ค๋‹จ ๋ ˆ์ด์•„์›ƒ (2๋‹จ, 3๋‹จ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ๊ฐœ์˜ ๋‹จ์œผ๋กœ ์ด๋ฃจ์–ด์ง„ ๋ ˆ์ด์•„์›ƒ)

1๋‹จ ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘

1๋‹จ ๋ ˆ์ด์•„์›ƒ
: ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ด ๋˜๋Š” ๋ ˆ์ด์•„์›ƒ.
ํ—ค๋” ์˜์—ญ, ์ฝ˜ํ…์ธ  ์˜์—ญ, ํ‘ธํ„ฐ ์˜์—ญ์ด ์ง๋ ฌ๋กœ ์—ฐ๊ฒฐ๋œ ํ˜•ํƒœ

ex) ๋„ค์ด๋ฒ„ ์‡ผํ•‘, ๋„ค์ด๋ฒ„ ์‚ฌ์ „, ๋„ค์ด๋ฒ„ ํฌ์ŠคํŠธ

ํŠน์ˆ˜ํ•œ ์ƒํ™ฉ์˜ ๋ ˆ์ด์•„์›ƒ์ด ์•„๋‹ˆ๋ฉด ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ์€ header ์˜์—ญ, content ์˜์—ญ, footer ์˜์—ญ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

๋ ˆ์ด์•„์›ƒ์„ ์ง์ ‘ ์งœ์„œ ์ž‘์—…ํ•ด์•ผํ•˜๋Š” ์‹ค๋ฌด์ž๋“ค์€ ์›น์‚ฌ์ดํŠธ์˜ ๋””์ž์ธ์„ ๋ณด๊ณ  ๊ฐ ์˜์—ญ์˜ ๋ฒ”์œ„๊ฐ€ ์–ด๋””์ธ์ง€๋ฅผ ํŒŒ์•…ํ•˜๋Š”๊ฒƒ์œผ๋กœ ์ž‘์—… ์‹œ์ž‘.
๋”ฐ๋ผ์„œ ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๊ฒฝํ—˜ํ•˜๊ณ  ์‚ดํŽด๋ณด๋Š” ์—ฐ์Šต์ด ํ•„์š”ํ•˜๋‹ค.

์‹ค์Šต ๊ธฐ๋ณธ ์š”๊ตฌ ์‚ฌํ•ญ

header, content, footer๋“ฑ์œผ๋กœ ์ด๋ฃจ์–ด์ง„ 1๋‹จ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š”๊ฒƒ์ด ๋ชฉํ‘œ

์Šคํƒ€์ผ์ •๋ณด

์ฟคํ…์ธ  ์ตœ๋Œ€๊ฐ€๋กœ๊ธธ์ด 1200px
์ฝ˜ํ…์ธ  ์ตœ์†Œ๊ฐ€๋กœ๊ธธ์ด 800px
์ฝ˜ํ…์ธ  ๋‚ด์šฉ ๊ฐ€์šด๋ฐ ์ •๋ ฌ

์ฃผ์š” ํƒœ๊ทธ ๋ฐ ์†์„ฑ

  • HTML
    div
    div๋กœ ๊ฐ ์š”์†Œ๋“ค์˜ ํ˜•ํƒœ๋ฅผ ์žก์•„์ค€๋‹ค.
  • CSS
    min-width, max-width

<!-- div๋ฅผ ์ด์šฉํ•œ 1๋‹จ ๋ ˆ์ด์•„์›ƒ -->
<div class="wrap">
   <div class="header">header</div>
   <div class="content">content</div>
   <div class="footer">footer</div>
</div>

<!-- html5๋ฅผ ์ด์šฉํ•œ 1๋‹จ ๋ ˆ์ด์•„์›ƒ -->
<div class="wrap">
    <header>header</header>
    <section>content</section>
    <footer>footer</footer>
</div>

wrap: 1๋‹จ ๋ ˆ์ด์•„์›ƒ์˜ ์ „์ฒด ํ‹€ ๊ฒฐ์ •
์ผ๋ฐ˜์ ์œผ๋กœ ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๋–„ wrap, wrapper๋“ฑ์˜ ์ด๋ฆ„์„ ์ฃผ์–ด์„œ ๋ถ€๋ชจ์š”์†Œ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š”๊ฒƒ์ด ์ผ๋ฐ˜์ 
wrap ์•ˆ์— ํ•„์š”ํ•œ ์š”์†Œ๋“ค ๋ฐฐ์น˜ํ•ด์„œ ๋ ˆ์ด์•„์›ƒ ์™„์„ฑ

  1. ๊ธฐ๋ณธ ํƒœ๊ทธ์— ์Šคํƒ€์ผ ๋ถ€์—ฌ
.header{
    height: 100px;
    background-color: lightgreen; 
}
.content{
    height: 300px;
    background-color: lightsalmon;
}
.footer{
    height:100px;
    background-color: lightblue;
}
  1. ์ฝ˜ํ…์ธ  ์˜์—ญ ์ตœ๋Œ€๊ฐ’ ๋ฐ ๊ฐ€์šด๋ฐ ์ •๋ ฌ
.header{
    height: 100px;
    background-color: lightgreen; 
}
.content{
    max-width: 1200px; /* ์ตœ๋Œ€ ๊ฐ€๋กœ๊ธธ์ด 1200px */
    height: 300px;
    margin: 0 auto; /* ๋ธ”๋Ÿญ์š”์†Œ ๊ฐ€์šด๋ฐ ์ •๋ ฌ */
    background-color: lightsalmon;
}
.footer{
    height:100px;
    background-color: lightblue;
}
  1. ์ „์ฒด ์˜์—ญ ์ตœ์†Œ๊ฐ’(800px)
.wrap {
	text-align:center;
    min-width: 800px; /* ์ตœ์†Œ ๊ฐ€๋กœ๊ธธ์ด 800px */
}
.header{
    height: 100px;
    background-color: lightgreen; 
}
.content{
    max-width: 1200px; /*์ตœ๋Œ€ ๊ฐ€๋กœ๊ธธ์ด 1200px*/
    height: 300px;
    margin: 0 auto; /*๊ฐ€์šด๋ฐ ์ •๋ ฌ*/
    background-color: lightsalmon;
}
.footer{
    height:100px;
    background-color: lightblue;
}

์ •๋ฆฌ

max-width๋ฅผ ์ด์šฉํ•œ ์ตœ๋Œ€๊ธธ์ด ์„ค์ •
min-width๋ฅผ ์ด์šฉํ•œ ์ตœ์†Œ๊ธธ์ด ์„ค์ •


๋‹ค๋‹จ ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘


ex) ๋„ค์ด๋ฒ„ ๋ฎค์ง, ๋„ค์ด๋ฒ„ ์ง€์‹๋ฐฑ๊ณผ, ๋„ค์ด๋ฒ„ ๋‚ ์”จ

header, footer, content, aside(side), visual ์˜์—ญ

content์˜ ์˜์—ญ์„ ์ปฌ๋Ÿผ๋ณ„๋กœ ๋‚˜๋ˆ„์–ด์ง„ ๋ ˆ์ด์•„์›ƒ์„ ๋‹ค๋‹จ ๋ ˆ์ด์•„์›ƒ์ด๋ผ ํ•œ๋‹ค.

์ปฌ๋Ÿผ์ด ๋‘๊ฐœ๋กœ ๋‚˜๋ˆ„์–ด์ ธ ์žˆ์œผ๋ฉด 2๋‹จ ๋ ˆ์ด์•„์›ƒ
content ์˜์—ญ์„ 3๊ฐœ๋กœ ๋‚˜๋ˆ„๋ฉด 3๋‹จ ๋ ˆ์ด์•„์›ƒ
์ปฌ๋Ÿผ์„ ๋‚˜๋ˆ„๋Š” ์ˆ˜์— ๋”ฐ๋ผ์„œ ๋‹ค๋‹จ ๋ ˆ์ด์•„์›ƒ์˜ ๊ฐœ์ˆ˜๊ฐ€ ์ •ํ•ด์ง„๋‹ค.

์‹ค์Šต ๋ชฉํ‘œ

container์˜ ๋‚ด์šฉ์ด content์™€ side ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆˆ๋‹ค.
์ด๋•Œ content์™€ side ์˜์—ญ์„ ๊ฐ€๋ฅด๋Š” border, ๊ตฌ๋ถ„์„ ์ด container์˜ ์ตœ์†Œ ๋†’์ด์— ๋”ฐ๋ผ ๊ฝ‰์ฐฌ ๊ธธ์ด๊ฐ€ ๋˜๋„๋ก ๋งŒ๋“œ๋Š”๊ฒƒ์ด ๋ชฉํ‘œ

์Šคํƒ€์ผ ์ •๋ณด

์ฝ˜ํ…์ธ  ๊ฐ€๋กœ ๊ธธ์ด 500px
์‚ฌ์ด๋“œ๋ฉ”๋‰ด ๊ฐ€๋กœ ๊ธธ์ด 300px
์ฝ˜ํ…์ธ  ์ตœ์†Œ ๋†’์ด 100%

์ฃผ์š” ํƒœ๊ทธ ๋ฐ ์†์„ฑ

  • HTML
    div
    div๋กœ ์˜์—ญ์„ ์žก์•„์ค€๋‹ค.
  • CSS
    float, display(table, table-cell)
  1. float ์ด์šฉํ•œ ๋ฐฉ๋ฒ•
    ๋‘๊ฐœ๋ฅผ float์œผ๋กœ ์ •๋ ฌํ•ด์„œ side์˜์—ญ๊ณผ content์˜์—ญ์„ ๋‚˜๋ˆ”
  2. display์˜ table, table-cell ์†์„ฑ ์ด์šฉํ•˜์—ฌ ๋‘๊ฐœ์˜ ๋‚ด์šฉ์„ ์ •๋ ฌ

<div class="wrap">
    <div class="header">header</div>
    <div class="container"> <!-- content์™€ aside์˜ ๋ฌถ์Œ ์˜์—ญ ์ถ”๊ฐ€ -->
        <div class="content">content</div>
        <div class="aside">aside</div> 
    </div>
    <div class="footer">footer</div>
</div>

content, aside๋ฅผ container๋กœ ๋ฌถ์–ด์คŒ

  1. float ์ด์šฉํ•œ ๋ฐฉ๋ฒ•
html, body, .wrap{
	height:100%: /*min-height๊ฐ’ ์ ์šฉ ์œ„ํ•ด*/
}
.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    position: relative; /* position ๊ธฐ์ค€์˜์—ญ ์„ค์ • */
    width: 800px; /*์ž์‹์š”์†Œ float ๋‘๊ฐœ๋ฅผ ๋ฐ›์•„๋“ค์ผ ์ˆ˜ ์žˆ์„ ์ •๋„์˜ ํฌ๊ธฐ*/
    margin: -100px auto; /*๊ฐ€์šด๋ฐ ์ •๋ ฌ*/
    min-height:100%; /*์ตœ์ƒ๋‹จ์˜ ๋ถ€๋ชจ ์š”์†Œ๋กœ๋ถ€ํ„ฐ ์ƒ์†๋ฐ›์•„์•ผํ•จ*/
    padding:100px 0;
    box-sizing:border-box; /*padding๊ฐ’์ด ๋†’์ด๊ฐ’์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด*/
    
}
.container:after { /*footer ์œ„ํ•œ float ํ•ด์ œ*/
  display: block;
  clear: both;
  content: '';
}
.content {
    float: left; /*์ •๋ ฌ*/
    width: 500px; 
    height: 300px;
    background-color: lightsalmon;
}
.aside {
    float: left; /*์ •๋ ฌ*/
    width: 300px; 
    height: 300px;
    background-color: lightseagreen;
}
.aside:after{ /* ๊ตฌ๋ถ„์„  ๋งŒ๋“ค๊ธฐ */
/*๊ฐ€์ƒ ์—˜๋ฆฌ๋จผํŠธ๋กœ ๋„ํ˜•์„ ๋งŒ๋“ค์–ด์„œ ๋„์›Œ์คŒ*/
    content:''; /*๋นˆ content*/
    position:absolute;
    right:300px;
    top: 100px;
    bottom: 100px;
    width:5px;
    background-color: #000;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}
  1. display:table์„ ์ด์šฉํ•œ 2๋‹จ ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ
html, body, .wrap{
	height:100%;
}
.header {
    height:100px;
    background-color: lightgreen;
}
.container {
    display: table; 
    /*๊ณ ์ •๋œ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ฒŒ*/
    table-layout:fixed;
    width: 800px;
    
    margin: -100px auto;
    min-height:100%;
    padding: 100px 0;
    box-sizing:border-box;
}
.content {
    display: table-cell; 
    width: 495px; /* -5px ํ•˜์—ฌ ์ถ”๊ฐ€๋œ ๊ตฌ๋ถ„์„  ๋งŒํผ ๋นผ๊ธฐ */ 
    background-color: lightsalmon;
    border-right: 5px solid #000; /* border๋ฅผ ์ด์šฉํ•ด ๊ตฌ๋ถ„์„  ์ถ”๊ฐ€ */
}
.aside {
    display: table-cell;
    background-color: lightseagreen;
}
.footer {
    height:100px;
    background-color: cornflowerblue;
}

float ๋ฐฉ๋ฒ•๊ณผ ์ฐจ์ด์ 
container๊ณผ ๊ธธ์–ด์ง€๊ฑฐ๋‚˜ ์งง์•„์งˆ์ˆ˜๋ก ๋†’์ด๋ฅผ ์ƒ์†ํ•ด์„œ table-cell๋“ค์ด ๋†’์ด๊ฐ’์„ ํ•จ๊ป˜ ์ƒ์†๋ฐ›์•„ ์ ์šฉ๋œ๋‹ค.
-> ์ž์‹ ์š”์†Œ๋“ค์˜ height๊ฐ’ ํ•„์š” ์—†์Œ
-> ๊ตฌ๋ถ„์„  ๋„ฃ์„๋•Œ content์˜ border๋‚˜ aside์˜ border๋ฅผ ์ด์šฉํ•˜๋ฉด ๋˜๋ฏ€๋กœ ํŽธ๋ฆฌ

  • float์„ ์ด์šฉํ•œ ๋ ˆ์ด์•„์›ƒ
    float์„ ํ•ด์ œํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ๋ฐ˜๋“œ์‹œ ํ•„์š”
    content ์˜์—ญ๊ณผ side ์˜์—ญ์˜ ๊ตฌ๋ถ„์„ ์„ ๋„ฃ๊ธฐ ์œ„ํ•ด์„œ container์˜ ๋†’์ด๊ฐ’์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด์„œ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• ์ด์šฉ

  • display:table์„ ์ด์šฉํ•œ ๋ ˆ์ด์•„์›ƒ
    container์˜ ๋†’์ด๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ table-cell์˜ ๋†’์ด๊ฐ’์ด ์ƒ์†๋˜๋ฏ€๋กœ border๋งŒ ์ฃผ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋” ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ตฌ๋ถ„์„ ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์—ˆ๋”ฐ.

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


๊ณ ์ • ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘

fixed ๋ ˆ์ด์•„์›ƒ
์ƒ๋‹จ์ด๋‚˜ ์ƒํ•˜๋‹จ์ด ๊ณ ์ •๋˜๋Š” ๋ ˆ์ด์•„์›ƒ
ex) ์†Œํ”„ํŠธ์›จ์–ด์•ผ ๋†€์ž, ์˜ค๋””์˜ค ํด๋ฆฝ, ๋ผ์ธ

content์˜ ๋‚ด์šฉ์ด ๊ธธ์–ด์„œ ๋ฉ”์ธ ๋ฉ”๋‰ด๋‚˜ ์ปจํŠธ๋กค ์˜์—ญ์„ ์ตœ์ƒ๋‹จ์— ๊ณ ์ •์‹œํ‚ค๊ณ  ์‚ฌ์šฉ์ž์˜ ์ ‘๊ทผ์„ ์‰ฝ๊ฒŒ ํ•ด์ฃผ๋Š” UI๋ฅผ ์ƒ๋‹จ ๊ณ ์ •ํ˜• ๋ ˆ์ด์•„์›ƒ์ด๋ผ๊ณ  ํ•œ๋‹ค.

์‹ค์Šต

  1. ์ƒ๋‹จ ๊ณ ์ •ํ˜• ๋ ˆ์ด์•„์›ƒ
  2. ์ƒํ•˜๋‹จ fixed ๋ ˆ์ด์•„์›ƒ

์‹ค์Šต ์š”๊ตฌ์‚ฌํ•ญ

header ์ƒ๋‹จ ๊ณ ์ •
footer ํ•˜๋‹จ ๊ณ ์ •
์ฝ˜ํ…์ธ  ์ตœ์†Œ ๋†’์ด 100%

์ฃผ์š” ํƒœ๊ทธ ๋ฐ ์†์„ฑ

  • HTML
    div
  • CSS
    position(fixed), min-height, margin, padding

<div class="wrap">
    <div class="header">header</div>
    <div class="container">
        <div class="content">content</div>
    </div>
    <div class="footer">footer</div>
</div>

์ƒ๋‹จ ๊ณ ์ • ๋ ˆ์ด์•„์›ƒ

html,
body,
.wrap {
   height: 100%;
   /*์ƒ์†ํ•˜๊ธฐ ์œ„ํ•œ ๋ถ€๋ชจ์˜ height*/
}
.header {
    position: fixed;  
    top: 0; left: 0; right: 0; 
    height: 100px;
    background-color: lightgreen; 
}
.container {
    min-height: 100%; 
    /*height๋ฅผ %๋กœ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ถ€๋ชจ์š”์†Œ๋กœ๋ถ€ํ„ฐ ๋†’์ด๊ฐ’ ์ƒ์†๋ฐ›์•„์•ผํ•จ*/
    margin-top: -100px; /*footer์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•ด*/ 
}
.content{
    height: 300px;
    padding-top: 200px; /* ๊ฐ€๋ ค์ง„ height์˜ ๋†’์ด๊ฐ’๊ณผ ๋Œ์–ด์˜ฌ๋ฆฐ footer์˜ ๋†’์ด๊ฐ’์„ ํ•ฉ์นœ ๊ฐ’์„ padding-top์œผ๋กœ ๋ฐ€์–ด์ค€๋‹ค. */
    background-color: lightsalmon;
}
.footer{
    position: fixed; 
    bottom: 0; left: 0; right: 0;
    height:100px;
    background-color: lightblue;
}

box-sizing ์†์„ฑ์„ ์ด์šฉํ•œ ์ƒ๋‹จ ๊ณ ์ • ๋ ˆ์ด์•„์›ƒ

html,
body,
.wrap {
   height: 100%;
}
.header {
    position: fixed;  
    top: 0; left: 0; right: 0; 
    height: 100px;
    background-color: lightgreen; 
}
.container {
    min-height: 100%; 
    margin-top: -100px; 
    padding-top: 200px; /* ๊ฐ€๋ ค์ง„ header์™€ ๋Œ์–ด์˜ฌ๋ฆฐ footer์˜ ๋†’์ด๊ฐ’ ๋งŒํผ ๋ถ€์—ฌ */
    box-sizing: border-box; /* padding์ด๋‚˜ border๋ฅผ ์ปจํ…์ธ ์— ๋ถ€์—ฌ๋œ ๋†’์ด๊ฐ’์— ํฌํ•จ */
}
.content{
    height: 300px;
    background-color: lightsalmon;
}
.footer{
    position: fixed; 
    bottom: 0; left: 0; right: 0;
    height:100px;
    background-color: lightblue;
}

์ƒํ•˜๋‹จ ๊ณ ์ • ๋ ˆ์ด์•„์›ƒ

html,
body,
.wrap {
    height: 100%; /* ๋ถ€๋ชจ์š”์†Œ์— height 100% ๋ถ€์—ฌ */
}
.header{
    position: fixed;  
    top: 0; left: 0; right: 0;
    height: 100px;
    background-color: lightgreen; 
}
.container {
    min-height: 100%; 
    padding: 100px 0; /* height, footer ๋’ค๋กœ ๊ฐ€๋ ค์ง„ ์˜์—ญ ๋…ธ์ถœ */
    box-sizing: border-box; /* padding๊ฐ’์„ ๋†’์ด์—์„œ ๋ฌด์‹œํ•˜๋„๋ก ์†์„ฑ ์ถ”๊ฐ€ */
}
.content{
    height: 300px;
    background-color: lightsalmon;
}
.footer{
    position: fixed;  
    bottom: 0; left: 0; right: 0; 
    height:100px;
    background-color: lightblue;
}

์ •๋ฆฌ

  • position:fixed๋ฅผ ์ด์šฉํ•œ ์˜์—ญ ๊ณ ์ • ๋ฐฉ๋ฒ• ์‹ค์Šต
    position:fixed๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•ญ์ƒ ํ™”๋ฉด์— ๋„์šฐ๋Š” ํ˜•ํƒœ๋ฅผ ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋””์ž์ธ์— ์žˆ์–ด์„œ fixed๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ์œ„์น˜์— ๋Œ€ํ•ด์„œ ์ •ํ™•ํžˆ ํŒŒ์•…ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š”๊ฒƒ์ด ์ข‹๋‹ค.

  • height์˜ ์ƒ์†
    height๋ฅผ %๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ผญ ๋ถ€๋ชจ์—๊ฒŒ์„œ ๋ถ€์—ฌ๋ฐ›์€ ๋†’์ด๋ฅผ ์ƒ์†๋ฐ›์•„์•ผํ•œ๋‹ค. ์ค‘์š”
    ๋†’์ด๊ฐ’์˜ 100%๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ๋ณด์—ฌ์ง€๋Š” ๋ถ€๋ถ„๊นŒ์ง€๋งŒ์˜ ๋†’์ด๊ฐ’์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

  • ์Œ์ˆ˜ margin์„ ์ด์šฉํ•œ content ๋†’์ด 100% ํ™•๋ณด
    ์Œ์ˆ˜ margin์„ ํ–ˆ์„๋•Œ๋Š” ์ „์ฒด ๋ ˆ์ด์•„์›ƒ์— ๋‹ค๋ฅธ ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋„๋ก ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€