Session 1_4. Layout

๊น€๋ฏผ์žฌยท2021๋…„ 8์›” 20์ผ
1

TIL, WeCode, Courseย 

๋ชฉ๋ก ๋ณด๊ธฐ
13/48
post-thumbnail

*๐Ÿ”Study Keyword :

  • โœ…๋ ˆ์ด์•„์›ƒ๊ณผ ๊ด€๋ จ๋œ CSS์˜ ์†์„ฑ ๐Ÿ”‘1. relative, absolute, fixed์™€ ๐Ÿ”‘2.inline, inline-block, block ๊ทธ๋ฆฌ๊ณ  ๐Ÿ”‘3.float์— ๋Œ€ํ•ด์„œ

1_1. absolute

-WHAT ISโ“

  • CSS์˜ position ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์–ด๋Š ์œ„์น˜์—๋‚˜ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.
  • position ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’์€ 4๊ฐœ๊ฐ€ ์žˆ๊ณ  static๊ฑฐ์˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.
  • position: static; position: relative; position: absolute; position: fixed;

1>relative & 2> absolute

1>relative

  • position: relative; ์ž์ฒด๋กœ๋Š” ์˜๋ฏธ๊ฐ€ ์—†์–ด ์–ด๋Š ์œ„์น˜๋กœ ์ด๋™ํ•˜์ง„ ์•Š๊ณ  ์œ„์น˜๋ฅผ ์ด๋™์‹œ์ผœ์ฃผ๋Š” top, right, bottom, left ํ”„๋กœํผํ‹ฐ๋ฅผ ํ•จ๊ป˜ ์ž‘์„ฑํ•ด์•ผ ์›๋ž˜์˜ ์œ„์น˜(๊ธฐ์ค€)์—์„œ ์ด๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    -์ฆ‰, top, right, bottom, left ์—ญ์‹œ position ํ”„๋กœํผํ‹ฐ๊ฐ€ ์žˆ์„ ๋•Œ ์œ ํšจ**ํ•œ ํ”„๋กœํผํ‹ฐ์ด๋‹ค.

<style>
.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}
</style>
  • div.relative.top-20 ์€ top๋กœ 20px ์ด๋™ํ•˜๊ณ , left์—์„œ 30px๋งŒํผ ๋–จ์–ด์ ธ ๋ฐฐ์น˜๋œ๋‹ค.
  • ์ฃผ์˜ํ•ด์•ผํ•  ๊ฑด **๋งˆ์ด๋„ˆ์Šค ๊ฐ’์€ ์œ„๋กœ ์˜ฌ๋ผ๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

2>absolute

  • position: absolute; ์ ˆ๋Œ€์ ์ธ ์œ„์น˜์— ์š”์†Œ๋ฅผ ๋‘˜ ์ˆ˜ ์žˆ๋‹ค.
  • ํŠน์ • ๋ถ€๋ชจ(๊ธฐ์ค€)์— ๋Œ€ํ•ด ์ ˆ๋Œ€์ ์œผ๋กœ ์›€์ง์ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
  • ๋ถ€๋ชจ ์ค‘์— position์ด relative, fixed, absolute ๋‹จ ํ•˜๋‚˜๋ผ๋„ ์žˆ์œผ๋ฉด ํ•ด๋‹น ์š”์†Œ๋Š” ํŠน์ • ๋ถ€๋ชจ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ ˆ๋Œ€์ ์œผ๋กœ ์›€์ง์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ์ผ๋ฐ˜์ ์œผ๋กœ๋Š” position:absolute๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ฒฝ์šฐ, ๊ธฐ์ค€์ด ๋˜์ค„ ๋ถ€๋ชจ์—๊ฒŒ position: relative;๋ฅผ ๋ถ€์—ฌํ•œ๋‹ค.
<style>
p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}
</style>
  • ๐Ÿ™‹โ€โ™‚๏ธ? pํƒœ๊ทธ๋Š” block-element์ธ๋ฐ
    ๋งˆ์น˜ inline-element
    ์ฒ˜๋Ÿผ ์ฝ˜ํ…์ธ ์˜ ํฌ๊ธฐ๋งŒํผ๋งŒ ๋„ˆ๋น„๊ฐ€ ์ƒ๊ฒผ๋‹ค..?
  • ๐Ÿ™†โ€! ์š”์†Œ๊ฐ€ position์— absolute ๊ฐ’์„ ๊ฐ€์ง€๋ฉด ์ฝ˜ํ…์ธ ์˜ ํฌ๊ธฐ๋งŒํผ๋งŒ ๊ฐ€๋กœํฌ๊ธฐ๋ฅผ ๊ฐ–๊ธฐ ๋•Œ๋ฌธ!.
  • right: 0;, bottom: 0 ์€ ๊ธฐ์ค€์ธ ๋ถ€๋ชจ์˜ ์šฐ์ธก๊ณผ ํ•˜๋‹จ์—์„œ 0๋งŒํผ ๋–จ์—ฌ์ ธ์žˆ๋‹ค๋Š” ๋œป์œผ๋กœ ์ฆ‰, ์™ผ์ชฝ ํ•˜๋‹จ ๋ชจ์„œ๋ฆฌ์— ์œ„์น˜ํ•˜๊ฒŒ ๋œ๋‹ค.
  • left:0; ์ถ”๊ฐ€์‹œ ๋ถ€๋ชจ์˜ ์™ผ์ชฝ์— 0๋งŒํผ ๋–จ์–ด์ ธ ์™ผ์ชฝ์— ์š”์†Œ๊ฐ€ ์œ„์น˜ํ•˜๊ฒŒ ๋œ๋‹ค.

