# Session 1_4. Layout

minj9_6ยท2021๋ 8์ 20์ผ
1

## TIL, WeCode, Courseย

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

### *๐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 ์์คํ ๊ฐ์ ๋ด์ฉ ์ค:]
์๊ธฐ ์ ๋ขฐ์ ํ์ ๋ฏฟ๊ณ  ์ค์ฒํ๋ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ํฉ๋๋ค.