Calendar_CSS - samdasu2L/OSS_Project GitHub Wiki

CSS๋ž€

CSS๋Š” ์›น ๋ฌธ์„œ์˜ ์‹œ๊ฐ์  ์Šคํƒ€์ผ์„ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•œ ์–ธ์–ด, ์ƒ‰์ƒ, ํฐํŠธ, ๊ฐ„๊ฒฉ, ๋ฐฐ์น˜, ์• ๋‹ˆ๋ฉ”์ด์…˜๋“ฑ ๋‹ด๋‹น

CSS์˜ ์‚ฌ์šฉ

์™ธ๋ถ€ ์Šคํƒ€์ผ์‹œํŠธ(.css ํŒŒ์ผ)๋ฅผ ์ƒ์„ฑํ•ด html์˜ head ๋‚ด๋ถ€์— ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ฐ๊ฒฐํ•จ.

<link rel="stylesheet" href="style.css">    <!-- HTML head ๋‚ด๋ถ€ -->

CSS์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

์„ ํƒ์ž {
 ์†์„ฑ: ๊ฐ’;
}

์ฃผ์š” ์„ ํƒ์ž

* : ์ „์ฒด ์„ ํƒ์ž                                Ex) * { margin: 0; }
ํƒœ๊ทธ๋ช… : ํƒœ๊ทธ ์„ ํƒ                              Ex) p { color: red; }
.ํด๋ž˜์Šค๋ช… : ํด๋ž˜์Šค ์„ ํƒ(์—ฌ๋Ÿฌ ์š”์†Œ ์ ์šฉ ๊ฐ€๋Šฅ)      Ex) .box { border: 1px solid; }
#์•„์ด๋””๋ช… : ์•„์ด๋”” ์„ ํƒ(ํ•œ ์š”์†Œ๋งŒ ์ ์šฉ ๊ฐ€๋Šฅ)      Ex) #main { width: 100% }

์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ

color : ๊ธ€์ž ์ƒ‰                  Ex) color: red;
background-color : ๋ฐฐ๊ฒฝ ์ƒ‰       Ex) background-color: yellow;
font-size : ๊ธ€์ž ํฌ๊ธฐ            Ex) font-size: 10px;
text-align : ์ •๋ ฌ               Ex) text-align: center;
margin : ์™ธ๋ถ€ ์—ฌ๋ฐฑ               Ex) margin: 20px;
padding : ๋‚ด๋ถ€ ์—ฌ๋ฐฑ              Ex) padding: 10px;
border : ํ…Œ๋‘๋ฆฌ                  Ex) border: 1px solid black;
width/height : ๋„ˆ๋น„ /๋†’์ด        Ex) width: 100px;
โš ๏ธ **GitHub.com Fallback** โš ๏ธ