1_2 fixed

  • fixed๋Š” ๊ณ ์ •๋๋‹ค๋Š” ๋œป์œผ๋กœ absolute๋Š” relative๋ฅผ ๊ฐ€์ง„ ์š”์„œ๋Š” ๊ธฐ์ค€์ด ๋˜ ์ค„ ๋ถ€๋ชจ ์š”์†Œ๊ฐ€ ํ•„์š”ํ–ˆ๋Š”๋ฐ, fixed๋Š” ํ•„์š”์—†๋‹ค.
  • fixed ๋œ ์š”์†Œ๋Š” ๋ˆˆ์— ๋ณด์ด๋Š” ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ํฌ๊ธฐ๋งŒํผ, ํ™”๋ฉด ๋‚ด์—์„œ๋งŒ ์›€์ง์ธ๋‹ค.
<style>
.coupon {
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: red;
  color: white;
  font-size: 20px;
}
</style>
  • coupon ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ ํƒœ๊ทธ๋Š” ์Šคํฌ๋กค์„ ๋‚ด๋ ค๋„ right: 0๊ณผ bottom: 0; ์ฆ‰, ๋ธŒ๋ผ์šฐ์ €์˜ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ์—์„œ 0๋งŒํผ ๋–จ์–ด์กŒ๊ธฐ์— ๋ฐ”์ง ๋ถ™์–ด ๊ณ ์ •๋œ๋‹ค.

-2.inline, inline-block, block

-WHAT ISโ“

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> ํƒœ๊ทธ ๋“ฑ์€ ๐Ÿงฑblock ์š”์†Œ์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค.

  • ๐Ÿงฑblock ์š”์†Œ๋Š” ์ด ์š”์†Œ๊ฐ€ ๊ฐ€๋กœ์˜ ๊ณต๊ฐ„์„ ๋ชจ๋‘ ์ฐจ์ง€ํ•ด ์š”์†Œ์˜ ์ขŒ์šฐ์ธก์— ๋‹ค๋ฅธ ์š”์†Œ๊ฐ€ ๋ถ™์ง€ ๋ชปํ•จ์„ ์˜๋ฏธํ•œ๋‹ค.

<span>, <a>, <img> ํƒœ๊ทธ ๋“ฑ์€ ๐Ÿ”ฉinline ์š”์†Œ์ž…๋‹ˆ๋‹ค.

  • ๐Ÿงฑblock ์š”์†Œ์™€ ์„ฑ์งˆ์ด ๋‹ค๋ฅธ ๐Ÿ”ฉinline ์š”์†Œ๋Š” ๊ฐ€๋กœ์˜ ๊ณต๊ฐ„์„ ์š”์†Œ์˜ ์ปจํ…์ธ  ํฌ๊ธฐ ๋งŒํผ๋งŒ ์ฐจ์ง€ํ•˜์—ฌ ์š”์†Œ๋ผ๋ฆฌ ์„œ๋กœ ํ•œ ์ค„์— ๋ฐ”๋กœ ์˜†์— ์œ„์น˜ํ•จ์„ ์˜๋ฏธํ•œ๋‹ค.

  • 4๋ฒˆ์งธ ์ค„๊นŒ์ง„ ๋ชจ๋‘ ๐Ÿงฑblock ์š”์†Œ
    ๋กœ ๐Ÿงฑblock ์š”์†Œ๋Š” ํ•ญ์ƒ ์ƒˆ ์ค„์—์„œ ์‹œ์ž‘ํ•ด ๊ฐ€๋กœ ๊ณต๊ฐ„์„ ์ „๋ถ€ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ฐ˜๋ฉด ๋งˆ์ง€๋ง‰ 5๋ฒˆ์งธ ์ค„์€ ๐Ÿ”ฉinline ์š”์†Œ๋กœ ์ฝ˜ํ…์ธ (ํ…์ŠคํŠธ)๋งŒํผ์˜ ์˜์—ญ๋งŒ์„ ์ฐจ์ง€ํ•ด ๋‹ค๋ฅธ inline ์š”์†Œ์˜ ํƒœ๊ทธ๊ฐ€ ์™€๋„ ๋ฐ”๋กœ ์˜ค๋ฅธ์ชฝ์— ๋‚˜๋ž€ํžˆ ๋‚˜์—ด์ด ๋œ๋‹ค.
  • ๊ธฐ๋ณธ์ ์œผ๋กœ inline, block ์„ฑ์งˆ์— ์˜ํ•ด ํƒœ๊ทธ ๊ฒฐ์ •๋˜์ง€๋งŒ CSS๋กœ ๊ทธ ์„ฑ์งˆ์„ ๋ฐ”๊ฟ€ ์ˆ˜๊ฐ€ ์žˆ๋‹ค.
  • inline ์„ฑ์งˆ์„ ๊ฐ–๋„๋ก ํ•˜๋Š” CSS property์— display์™€ float๊ฐ€ ์žˆ์–ด ํ•ด๋‹น property์— ๊ฐ’์„ ๋ถ€์—ฌํ•˜๋ฉด ํƒœ๊ทธ์˜ ์„ฑ์งˆ์ด ๋ฐ”๋€๋‹ค.
