๐ ์ ๊ฒ์์ฐฝ์ ๋ง๋ค๊ธฐ๊น์ง ์ ๋ง ์ค๋ ์๊ฐ์ด ๊ฑธ๋ ธ๋ค ๐ฅน
๊ทธ ๊ณผ์ ์ ๊ธฐ๋กํ ๋ธ๋ก๊ทธ
html ๋ธ๋ก ๊ฒฐ์ ํ๊ธฐ
1. weelgle ์ด๋ฏธ์ง
2. input ์ฐฝ๊ณผ 3๊ฐ์ ์์ด์ฝ
3. 2๊ฐ button
4. <p>ํ๊ทธ
์ด๋ ๊ฒ 4๊ฐ๋ก ํฌ๊ฒ ๋ธ๋ก ์ค์ ์ ํ๋ค.
css๋ฅผ ์ต๋ํ ๊ฐ๋จํ ํ๊ธฐ ์ํด ๋ชจ๋ div class๋ก ๋ฌถ์๋ค.
html
โป 2๋ฒ ๋ฌถ์ class things ๋ฅผ ๋ณด๋ฉด [๋๋ณด๊ธฐ-input๋ฐ์ค-๋ง์ดํฌ-ํค๋ณด๋] ์์ผ๋ก ๋ฃ์๋๋ฐ ์ด๋ flex ๊ฐ์ ์ฃผ์์ ๋ css ์ง์ ํ๊ธฐ ํธํ๊ฒ ํ๊ธฐ ์ํจ์ด๋ค. ์ต๋ํ ์์น์ ๊ฐ๊น๊ฒ ๋ฃ์ด์ฃผ์๋ค. ( ๋๋ณด๊ธฐ๊ฐ ๋งจ ์ผ์ชฝ์ ์์นํด ์์)
body ์์ ์๋ div ํ๊ทธ๋ค (4๋ฌถ์)๋ค์๊ฒ ํ๊บผ๋ฒ์ ์ค์ ์ ์ฃผ๊ธฐ ์ํด ์ ์ฒด๋ฅผ ๊ฐ์ธ๋ <div class = "total"> ๋ฅผ ์ฃผ์๋ค.
๊ตณ์ด body๋ฅผ ์ฐ์ง ์๋ ์ด์ ๋ body๋ณด๋ค ๋์ฑ ์์ ๋กญ๊ฒ css๋ฅผ ์ธ ์ ์๊ธฐ ๋๋ฌธ ๐
๐ ์์ html ๋ง ์ค์ ํ์ ๋ ๋ชจ์ต
Weegle ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ์ปค์ ์๋ฆฐ๋ค
css
ํฐ ๊ณ ๋์ ์ฃผ์๋ css ๐ฉ
์ผ๋จ ์ ์ฒด box-sizing ์ ์ฃผ์๋ค.
์ ์ฒด 4๊ฐ์ block์ total๋ก ๊ฐ์ผ ํ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํด์ฃผ์๊ณ ํน์ดํ ์ ์ height์ 100vh๋ก ์ฃผ์๋๋ฐ ์ด๋ ๊ฒ ํ๋ ๋ธ๋ก ์์ ์๋ ํด๋์ค๋ค ์์น๊ฐ ํฌ๊ฒ ํ์ง ์๊ณ ๋์คํ๋ ์ด ํฌ๊ธฐ ์๊ด ์์ด ์ค๊ฐ์ ์ฝ๊ฒ ๋ฐฐ์น๋์ด ํธํ๋ค.
์ด๋ฏธ์ง๋ฅผ ๊ฐ์ธ๋ .weggle ํด๋์ค์ absolute๋ฅผ ์ฃผ์ด ์์น๋ฅผ ์ง์ ํ๋ค. ์ผ๋จ top, left๋ก ์ค๋ฅธ์ชฝ ์๋์ ๋ฐ์ด๋ฃ์ ๋ค์ transform์ ์จ์ -50% ๊ฐ์ ์ฃผ์๋๋ฐ ์๋์ฐ ์ฐฝ ๊ฐ์ด ์๋ ์ค๋ฅธ์ชฝ ์๋ ์์น ๊ฐ์ 50%๋ฅผ -๋ก ์ฎ๊ฒผ๋๋ ์ด๋ฏธ์ง๊ฐ ์ค์์ ๊ฐ๊ฒ ๋์๋ค. ํ์ img ์ ๋ฐ๋ก css๋ฅผ ์ฃผ์ด ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ค.
๊ฐ์ฅ ์ ๋จน์๋ input๊ณผ ์์ด์ฝ๋ค! ์ฒ์์ ์๋ํ์ ๋ input์ ๋๋ ค (relative๋ฅผ ์ฃผ๊ณ ) ์์ด์ฝ (absolute๋ฅผ ์ฃผ๊ณ ) ํ๋ํ๋ ์์น๊ฐ์ ์ฃผ์๋๋ฐ ๋ญ๊ฐ... ๋ถ์์ ํ ๋ฏํ ๋๋์ ๋ฐ์๋ค. ๋์ง๋์ง ๋ถ์ด์๋ css ํ๊ทธ๋ค๊ณผ... ์ด๋๊ฐ ๋ถํธํ๊ฒ ์ ๋ ฌ๋์ด ์๋ ์์ด์ฝ๋ค... ๐ค
๊ทธ๋ฆฌ๊ณ ํด๋ต์ ์ฐพ์๋๋ฐ ๋ฐ๋ก .thing (input ๊ณผ ์์ด์ฝ๋ค ๋ฌถ์ div)์๊ฒ ํ ๋๋ฆฌ๋ฅผ ์ฃผ๊ณ ์์ด์ฝ๋ค๊ณผ input์ ๊ฐ๋ก ์ ๋ ฌํ๋ ๊ฒ์ด์๋ค.
์ด๋ ๊ฒํ๋ฉด ๊ฒ์์ฐฝ ์์ ์์ด์ฝ๋ค ์์น ์ก๊ธฐ๋ ํธํ๊ณ input๋ ์์๊ฒ ๋ค์ด๊ฐ๋ค. ์ด ์์ ์ flex:1, flex:7์ ์ฃผ์ด์ ๊น๋ํ๊ฒ ํด๊ฒฐํ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ฒํผ๊ณผ sentence๋ ์์ํ๊ฒ ํด๊ฒฐํ๋๋ฐ ๊ธฐ๋ณธ button์ ๋ํดํธ ๊ฐ์ ์ง์ฐ๊ณ ์ผํฐ๋ก ์ฎ๊ธด ํ margin ์ค์ ์ ํด์ฃผ์๋ค.
์์ฑ!
๋ง์น๋ฉฐ
css ์ absolute์ relative์ ๊ฝํ์ ์ฝ๊ฒ ๋ง๋ค ์ ์๋ ๋ฐฉ๋ฒ์ ์๊ฐ ๋ชปํ๋ ๊ฑฐ ๊ฐ์ ๋ง์ด ์์ฝ๋ค. ํ๊ทธ์ ๊ฝํ ํ๋๋ง ํ๊ธฐ๋ณด๋จ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๋ง๋ค ์ ์๋ ๋ฐฉ๋ฒ์ ์ฐพ๋ ์์ธ๊ฐ ํ์ํ๋ค ๋๊ผ๋ค. ๋ ์คํ ๋๋ฌธ์ 2์๊ฐ์ ํ๋นํ๋๋ฐ๐ ์คํ ๊ฒ์๋ ์ ๋ด์ผํ ๋ฏ ํ๋ค.
'TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
js ๋ณ์ ์ข ๋ฅ์ TDZ, hoisting (0) | 2022.07.21 |
---|---|
js string (0) | 2022.07.21 |
js์์์ Scope (0) | 2022.07.20 |
semantic web๊ณผ semantic tag (0) | 2022.07.20 |
css position ์์ฑ๊ณผ inline, inline-block, block (0) | 2022.07.20 |
๋๊ธ