[HTML]div 6๊ฐ ๋ง๋ค์ด์ฃผ๊ณ container๋ก ๊ฐ์๋ค. 1 2 3 4 5 6 [CSS]html, bodyhtml,body { margin: 0; padding: 0; box-sizing: border-box; height: 100dvh; width: 100%;} ํ์ด์ง์ ๊ธฐ๋ณธ ์ฌ๋ฐฑ, ํจ๋ฉ ์ ๊ฑฐ, html๊ณผ body์ ํฌ๊ธฐ๋ฅผ ๋ธ๋ผ์ฐ์ ์ฐฝ์ 100% ๋๋น์ 100dvh ๋์ด๋ก ์ค์ . box-sizing: border-box;์ผ๋ก ์ฝํ
์ธ ํฌ๊ธฐ์ ํจ๋ฉ, ํ
๋๋ฆฌ๋ฅผ ํฉ์ณ์ ๊ณ์ฐ `box-sizing`์ ์์ฑ์ ์์์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ๋ค. `content-box` (๊ธฐ๋ณธ๊ฐ)๋ width์ height๊ฐ ์์์ ์ฝํ
์ธ ์์ญ ํฌ๊ธฐ๋ง์ ..
[์๋ฐ์คํฌ๋ฆฝํธ] html/css/js๋ก ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ ์ 1ํ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ๋จํ๊ฒ ๊ณ์ฐ๊ธฐ ๋ง๋ค์ด ๋ณด๊ธฐ ใ
ใ
ใ
๊นํ๋ธ์ ์ฌ๋ ค์ผ ํ๋๋ฐ ๊นํ๋ธ ํ ๋ฒ ์ ๋ฆฌํ๊ณ ์๋ด์ผ ๋์ ๊ทธ๋ฅ ๋ธ๋ก๊ทธ์ ์ฌ๋ฆฐ๋ค.๋์ค์ ์ ์ฒด ์์ค๋ง ๊นํ๋ธ๋ก ๋ณด๋ด๊ธฐ 1. ๋ฒํผ 16๊ฐ ๋งawesomepossum.tistory.com ์ฌ๊ธฐ์ ์์ ์ข ๋๊ฒ ์ต๋๋ค ใ
ใ
ใ
๊ธฐ๋ฅ ์ถ๊ฐ๋ ๊ณ์ฐ๊ธฐ ์์ ์ถ๊ฐ 1. ์ซ์ ์ง์ธ ์ ์๋ backspace ๋ฒํผ2. ๊ทธ๋ฆฌ๊ณ ๋ค์ค ๊ณ์ฐ์ ์ํด ์ซ์์ ์ฐ์ฐ์ ์
๋ ฅ์ ์ด์ด์ ๋ฐ์ ์ ์๋๋ก ๋ก์ง ๊ฐ์ .3. ๊ณ์ฐ๊ธฐ์ ์์ ์
ํ๊ธฐ 1. backspace ๊ธฐ๋ฅ ์ถ๊ฐ ๋ฒํผ์ ์ด๋๋ค ๋ฃ์๊น div ํ๊ทธ ํ ์ค ๋ ์จ์ ์ถ๊ฐํ ๊น ํ๋ค๊ฐ ๊ทธ๋ฅ ์ฒซ๋ฒ์งธ row์ ์ง์ด ๋ฃ์ด์ฃผ๊ธฐ๋ก ํจ... 7 8 9 + โ ์คํฌ๋ฆฝ..
๊นํ๋ธ์ ์ฌ๋ ค์ผ ํ๋๋ฐ ๊ท์ฐฎ์์ ์ผ๋จ ๋ธ๋ก๊ทธ์ ๋จผ์ ํฌ์คํ
1. ์์ 2. ๋ช ๋ช
์ด ์ฐธ๊ฐํ ์ง ์ ํ prompt3. ์ฐธ๊ฐ์ ์์ number4. ์ ์์ด ์ ์ฅํ ๋ณ์ word5. ์
๋ ฅํ ๋จ์ด๋ฅผ ์ ์ฅํ ๋ณ์ newWord input ์ด๋ฒคํธ๋ก ๋จ์ด ์
๋ ฅ -> ์
๋ ฅ ๋ฒํผ ํด๋ฆญ -> ์
๋ ฅ ๋จ์ด newWord์ ์ ์ฅ ํ๋จ1_์ ์์ด๊ฐ ๋น์ด ์๋๊ฐ?ํ๋จ2_์
๋ ฅํ ๋จ์ด๊ฐ ์ฌ๋ฐ๋ฅธ ๋จ์ด์ธ๊ฐ? (์ ๋จ์ด์ ๋ง์ง๋ง ๊ธ์๋ ์ผ์นํ๋๊ฐ)ํ๋จ1ํ๋จ2๊ฒฐ๊ณผ์ ์์ด๊ฐ ๋น์ด์์๋จ์ด๊ฐ ์ฌ๋ฐ๋ฅด๋ค์
๋ ฅํ ๋จ์ด๊ฐ ์ ์์ด์ ์์ด๊ฐ ๋น์ด์์๋จ์ด๊ฐ ์ฌ๋ฐ๋ฅด์ง ์๋ค์
๋ ฅํ ๋จ์ด๊ฐ ์ ์์ด์ ์์ด๊ฐ ๋น์ด์์ง ์์๋จ์ด๊ฐ ์ฌ๋ฐ๋ฅด๋ค์
๋ ฅํ ๋จ์ด๊ฐ ์ ์์ด์ ์์ด๊ฐ ๋น์ด์์ง ์์๋จ์ด๊ฐ ์ฌ๋ฐ๋ฅด์ง ์๋ค์ฌ๋ฐ๋ฅธ ๋จ์ด ์
๋ ฅํ๋ผ๊ณ ์๋ฆผ์ฐฝ ๋์ฐ๊ธฐ No -> alert('์ฌ๋ฐ๋ฅธ ๋จ์ด ์
๋ ฅ')Y..
ttps://www.tablesgenerator.com/html_tables HTML Tables generator โ TablesGenerator.comYou can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format โ it is usually available in the File menu under the name "Save As..." or "Exwww.tablesgenerator.comํ๋ก ํธ์๋ ๊ฐ๋ฐ ์์
ํ์๋ค๋ณด๋ฉด ํ
์ด๋ธ์ ๋ง๋ค์ด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ..
1. CSS ์ ํ์ ํ ๋์ ๋ณด๊ธฐ ์ ํ์์์์ค๋ช
ํ๊ทธ ์ ํ์h1ํ๊ทธ๋ก ์์๋ฅผ ์ ํ์ ์ฒด ์ ํ์* (์ ๋๋ฒ์
์ ํ์)๋ชจ๋ ์์๋ฅผ ์ ํdiv *ํน์ ์์์ ์์ ์์ ๋ชจ๋ ์ ํํด๋์ค ์ ํ์.slideํด๋์ค๋ช
์ผ๋ก ์์๋ฅผ ์ ํ์์ด๋ ์ ํ์#logo์์ด๋๋ช
์ผ๋ก ์์๋ฅผ ์ ํํ์ ์ ํ์.slide h2, .slide .btnํ์(์์) ์์๋ฅผ ์ ํ์์ ์ ํ์.slide > div์ ์ ํ์์ ๋ฐ๋ก ๋ฐ ์์ ์์ ์ ํ์ธ์ ํ์ ์ ํ์.banner + div์ ์ ํ์์ ํ์ ์์ ๋ฐ๋ก ๋ค์ ์์ ์ ํ.banner ~ div์ ์ ํ์์ ํ์ ์์ ์ค ๋ ๋ฒ์งธ ์์ ๋ชจ๋ ์ ํ๊ทธ๋ฃนํh1, h2color: red์ฝค๋ง๋ก ์ ํ์๋ฅผ ๋์ดํ์ฌ ์ ํ์์ฑ ์ ํ์a[target], a[target="_blank"]์์ฑ๋ช
๋๋ ์์ฑ๋ช
์ ๊ฐ์ผ๋ก ์์..
๋ฐ์ํ์ผ๋ก ์น๋์์ธ์ ํ๋ค๋ณด๋ฉด ๋์ด์ ๋์ด, ์ฌ์ด์ฆ ๋จ์์ ๋ํ ๊ณ ๋ฏผ์ ํ๊ฒ ๋๋ค. ๋ฐ์ํ์ ๊ณ ๋ คํ์ง ์๊ณ ๋์์ธ์ ํ ๋๋ px๋ฅผ ์ผ์ง๋ง, ์ ์ฐํ ํ์ด์ง๋ฅผ ๋์์ธ ๊ณ ๋ คํ๋ ๊ฒฝ์ฐ em, rem๋จ์๋ฅผ ์ฌ์ฉํด ์ฃผ๋ ๊ฒ์ด ์ข๋ค. px๋ ๊ฐ์ด ๊ณ ์ ๋์ด์๋ ์ ๋๋จ์em๊ณผ rem์ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ณํ๋ ์๋๋จ์ ์๋ ๋จ์๋ ๊ณ ์ ๋์ง ์๊ณ ์ด๋ค ๊ธฐ์ค์ ๋ฐ๋ผ ์ ๋์ ์ผ๋ก ๋ฐ๋๋ ๊ธธ์ด๋ฅผ ๋ํ๋ธ๋ค. ์) em, rem, %, vw, vh ๋ฑ ์ ๋ ๋จ์๋ ์ด๋ค ์ํฉ์์๋ ํญ์ ๊ณ ์ ๋ ๊ธธ์ด๋ฅผ ๋ํ๋ด๋ ๋จ์. ์น์์ ์ ๋ ๋จ์๋ px์ ์ ์ธํ๊ณ ๋ ์ ์ฐ์ด์ง ์์.์น์ ๋๋ฐ์ด์ค๋ ์ฌ์ฉ์ ํ๊ฒฝ์ ๋ฐ๋ผ ์ปจํ
์ธ ํฌ๊ธฐ๊ฐ ์ ๋์ ์ผ๋ก ๋ณํจ. ๋ฐ๋ผ์ ์ ๋ ๋จ์๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝํ
์ธ ์ ์ ์ฐ์ฑ์ด ์ ํ๋จ. 1. CSS ํฌ๊ธฐ์ ๋จ์ ์ข
๋ฅ๊ตฌ๋ถ์ค๋ช
์์pxํฌ..
VS Code์๋ ์ฝ์ด๋ฅผ ์ด์ฉํด์ ์ฝ๋๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํ ์ ์๋ ๊ธฐ๋ฅ์ด ๋ด์ฅ๋์ด ์์ด์. ์ฝ์ด ์ฌ์ฉ๋ฒ์ ๊ฐ์ด ์ตํ๋ณผ๊น์? ์ฝ์ด ์
๋ ฅ ํ Tabํค๋ Enterํค๋ฅผ ๋๋ฅด๋ฉด ํ๊ทธ๊ฐ ์๋์ผ๋ก ์์ฑ๋ผ์. HTML ์ฝ์ด โ
ํ๊ทธ ์์ฑํ๊ธฐํ๊ทธ ์ด๋ฆ์ ์
๋ ฅํ ํ Tabํค ๋๋ฅด๋ฉด ์ข์ฐ ์
๋ ฅํ์ง ์๊ณ ๋น ๋ฅด๊ฒ ์ฝ๋ ์์ฑ ๊ฐ๋ฅ์ฝ์ด์์ฑ๋ ํ๊ทธheader โ
์์ด๋๋ช
, ํด๋์ค๋ช
์์ฑ#(์ต)์ ์์ด๋๋ฅผ ์๋ฏธdiv#์์ด๋๋ช
์ฝ์ด์์ฑ๋ ํ๊ทธdiv#container โ
์์์์์ ํจ๊ป ์์ฑ.(์ )์ ํด๋์ค๋ช
์๋ฏธ>๋ ์์์์ ์๋ฏธ์ค๊ดํธ { } ์์๋ ํ๊ทธ ์์ ์์ฑ๋ ๋ด์ฉ(Content) ์
๋ ฅ ์ฝ์ด์์ฑ๋ ํ๊ทธdiv.logo > a {logo}logo โ
ํ์ ์์ ์์ฑ+๋ ํ์ ์์ ์์ฑ์ฝ์ด์์ฑ๋ ํ๊ทธp+pdiv.item+div.item..
โจ์ฌ์ง์ ํํ๋ฅผ ๋ค์ํ ๋ชจ์์ผ๋ก ๋ฐ๊พธ๊ธฐ โจ ์๋
ํ์ธ์. ์ฌ์ง ํํ๋ฅผ ์ฌ๋ฏธ์๋ ๋ชจ์์ผ๋ก ์์ ํด์ฃผ๋ ๊ธฐ๋ฐํ ์ฌ์ดํธ ํ๋ ์๊ฐํด ๋๋ฆด๊ฒ์. Fancy Border Radius GeneratorGenerator to build organic shapes with CSS3 border-radius9elements.github.io ์ด ์ฌ์ดํธ์์ ๋ง์ฐ์ค๋ก ์ด๋ฏธ์ง๋ฅผ ์ํ๋ ๋ชจ์์ผ๋ก ๋๋๊ทธ ํด์ฃผ๋ฉด border-radius ํ๋กํผํฐ ๊ฐ์ ์๋์ผ๋ก ๊ณ์ฐํด์ ์๋ ค์ค๋ต๋๋ค. ๊ฐ์ ๋ณต์ฌํด์ vscode๋ก ๊ฐ์ ธ์ค๋ฉด ์ง์ ํ๋ ์์ ๋ง๋ค์ง ์์๋ ์ฝ๊ฒ ์ฌ์ง ํ
๋๋ฆฌ๋ฅผ ์ํ๋ ๋ชจ์์ผ๋ก ์๋ฅผ ์ ์์ด์. ์ฌ์ง์ด ์ ์ฌ๊ฐํ์ ๊ฐ๊น์ธ์๋ก ๋ด๊ฐ ์ค์ ํด ์ค ๋ชจ์์ผ๋ก ๋ง๋ค๊ธฐ๊ฐ ์ฌ์์. โ๏ธ HTML ์ฝ๋โ๏ธ CSS ์ฝ๋ border-radiu..
'CSS' ํ๊ทธ์ ๊ธ ๋ชฉ๋ก (2 Page)
๋ซ๊ธฐ
๋จ์ถํค
๋ด ๋ธ๋ก๊ทธ
๋ด ๋ธ๋ก๊ทธ - ๊ด๋ฆฌ์ ํ ์ ํ
Q
Q
์ ๊ธ ์ฐ๊ธฐ
W
W
๋ธ๋ก๊ทธ ๊ฒ์๊ธ
๊ธ ์์ (๊ถํ ์๋ ๊ฒฝ์ฐ)
E
E
๋๊ธ ์์ญ์ผ๋ก ์ด๋
C
C
๋ชจ๋ ์์ญ
์ด ํ์ด์ง์ URL ๋ณต์ฌ
S
S
๋งจ ์๋ก ์ด๋
T
T
ํฐ์คํ ๋ฆฌ ํ ์ด๋
H
H
๋จ์ถํค ์๋ด
Shift + /
โง + /
* ๋จ์ถํค๋ ํ๊ธ/์๋ฌธ ๋์๋ฌธ์๋ก ์ด์ฉ ๊ฐ๋ฅํ๋ฉฐ, ํฐ์คํ ๋ฆฌ ๊ธฐ๋ณธ ๋๋ฉ์ธ์์๋ง ๋์ํฉ๋๋ค.