.inline-p {
  display: inline-block;
}
.inline-p {
  display: inline-block;
}
  • property์— dispay:inline-block
    ์„ ๋ถ€์—ฌํ•˜๋ฉด, ์š”์†Œ ์˜†์— ์š”์†Œ๊ฐ€ ๋ฐฐ์น˜๋˜๋Š” inline ์„ฑ์งˆ๋กœ ๋ฐ”๋€๋‹ค.
.block-span {
  display: block;
}
.block-span {
  display: block;
}
  • ๋ฐ˜๋Œ€๋กœ inline ์„ฑ์งˆ์„ ๊ฐ€์ง„ ํƒœ๊ทธ๋ฅผ display:block์„ ํ†ตํ•ด block ์„ฑ์งˆ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ๋„ ์žˆ๋‹ค.

<์ถ”๊ฐ€>

  • display๋ผ๋Š” property์—๋Š” none ๊ฐ’๋„ ์žˆ๋Š”๋ฐ display: none; ๊ฐ’์„ ์ฃผ๋ฉด, ํ•ด๋‹น ์š”์†Œ๋Š” ํ™”๋ฉด์—์„œ ๋ณด์ด์ง€ ์•Š๊ฒŒ ๋œ๋‹ค.
.hide {
  display: none;
}
  • display:none์˜ ํ™œ์šฉ ๋ฒ• ์ค‘ ํ•˜๋‚˜๋Š” interactiveํ•œ ์›น์„ ๊ตฌํ˜„์— ์žˆ๋‹ค.
  • EX > ์‚ฌ์ดํŠธ ๊ฒ€์ƒ‰์ฐฝ์— ํ…์ŠคํŠธ ์ž…๋ ฅํ•œ ์ˆœ๊ฐ„, ์•„๋ž˜์— ๊ด€๋ จ ๋ชฉ๋ก์ด ๋œจ๋Š”๋ฐ ์ด๊ฒƒ์€ ํ•ด๋‹น ์˜์—ญ์ด display: none; ์œผ๋กœ ๋ณด์ด์ง€ ์•Š๋‹ค๊ฐ€ ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅํ•˜๋Š” ์ˆœ๊ฐ„, JavaScript๊ฐ€ ๊ฒ€์ƒ‰ ๋ชฉ๋ก ์š”์†Œ์— ๊ทธ ์ƒˆ๋กœ์šด ํด๋ž˜์Šค์ธ display: block;์ด๋ผ๋Š” ๊ฐ’์œผ๋กœ ๊ต์ฒดํ•˜๋Š” ๋ฐฉ์‹.

3.float

float์€ ์ฃผ๋กœ ์ด๋ฏธ์ง€ ์ฃผ๋ณ€์— ํ…์ŠคํŠธ๋ฅผ ๊ฐ์‹ธ๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํ”„๋กœํผํ‹ฐ์ด๋‹ค.

  • ์š”์ƒˆ๋Š” flex ์†์„ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํŽ˜์ด์ง€ ์ „์ฒด์˜ ๋ ˆ์ด์•„์›ƒ์„ ์žก์ง€๋งŒ ์ด์ „์—๋Š” float๋ฅผ ์‚ฌ์šฉํ•ด ๋ ˆ์ด์•„์›ƒ์„ ์งฐ๋‹ค๋Š” ์‚ฌ์‹ค!

-HOW TO USEโ•โ“

