์ ์ฒด ๊ธ (17) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [CSS] ์๋จ๋ฐ / ํ๋จ๋ฐ ํ๋ฉด์ ๊ณ ์ ์ํค๊ธฐ ํ๋ฉด ์๋จ์ ํค๋ ๊ณ ์ ์ํค๊ธฐposition: fixed ๋ก ๊ณ ์ ์ํค๊ธฐํค๋๋ฅผ ๊ณ ์ ์ํฌ ์์น ์ง์ ํ๊ธฐ - ์) top: 0ํค๋ ์์ญ์ด ํ๋ฉด์ ๊ฐ๋ก๋ก ๊ฝ ์ฐจ๊ฒ ํ๊ธฐ ์ํด width: 100% ์ ์ฉ** width: 100% ์ ์ํ๋๋ ์๋จ๋ฐ ์์ ๋ด์ฉ๋ฌผ๋ค์ด ์ด์ํ ์์น๋ก ์ด๋ํ๊ณ ๊ทธ๋์ ํด๊ฒฐํ๋ ค๊ณ ํ์ฐธ์ ํด๋งธ๋ค.์๋จ๋ฐ๊ฐ ํ๋ฉด์ ๊ฝ ์ฐจ๊ฒ ํ๋ ค๋ฉด ๊ผญ width: 100% ์ฃผ๊ธฐ!! ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 9์ผ์ฐจ #6.10 Navigation Bar part Onenavigation bar๋ ๋ณดํต ๋ด๋ถ์ ul, ๋ ๊ทธ ์์ ๋ง์ li๋ค๋ก ๊ตฌ์ฑ๋์ด ์๊ณ ๊ฐ li๋ค์ ๋งํฌ๋ฅผ ํฌํจํ๋ค. ๊ฒ์์์ง ๊ตฌ๊ธ๋ navigation์ ์ฐพ์์ ul์ li์์ ์๋ ๋งํฌ๋ค์ ๊ฐ์ ธ์ค๊ฒ๋ ๋ง๋ค์ด์ ธ ์๋ค. >> VSC์ ๋จ์ถํค๋ก navigation์ ํ์ ์์๊น์ง ํ๋ฒ์ ์๋ ์์ฑ ์ํฌ ์ ์๋ค.nav>ul>li*4 : nav ์์ ul ์์ li๊ฐ 4๊ฐ #6.11 Navigation Bar part Two์ด๋ค ์์๋ฅผ ํญ์ ๊ฐ์ ์์น์ ๊ณ ์ ์ํค๋ ค๋ฉด : position: fixed;ํ๋จ๋ฐ์ ์์น๋ฅผ ๊ณ ์ ์์ผฐ๋๋ ์ด๋ ๊ฒ ๋ง์ง๋ง ์์ด์ฝ์ด ์ฌ๋ผ์ก๋ค. ์ด๋ด ๋ ์ฌ์ฉํ๋ ๋ง๋ฒ์ ๋ฌธ์ฅ!box-sizing: border-box; → ์์ด์ฝ๋ค์ด ํ ์ค์.. ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 8์ผ์ฐจ #6.6 Sign Up Screen part Three- ๋ด๊ฐ ์ค์ ํ์ง ์์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฉํ๋ margin → ๋ฆฌ์ CSS์ ์ด์ฉํด ์์จ ์ ์๋ค. ๋ฆฌ์ CSS : ๋๋ถ๋ถ์ ํ๊ทธ์ margin:0, padding:0, border:0 ๋ฑ์ ๊ฐ์ง css ํ์ผ - ์ํ๋ฐ๋ ๋ชจ๋ ํ๋ฉด์ ์กด์ฌํ๋ฏ๋ก status-bar.css ํ์ผ์ ๋ฐ๋ก ๋ถ๋ฆฌํ์ฌ ์ ์ฅํ๋ ๊ฒ์ด ์ข๋ค. #6.8 Log In Form part Two- not() : ๋ญ๊ฐ๊ฐ ์ ์ฉ๋๋ ๊ฑธ ์ํ์ง ์์ ๋ ์ฌ์ฉํ๋ ์์ฑ. "์ด ๊ฒ์ ์ ์ธํ ๋๋จธ์ง์ ์ ์ฉํ๊ณ ์ถ์ด์" - color: inherit → ๋ถ๋ชจ๋ก๋ถํฐ ์์์ ๋ฌผ๋ ค๋ฐ์ #6.9 Recap and Formsform์ ๋๊ฐ์ง ์์ฑ - action, method - action : ์ด๋ค .. ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 7์ผ์ฐจ #6 Cloning Time.DS_Store๋ ๋งฅos๋ ์๋์ฐ์์ ๋ง๋ ๋ณด์ด์ง ์๋ ์์ํ์ผ์ด๋ค..gitignore๋ ๋ฌด์ํ๊ณ ์ถ์ ํ์ผ ์ด๋ฆ์ ๊ธฐ๋กํ๋ ํ์ผ์ด๋ค. .gitignore์ .DS_Store์ ์ฐ๋ฉด git์์ ๋ณด์ด์ง ์๋๋ค. ๋๋ถ๋ถ์ ์น ์๋ฒ๊ฐ ๋ํดํธ๋ก index.html์ ๊ฐ์ฅ ๋จผ์ ์ฐพ์๋ณด๋๋ก ์ค์ ๋์ด ์๋ค. vsc์์ ! ๋ง ์ณ๋ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๊ฐ ์์ฑ๋๋๋ก ๋จ์ถํค๊ฐ ์ค์ ๋์ด ์๋ค. ๋๋ฌด ํํ ์ด๋ฆ์ ํท๊ฐ๋ฆฌ๊ธฐ ๋๋ฌธ์ ๊ธด ์ด๋ฆ์ ์ ์ด์ฃผ๋ ๊ฒ์ด ์ข๋ค. ๋์ค์ ์์๋ณด๊ธฐ ์ฝ๊ฒ '๋ถ๋ชจ์์__์์์์' ๋ผ ์ด๋ฆ ์ง๋๋ค. #6.2 BEMBEM (Block Element Modifier): ์ข ๋ ์ฝ๊ฒ ์ฝํ๋ CSS๋ฅผ ๊ฐ์ง๋๋ก ํ๋ ๊ท์น(์ฅ์ ) - ์์ค์ฝ๋๋ฅผ ๋ ์ฝ๊ฒ ์์๋ณด๊ณ ์ฌ์ฉํ ์ ์์ .. ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 6์ผ์ฐจ #5.0 What is Git์ฝ๋๊ฐ ๊ธด ๊ฒฝ์ฐ์๋ ํ์ผ์ ํ์คํ ๋ฆฌ๋ฅผ ์๊ณ ์์ด์ผ ํ๋ค. ์ฒ์์ ๋ญ ์์ฑํ๋์ง, ๋์ค์ ๋ญ ์ถ๊ฐํ๋์ง, ๋ณ๊ฒฝ ๋ด์ญ ๋ฑ์ ์๊ณ ์์ด์ผ ํ๋๋ฐ ์ด๋ด ๋ git์ ์ฌ์ฉํ๋ค.- git์ ํ ์คํธ ํ์ผ๋ฟ๋ง ์๋๋ผ excel, image, song ๋ฑ๋ฑ ๋ค๋ฅธ ํ์ผ ํ์์๋ ์ฌ์ฉํ ์ ์๋ค. (git์ ํ์ผ์ binary format์ผ๋ก ์ธ์ํ๊ธฐ ๋๋ฌธ์ด๋ค.)- git์ ์ด๋ค ํ์ผ์ด๋ ์์ ๋ ๋ด์ญ์ ์ ์ ์๋ค.์ฆ, git์ ํ์ผ์ ๊ณ์ ์ถ์ ํ๋ ๊ฒ์ด๋ค. github์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ณ๊ฒฝ๋ด์ญ์ ์ ๋ก๋ํ๋ค.git ≠ github git์ ํ์ผ์ ๋ณ๊ฒฝ๋ด์ญ์ ๊ณ์ํด์ ์ถ์ ํด์ฃผ๋ version control system์ด๊ณ , github๋ ํ์ผ ๋ด์ญ๊ณผ ํ์ผ๋ค์ ์ฌ๋ ค์ฃผ๋ ๊ณต๊ฐ์ด๋ค. #5.1 What .. ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 5์ผ์ฐจ #4.0 - 4.1Transitions4์ฅ์์๋ ๊ณ ๊ธ CSS๋ฅผ ๋ฐฐ์ธ ๊ฒ์ด๋ค. animation, transition, transformation ๋ฑ Transition : ์ด๋ค ์ํ์์ ๋ค๋ฅธ ์ํ๋ก์ "๋ณํ"๋ฅผ ์ ๋๋ฉ์ด์ ์ผ๋ก ๋ง๋๋ ๋ฐฉ๋ฒ* transition ์์ฑ์ state๊ฐ ์๋ ์์์ ๋ถ์ฌ์ผ ํ๋ค. → ์ ๋๋ฉ์ด์ ์ ์ฃผ๊ณ ์ถ์ ์์๊ฐ state์ ์์ด์ผ ๋ณํ๊ฐ ์๊ธด๋ค. ease-in function : ๋ธ๋ผ์ฐ์ ์๊ฒ ์ ๋๋ฉ์ด์ ์ด ์ด๋ป๊ฒ ๋ณํํ๋์ง ๋งํด์ฃผ๋ ๊ฒ- linear : ์์๋ถํฐ ๋๊น์ง ์ผ์ ํ ์๋- ease-in : ์์๊ณผ ๋์ด ๋น ๋ฆ- ease-out : ์์๊ณผ ๋์ด ๋๋ฆผ- ease-in-out : ์์์ด ๋น ๋ฅด๊ณ ๋์ด ๋๋ฆผ https://matthewlein.com/tools/ceaser Cea.. ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 4์ผ์ฐจ #3.8 Classes #3.9 Inline Block #3.10 Flexbox Part Oneflexbox: box๋ฅผ ์ด๋๋ ์์ ๋กญ๊ฒ ๋ ์ ์๋ค.์ฐฝ ํฌ๊ธฐ์ ๋ฐ๋ผ ์๋์ ์ผ๋ก content์ ํฌ๊ธฐ๊ฐ ๋ณํ๋ค. >>flexbox๋ฅผ ์ฌ์ฉํ ๋ ์ง์ผ์ผํ 3๊ฐ์ง ๊ท์น1. ์์์๊ฒ๋ ๋ช ์ํ์ง ์๊ณ ๋ถ๋ชจ์๊ฒ ๋ช ์ํ์ฌ flex container๋ก ๋ง๋ ๋ค. = ์์๋ค์ ์์ง์ด๋ ค๋ฉด ๋ถ๋ชจ์๊ฒ๋ง ๋งํ๋ฉด ๋๋ค. display: flex; 2. ์ฃผ์ถ(main axis)๊ณผ ๊ต์ฐจ์ถ(cross axis)flex container๋ ๋ ๊ฐ์ ์ถ์ ๊ฐ๋๋ค.*์ฃผ์ถ์ ๊ธฐ๋ณธ๊ฐ์ด ์ํ, ๊ต์ฐจ์ถ์ ์์ง์ผ๋ก ์ค์ ๋์ด ์๋ค.justify-content๋ ์ฃผ์ถ์ ๋ฐ๋ผ ์์ง์ธ๋ค.align-items๋ ๊ต์ฐจ์ถ์ ๋ฐ ์์ง์ธ๋ค. ex) body๊ฐ heig.. ๋ ธ๋ง๋์ฝ๋ ์ฝ์ฝ์ํก ํด๋ก ์ฝ๋ฉ 3์ผ์ฐจ #3.0 How to Add CSS to HTML1. ๊ฐ์ html ํ์ผ์ html ์ฝ๋์ css ์ฝ๋๋ฅผ ๋๋ ๋ฐฉ๋ฒ : ์์์ #3.2 What Does Cascading MeanCSS = Cascading Style Sheet ; ๋ธ๋ผ์ฐ์ ๊ฐ css์ฝ๋๋ฅผ ์ฝ์ ๋ ์์ ์๋ ์ฝ๋๋ถํฐ ์ฐจ๋ก๋๋ก ์ฝ๋๋ค.->๊ฐ์ ๋์์ ๊ฐ๋ฆฌํค๋ ์ฝ๋๊ฐ ์ฌ๋ฌ๊ฐ ์๋ค๋ฉด ๊ฐ์ฅ ๋ง์ง๋ง์ ๋์ค๋ ์ฝ๋๊ฐ ์ ์ฉ๋๋ค. #3.3 Blocks and Inlines์์์ ๋ฐฐ์ ๋ box ์ฑ์ง (div ๋ฑ..)์ ์์ ์๋ฌด๊ฒ๋ ์ฌ ์ ์๋ค.ํ์ง๋ง box๊ฐ ์๋ ๊ฒ๋ค์ ์์ ๋ค๋ฅธ ๊ฒ์ด ์ฌ ์ ์๋ค. >>์์ ๋ค๋ฅธ ์์๊ฐ ๋ชป ์ค๋ ๊ฒ์ block์ด๋ผ ํ๊ณ ๋ค๋ฅธ ์์๊ฐ ์ฌ ์ ์๋ ๊ฒ์ inline์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.์์ฃผ ์์ ๊ธ์ด๋ ๋งํฌ, ๊ทธ๋ฆผ ๋ฑ๋ฑ์ด i.. ์ด์ 1 2 3 ๋ค์