๐ ๊ฐ๋ฐ ๊ณต๋ถ 1๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต ๋ธ๋ก๊ทธ๐๏พ Aug 2 ~ 6, 2021
Assignment #2
์ง๋ฌธ๊ณผ ๋ต๋ณ intro
Q. 1~3๋ฒ์ ๋ํ ๋ด์ฉ์ ์ ๋ฆฌํด๋ณด์.
- position์ ์์ฑ (relative, absolute, fixed) ์ ๋ํด์
- inline, inline-block, block ์ ๋ํด์
- float์ ๋ํด์
A. HTML์ semantic element์ ์ด์ด ๋ ๋ฒ์งธ๋ก ์ ๋ฆฌํด์ผ ํ๋ ๋ด์ฉ์ CSS์ layout.
๏พ ๏พ HTML์ด web site์ ๋ค์ด๊ฐ๋ ๋ด์ฉ๊ณผ ๋๋ต์ ์ธ ๊ตฌ์กฐ๋ผ๊ณ ํ์ ๋, ์ด ๋ด์ฉ์ ์ ์ ํ๊ฒ ๋ฐฐ์นํ๊ฒ ํด์ฃผ๋ ๊ฒ์ด CSS์ด๋ฉฐ, ๊ทธ ๊ณจ์๊ฐ layout์ด๋ค.
๏พ ๏พ ์ด๋ ๊ฒ ๋ด์ฉ์ ๋ด์ ์ผ์ข
์ ๊ณต๊ฐ์ web ์์ ๋ง์น ์ขํ์ฒ๋ผ ์์น์์ผ์ผ ํ๋๋ฐ, ๊ทธ ์์ฑ๊ณผ ๋ฐฉ๋ฒ์ด ๋ด๊ฐ ํ์ตํด์ผ ํ๋ ๋ด์ฉ์ด๋ค.
layout
web page์ layout์ ์ด๋ค ์ ๋ณด๋ฅผ page ์ด๋์ ๋ฐฐ์นํ๋๋์ ๊ดํ ๋ฌธ์ ์ด๋ค.
์๋ง์ ๋ฌธ์์์ ๊ณตํต์ ์ผ๋ก 'CSS์ layout์ ๊ฒฝํ์ ํตํด ๋ฐฐ์ฐ๋ ๊ฒ์ด๋ค.'๋ผ๊ณ ํ ์ ๋๋ก layout ์ค๊ณ์ ๊ณต์์ด๋ ์ ๋ต์ด ์๋ค๊ณ ํ๋ค.
position
- static : position์ default ๊ฐ์ด์ด์ ๋ฐ๋ก ์ ์ด์ฃผ์ง ์์๋ static ์ํ์
- relative : ์ฎ๊ธฐ๊ธฐ ์ ์ ์์น์ ๋น๊ตํ ๊ฐ์ผ๋ก์ ์ขํ๋ก ์๋ฅผ ๋ค๋ฉด ์ด์ ์์น๊ฐ (1, 1)์ธ ๊ณณ์์ (4, 3)๋งํผ ์ด๋ํ๋ฉด ํ์ฌ ์์น๊ฐ (5, 4)์ด์ง๋ง (5, 5)์์ (4, 3)๋งํผ ์ด๋ํ๋ฉด ํ์ฌ ์์น๊ฐ (9, 8)์ธ ๊ฒ์ ๋น์ ํ ์ ์์
- absolute : view port์ ์๋์ ์ผ๋ก ์์น๊ฐ ์ง์ ๋๋ ๊ฒ ์๋๋ผ ๊ฐ์ฅ ๊ฐ๊น์ด ๊ณณ์ ์์นํ ๋ถ๋ชจ(์กฐ์) element์ ์๋์ ์ผ๋ก ์์น๊ฐ ์ง์ ๋จ (์ฃผ๋ก ๋ถ๋ชจ์ relative๋ฅผ ๋ถ์ฌํจ)
๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ
๋ถ๋ชจ tag๊ฐ ๋ฐ๋ก ์์ผ๋ฉด ๋ถ๋ชจ tag์ ๊ณต๊ฐ ๋ด์์๋ง ์ด๋ํ๋ฉฐ, ๋ถ๋ชจ tag๊ฐ ์์ผ๋ฉด body tag ์์์ ์ด๋ํจ
๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ
์๋ฅผ ๋ค์ด ```position: absolute; right: 0```
์ผ๋ก ์ค์ ํ ๋, ๋ถ๋ชจ tag์ ๊ณต๊ฐ์ด ์๋ค๋ฉด ๊ทธ size ๋ด์์ ๊ฐ์ฅ ์ค๋ฅธ์ชฝ์ ์์นํ ๊ฒ์ด๊ณ , ๋ถ๋ชจ tag๊ฐ ์๋ค๋ฉด body tag์ ๋งจ ์ค๋ฅธ์ชฝ, ์ฆ site์ ๊ฐ์ฅ ์ค๋ฅธ์ชฝ์ ์์นํจ
๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๏พ absolute ๊ฐ์ ๊ฐ์ง๋ฉด ๋ด์ฉ์ ํฌ๊ธฐ๋งํผ๋ง ๊ฐ๋ก ํฌ๊ธฐ๊ฐ ๋จ
- fixed : ์ฎ๊ธฐ๊ธฐ ์ ์ ์์น๋ ๋ถ๋ชจ tag์ ๊ด๊ณ ์์ด web site ํ๋ฉด์ ๊ธฐ์ค์ผ๋ก ์๋ฆฌ๋ฅผ ์ก๋๋ฐ, ๋ค๋ฅธ tag์ ๋ฌ๋ฆฌ mouse๋ฅผ scrollํด๋ ๋์ผํ ์๋ฆฌ๋ฅผ ์ ์งํ๋ค.
- (+) ์์น๋ฅผ ์ด๋์ํฌ ๋ top, right, bottom, left๋ฅผ ์ฐ๋ฉด ํธํ๋ฐ, ์ด๋ค ๊ฐ์ position์ด๋ผ๋ property๊ฐ ์์ด์ผ ์ฌ์ฉ ๊ฐ๋ฅ
image
display
display property๋ flex, grid ๋ฑ์ ๊ฐ์ ์ทจํจ
- inline-block : ๋ด์ฉ์ ๊ตญํ๋ ๊ณต๊ฐ (์ธ ๋ฒ clickํ๋ฉด ๊ทธ ๊ณต๊ฐ์ dragํ ๊ฒ์ฒ๋ผ ์ด ๋ด์ฉ๋ง block๋จ)
- block : ๋ด์ฉ์ ํฌํจํ ํ ํ ์ ์ฒด ๊ณต๊ฐ (์ธ ๋ฒ clickํ๋ฉด ํ ์ ์ฒด๋ฅผ dragํ ๊ฒ์ฒ๋ผ ํ ์ ์ฒด๊ฐ block๋จ)
- float : inline-block ์ฑ์ง์ ๊ฐ๋๋ก ํ๋ property ์ค ํ๋๋ก, image๊ฐ์ container๊ฐ ์์ ๋ ๋๋จธ์ง ๋ด์ฉ์ ์ด๋ป๊ฒ ๋ฐฐ์นํ ๊ฒ์ธ์ง ๊ฒฐ์ ํ ์ ์๋ ์์ฑ
๏พ ๏พ ๏พ ๏พ ๏พ ๏พ ๋๋ฌด ๋ถํธํด์ ์ด์ ๋ flex๋ก layout์ ์ก๋๋ค๋๋ฐ, ๋๋ ๊ฐ๋
๋ ๋ ์กํ์๊ณ ์ ๋๋ก ์จ๋ณธ ์ ๋ ์์ด์ ๋ญ๊ฐ ๋ถํธํ์ง์กฐ์ฐจ ๊ฐ์ด ์ ์กํ์ง ์์ (๊ทธ๋ผ์๋ ๋ถ๊ตฌํ๊ณ flex์ ๊ฐํธํจ์ ๋๋ก์๋ ์ ์ธ๊ณ...!)
- (+) ```display: none;```์ด๋ผ๋ ๊ฐ์ ์ฃผ๋ฉด ํ๋ฉด์์ ๋ณด์ด์ง ์๊ณ (ํ๋ฉด์์ ์์ ์๋ ๊ฒ์ฒ๋ผ ๋ณด์), ```visibility: hidden;```์ ํ๋ฉด์ ๋ณด์ด์ง ์์ง๋ง ๊ณต๊ฐ์ ์ฐจ์งํ๋ ํน์ง์ด ์๋๋ฐ, ์ด๋ฌํ ๊ฐ์ JavaScript๋ฅผ ํตํด interactiveํ ํ๋ฉด์ ๊ตฌํํ ๋ ์ฐ์ด๊ณ ๋ ํจ ex. ๋ค์ด๋ฒ ๊ฒ์์ฐฝ
MDN - Layout
Learn CSS Layout
box model ์ค๋ช
์๋ฃ
๐ the source of this content
ZeroCho TV
WeCode