float ์†์„ฑ์—๋Š” left, right, none ๊ฐ€์šด๋ฐ ํ•˜๋‚˜๋ฅผ ๊ฐ’์œผ๋กœ ์ค„ ์ˆ˜ ์žˆ๋‹ค. - float ์†์„ฑ์„ ๊ฐ€์ง„ ์š”์†Œ๋Š” ๋ถ€๋ชจ๊ฐ€ ๋†’์ด๋ฅผ ์ธ์ง€ํ•  ์ˆ˜ ์—†์–ด์„œ ๋ถ€๋ชจ๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•œ๋‹ค.

  • float์˜ ๋‹ค์Œ ํ˜„์ƒ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด clear ์†์„ฑ์ด ํ•„์š”ํ•œ๋ฐ float ์š”์†Œ ์˜†์— ์ฑ„์›Œ์ง€๋Š” ์š”์†Œ๋“ค์—๊ฒŒ ์ ์šฉํ•˜๋Š” ํ”„๋กœํผํ‹ฐ์ด๋‹ค.

-HOW TO SOLVEโ•โ“

  1. ๋ถ€๋ชจ์— div์˜ ๋งˆ์ง€๋ง‰์— ์•„๋ฌด ํƒœ๊ทธ ๋„ฃ์€ ๋’ค claer:both์„ ๋„ฃ์–ด์ค€๋‹ค. ๋‹จ, HTML์ฝ”๋“œ๋ฅผ ๋” ์ž…๋ ฅํ•˜๋Š” ๋ถ€๋‹ด์ด ์žˆ๋‹คใ…œ.
  2. ์ฃผ๋กœ ์‚ฌ์šฉ ๋ฐฉ์‹์œผ๋กœ ๋ถ€๋ชจ div์— overflow: hidden;์„ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.
  3. ๋ถ€๋ชจ div float์‹œํ‚ค๋ฉด ์ž์‹์˜ float ๋†’์ด๋ฅผ ์ธ์ง€ํ•˜์—ฌ ๊ทธ๋งŒํผ ๋†’์ด๋ฅผ ์ฐจ์ง€ํ•˜์ง€๋งŒ **float์ด ๋˜์–ด๋ฒ„๋ฆฌ๋ฉด์„œ block ์š”์†Œ์˜ ์„ฑ์งˆ์ด ์—†์–ด์ ธ๋ฒ„๋ ค width :100%๋ฅผ ์ถ”๊ฐ€ํ•ด์ค˜์•ผํ•œ๋‹ค.

*๐Ÿ’กconclusion

  • ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ด€๋ จ๋œ CSS ํ”„๋กœํผํ‹ฐ Position์˜ ๊ฐ’์˜ ์ข…๋ฅ˜ 1>relative, 2>absolute, 3>fixed์˜ ๊ฐ๊ฐ์˜ ํŠน์ง•(1>์ž๊ธฐ ์ž์‹  ๊ธฐ์ค€์œผ๋กœ ์ด๋™, 2> ๋ถ€๋ชจ(positon ๊ฐ’์ด ์œ„ ์„ธ๊ฐ€์ง€ ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋ฉด
    )๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ 3>๋ทฐํฌํŠธ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ ์ •)๊ณผ ์‚ฌ์šฉ ๋ฐฉ์‹(ํ”„๋กœํผํ‹ฐ์ธ top,bottom,left,right์— ๊ฐ’์„ ์ง€์ •ํ•œ ๋งŒํผ ์œ„์น˜๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ณ ,top์—์„œ -๊ฐ’์ด ์œ„๋กœ ์ด๋™ํ•˜๋Š” ๊ฒƒ ์ฃผ์˜)
  • inline, block์˜ ์ฐจ์ด์™€ css์˜ display, float ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด inline-block ํ˜•ํƒœ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ๊นŒ์ง€
  • float๋Š” ์ด๋ฏธ์ง€ ์ฃผ๋ณ€์„ ํ…์ŠคํŠธ๋กœ ๊ฐ์‹ธ๊ธฐ ์œ„ํ•œ ํ”„๋กœํผํ‹ฐ๋กœ ์‚ฌ์šฉํ•˜๋ฉฐ ์š”์†Œ์˜ ๋ถ€๋ชจ์˜ ๋†’์ด์ธ์ง€ ๋ชปํ•˜์—ฌ ๋ถ€๋ชจ๋ฅผ ๋ฒ—์–ด๋‚ฌ์„ ๋• ๋ณดํ†ต overflow:hidden์œผ๋กœ ํ•ด๊ฒฐํ•œ๋‹ค!
                                                                   

#๐Ÿ“‘Study Source

  • WeCode replit ์†Œ์ค‘ํ•œ ๊ฐ•์˜ ๋‚ด์šฉ ์ค‘:]
profile
์ž๊ธฐ ์‹ ๋ขฐ์˜ ํž˜์„ ๋ฏฟ๊ณ  ์‹ค์ฒœํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ ์žํ•ฉ๋‹ˆ๋‹ค.

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