๐ŸŽจ ๋ธŒ๋ผ์šฐ์ €์˜ ๋””ํดํŠธ css ์„ค์ •

์ •์€๊ฒฝยท2020๋…„ 9์›” 16์ผ
0

๐Ÿ‘ธ Front-End Queen

๋ชฉ๋ก ๋ณด๊ธฐ
65/271

๋ธŒ๋ผ์šฐ์ € ๋งˆ๋‹ค ๋””ํดํŠธ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋Š” css ๊ฐ’๋“ค์ด ์žˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด margin, padding ๊ฐ™์€ css ์†์„ฑ(property)์˜ ๊ฐ’๋“ค์ด 0์ด ์•„๋‹ˆ๋ผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ •ํ•œ ์ž„์˜์˜ ๊ฐ’์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋‹ค๋Š” ๋ง!
์ด๋Ÿฐ ๊ฐ’๋“ค์„ ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ์ž‘์—…์„ ํ•ด์•ผ
๋‚ด๊ฐ€ ์˜๋„ํ•œ ๊ฐ’์œผ๋กœ ํ™”๋ฉด์— ์ถœ๋ ฅ๋  ์ˆ˜ ์žˆ๋‹ค!

์›น๋ธŒ๋ผ์šฐ์ € css ์ดˆ๊ธฐํ™” ์ „

๋‚˜๋Š” header ํด๋ž˜์Šค div์— margin๊ณผ padding์„ ์ฃผ์ง€ ์•Š์•˜์ง€๋งŒ!
ํ™”๋ฉด์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค

์š”์†Œ๋“ค์˜ ๋””ํดํŠธ width/height

์›น๋ธŒ๋ผ์šฐ์ €์˜ ๋””ํดํŠธ css ๊ฐ’ ์ดˆ๊ธฐํ™”ํ•˜๊ธฐ

body {
	margin: 0;
    padding: 0;
}

์›น๋ธŒ๋ผ์šฐ์ € css ์ดˆ๊ธฐํ™” ํ›„

์›น๋ธŒ๋ผ์šฐ์ €์˜ css ๋””ํดํŠธ ๊ฐ’์„ ์•Œ์•„๋ณด์ž

margin : ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋‹ค๋ฆ„;
padding: ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋‹ค๋ฆ„;
font-size : 16px;
width : auto;
height: auto;

margin: auto;

์ด์ œ๊นŒ์ง€ flex ์ค˜์„œ center๋กœ ์ •๋ ฌํ–ˆ๋Š”๋ฐ
"margin: auto;" ์“ฐ๋‹ˆ๊น ํŽธํ•˜๋„ค์œ !!!

float: left;


.clearfix::after {}

css๋ฅผ ํ•ด์ œํ•˜๋Š” ์„ค์ •

profile
#์˜์‹์˜ํ๋ฆ„ #์ˆœ๊ฐ„์ˆœ๊ฐ„ #์ƒ๊ฐ์˜์Šค๋ƒ…์ƒท

0๊ฐœ์˜ ๋Œ“๊ธ€