[HTML/CSS] Day5. CSS Basic ๐ŸŒท

์˜ค๋Š˜์˜ ๊ฐ•์˜๋Š” ํŠน๊ฐ•์œผ๋กœ ์ด๋ฃจ์–ด์กŒ๋‹ค.
ํŠน๊ฐ•์„ ์ง„ํ–‰ํ•˜๋Š” ๊ฐ•์‚ฌ๋‹˜์€ ๋ฌด๋ ค ์œ ํŠœ๋ธŒ์ฑ„๋„ "๋น”์บ ํ”„"์˜ ์ด์ข…์ฐฌ ๊ฐ•์‚ฌ๋‹˜!

ํ•œ์ฐฝ ๊ตญ๋น„ํ•™์›์—์„œ CSS๋ฅผ ๋ฐฐ์šธ ๋•Œ ์ข…์ข… ๋ณด๋˜ ์œ ํŠœ๋ธŒ์˜ ๊ทธ ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์šฐ๋ฆฌ์—๊ฒŒ ํŠน๊ฐ•์„ ์˜ค์‹œ๋‹ค๋‹ˆ?!
๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ๊ฐ€๋ฅด์ณ์ฃผ์‹œ๋Š”๋ฐ ์œ ํŠœ๋ธŒ ์˜์ƒ์„ ๋ณด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋˜‘๊ฐ™์œผ์…”์„œ ๋„ˆ๋ฌด ์‹ ๊ธฐํ•˜๊ณ  ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค. ํŠน๋ณ„ํ•˜๊ณ  ์ •๋ง ์žฌ๋ฐŒ๋Š” ๊ฐ•์˜์˜€๊ธฐ๋„ ํ•˜์ง€๋งŒ ๋„ˆ๋ฌด ์ธ์ƒ๊นŠ์—ˆ๋˜ ๊ฐ•์˜์ธ ๊ฒƒ ๊ฐ™์•„ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๋นจ๋ฆฌ ๊ฐ”๋‹ค. ๐Ÿ˜ข
ํ•œ๋ฒˆ ๋” ์˜ค์…จ์œผ๋ฉด...(์ œ๋ฐœ...)

์˜ค๋Š˜์˜ ํŠน๊ฐ•์€ ์ด์ข…์ฐฌ ๊ฐ•์‚ฌ๋‹˜์˜ ํŠธ๋ ˆ์ด๋“œ ๋งˆํฌ์ธ CSS ํŠน๊ฐ•!
์—ญ์‹œ CSS์— ์žฅ์ธ์ด์‹  ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ๊ฐ€๋ฅด์ณ ์ฃผ์‹œ๋‹ˆ ๋„ˆ๋ฌด ์˜๊ด‘์ด์˜€๋‹ค! ๐Ÿคฉ
์ด์ œ๋ถ€ํ„ฐ ๊ฐ•์‚ฌ๋‹˜์ด ๊ฐ€๋ฅด์ณ์ฃผ์‹  ๋ชจ๋“  ๊ฒƒ์„ ์ •๋ฆฌํ•ด๋ณด์ž!

ํ”„๋กœํ•„ ๊พธ๋ฏธ๊ธฐ ๐Ÿ˜Ž

์šฐ๋ฆฌ๊ฐ€ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๋งŒ๋“ค์–ด์•ผํ•˜๋Š” ๊ฒƒ์€ "ํ”„๋กœํ•„ ๊พธ๋ฏธ๊ธฐ"์˜€๋‹ค.
๋งŒ์•ฝ ๋‚ด๊ฐ€ ์ทจ์—…์„ ์œ„ํ•ด ์ž๊ธฐ์†Œ๊ฐœ๋ฅผ ํ•˜๋Š” ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋งŒ๋“ค๋•Œ ์œ ์šฉํ•œ ์ˆ˜์—…์ด๊ณ 
๋‹ค์–‘ํ•œ CSS๋ฅผ ์‚ฌ์šฉํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์˜ˆ์ œ๋ผ์„œ ์‹œ์ž‘ํ•  ๋•Œ๋ถ€ํ„ฐ ๋“ค๋– ์žˆ๋Š” ์ƒํƒœ์˜€๋‹ค.

์ „์ฒด์ ์ธ HTML ์†Œ์Šค ์ฝ”๋“œ๋Š” ์ด๋ ‡๋‹ค.
๋‚˜๋Š” .wrapper .header .contents .footer ๋ณ„๋กœ ์„ค๋ช…์„ ํ•ด๋ณผ ๊ฒƒ์ด๋‹ค.

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
        <title>PROFILE</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
   <!-- wrapper ์‹œ์ž‘ -->
	<div class="wrapper">
      <!-- header ์‹œ์ž‘ -->
      <div class="header">
        <img class="profile" src="./images/profile02.png" alt="">
        <h1>GLENN LEE</h1>
        <p>FRONTEND DESIGNER</p>
      </div>
      <!-- header ๋ -->
      
      <!-- contents ์‹œ์ž‘ -->
      <div class="contents">
        <div class="section information">
          <h2>Information</h2>
          <ul class="list">
            <li><a href="#">Shin Hyunwoo</a></li>
            <li><a href="#">[email protected]</a></li>
            <li><a href="#">Busan, Korea</a></li>
          </ul>
        </div>
        <div class="section skills">
          <h2>Skills</h2>
          <ul class="list">
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">HTML + CSS</a></li>
          </ul>
        </div>
      </div>
      <!-- contents ๋ -->

      <!-- footer ์‹œ์ž‘ -->
      <div class="footer">
        <a class="icon github" href="#">Github</a>
        <a class="icon facebook" href="#">Facebook</a>
        <a class="icon email" href="#">Contact</a>
      </div>
      <!-- footer ๋ -->
    </div>
    </body>
  <!-- wrapper ๋ -->
</html>

reset CSS ๐Ÿ”„

reset CSS๋ž€ ํƒœ๊ทธ๋งˆ๋‹ค ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ๊ฐ€์ง€๋Š” ๊ฐ’์ด ์žˆ๋‹ค. ์ด๊ฒƒ์„ User agent stylesheet๋ผ๊ณ  ํ•œ๋‹ค.
์ด๋Š” ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์„ค์ • ๊ฐ’์ด ๋‹ค ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ๊ฐ€์ง€ ์ฝ”๋“œ๋ฅผ ์ ์šฉํ–ˆ์„ ๋•Œ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅธ ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋ถˆํŽธํ•จ์„ ์—†์• ๊ธฐ ์œ„ํ•ด ํƒœ๊ทธ๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ณ„ ๊ธฐ๋ณธ๊ฐ’์„ ์ดˆ๊ธฐํ™” ์‹œ์ผœ์ฃผ๋Š” ๊ฒƒ์ด "reset CSS๋ฅผ ์„ค์ •ํ•œ๋‹ค." ๋ผ๊ณ  ํ•œ๋‹ค.

<body> ํƒœ๊ทธ๊ฐ€ ๊ฐ€์ง€๋Š” ๊ธฐ๋ณธ ๊ฐ’์€ ์ด๋ ‡๋‹ค.

<body>๋Š” display:block์ด ์ ์šฉ๋œ "๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ"์ด๋ฉฐ, margin:8px์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ€์ง„๋‹ค๊ณ  ๋‚˜์™€์žˆ๋‹ค.
์ด๋ฅผ ์ดˆ๊ธฐํ™” ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„  <body>์— ์ดˆ๊ธฐํ™”๋ฅผ ์œ„ํ•œ CSS๋ฅผ ์ ์šฉ์‹œ์ผœ์•ผ ํ•œ๋‹ค.

body{
  margin:0; 
  padding:0;
}

์ด๋ ‡๊ฒŒ ์ ์šฉ์„ ์‹œํ‚ค๋ฉด margin:8px์€ ์ทจ์†Œ์„ ์ด ๊ทธ๋ ค์ง€๋ฉด์„œ ์ดˆ๊ธฐํ™”๊ฐ€ ๋œ๋‹ค.
๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ๋Š” ๋ฌผ๋ก  ์ด๋ฏธ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋งŒ๋“  ๋‹ค์–‘ํ•œ reset CSS๊ฐ€ ์žˆ์ง€๋งŒ ์ง์ ‘ ์ž‘์„ฑํ•˜๊ณ  ์ด๋ ‡๊ฒŒ ํ•˜๋‚˜์”ฉ ์ดˆ๊ธฐํ™”๋ฅผ ์‹œ์ผœ๋‚˜๊ฐ€๋Š” ๊ณผ์ •์€ CSS ๊ณต๋ถ€์— ์•„์ฃผ ๋„์›€์ด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ํ•˜๋‚˜์”ฉ ๋‹ค ์ž‘์„ฑํ•ด์„œ ๋งŽ์€ ํƒœ๊ทธ๋ฅผ ์ดˆ๊ธฐํ™” ์‹œ์ผœ์ฃผ์—ˆ๋‹ค.

๊ฐ•์‚ฌ๋‹˜์ด ๋ง์”€ํ•˜์‹  ๊ฐœ๋ฐœ์ž๋“ค์ด ๋งŒ๋“  reset CSS๋Š” ์ด ๊ณณ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

/* reset */

body,p, ul{
  margin:0; 
  padding:0;
}

body{
  background-image: url(./images/background.gif);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

h1, h2{
  margin: 0;;
  font-size:inherit; 
  font-weight: initial;
}

li{
  list-style: none;
}

a{
  text-decoration: inherit;
  color:inherit;
}



<body>์™€ .wrapper ๋ถ€๋ถ„ ์„ค๋ช… ๐Ÿ”Ž

<body>์—๋Š” reset CSS๋ฅผ ์ œ์™ธํ•˜๊ณ  ์•„๋ž˜์˜ CSS๋ฅผ ์ ์šฉํ•˜์˜€๋‹ค.

body{
  background-image: url(./images/background.gif);
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

<body>ํƒœ๊ทธ์— "๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€"์™€ ๊ด€๋ จ๋œ Property๊ฐ€ ๋งŽ์€ ๊ฒƒ์ด ๋ณด์ผ ๊ฒƒ์ด๋‹ค.

  • background-image : ์„ค์ •ํ•  ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ํŒŒ์ผ์„ ์„ ํƒํ•œ๋‹ค.
  • background-position : ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ์œ„์น˜๋ฅผ ์„ค์ •ํ•œ๋‹ค.
  • background-attachment : ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ๋ทฐํฌํŠธ ๋‚ด์—์„œ ๊ณ ์ •ํ• ์ง€, ์ž์‹ ์˜ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก๊ณผ ํ•จ๊ป˜ ์Šคํฌ๋กคํ• ์ง€ ์ง€์ •ํ•œ๋‹ค.
  • background-size : ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ค์ •ํ•œ๋‹ค. ์ฃผ๋กœ ๊ฝ‰ ์ฑ„์šฐ๊ธฐ ์œ„ํ•ด cover๋ฅผ ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€๋Š” background-size:cover๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š์•˜์„ ๋•Œ์ด๋‹ค. ์ž์„ธํžˆ ๋ฐฐ๊ฒฝ์„ ๋ณด๋ฉด ๋ฐ”๋‘‘ํŒ์‹์œผ๋กœ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๊ฐ€ ๋ฐ˜๋ณต๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ ์šฉ์„ ์‹œํ‚ค๋ฉด ์ •์ƒ์ ์ธ ๊น”๋”ํ•œ ๋ฐฐ๊ฒฝ์ด ๋‚˜์˜ค๊ฒŒ ๋œ๋‹ค.

background-size:cover๋Š” ์ด๋ฏธ์ง€๊ฐ€ ์ฐŒ๊ทธ๋Ÿฌ์ง€์ง€ ์•Š๋Š” ํ•œ๋„ ๋‚ด์—์„œ ์ œ์ผ ํฌ๊ฒŒ ์„ค์ •ํ•˜๊ณ  ๋งŒ์•ฝ ์ด๋ฏธ์ง€์˜ ๊ฐ€๋กœ์„ธ๋กœ๋น„๊ฐ€ ๋‹ค๋ฅด๋‹ค๋ฉด ์„ธ๋กœ ๋˜๋Š” ๊ฐ€๋กœ ๋ฐฉํ–ฅ์œผ๋กœ ๋นˆ ๊ณต๊ฐ„์ด ์—†์ด ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
์‰ฝ๊ฒŒ ์ƒ๊ฐํ•ด์„œ ๊ฐ€๋กœ ์„ธ๋กœ์— ๋งž๊ฒŒ ์ด๋ฏธ์ง€๋ฅผ ์†์ƒ๋˜์ง€ ์•Š๋Š” ์„ ์—์„œ ๊ฝ‰ ์ฑ„์›Œ์ค€๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

๋ฌผ๋ก  ๋ฐฐ๊ฒฝ์ด ๋ฐ”๋‘‘ํŒ์‹์œผ๋กœ ๋ฐ˜๋ณต๋˜์–ด ์ ์šฉ์ด ๋˜๋Š” ๊ฒƒ์€ background-repeat:no-repeat๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์œผ๋‚˜ background-size:cover๋ฅผ ํ†ตํ•ด ๋ฌธ์ œ๋ฅผ ๋ฐ”๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

background-attachment:fixed๋Š” ๋ฐฐ๊ฒฝ์„ ๋ทฐํฌํŠธ์— ๋Œ€ํ•ด ๊ณ ์ •ํ•œ๋‹ค. ์ค‘๊ฐ„์˜ ํ”„๋กœํ•„ ์นด๋“œ๋Š” ์›€์ง์ด์ง€๋งŒ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ๊ณ ์ •์ด ๋˜์–ด ์Šคํฌ๋กค์ด ํ–‰ํ•ด์ ธ๋„ ๋ทฐํฌํŠธ์— ๊ทธ๋Œ€๋กœ ๊ณ ์ •๋˜์–ด ์žˆ๋‹ค.
์ด ์†์„ฑ์€ ์ฃผ๋กœ ๊ณต๊ฐ„๊ฐ์„ ์ฃผ๋Š” 'ํŒจ๋Ÿด๋ ‰์Šค ๋””์ž์ธ'์— ์ฃผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.


๋‹ค์‹œ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ์— ์ „์ฒด ํƒœ๊ทธ๋ฅผ ๊ฐ์‹ผ .wrapper ํƒœ๊ทธ๊ฐ€ ์žˆ์„ ๊ฒƒ์ด๋‹ค.
์—ฌ๊ธฐ์— ์ ์šฉ๋œ CSS๋ฅผ ์‚ดํŽด๋ณด์ž

.wrapper{
  background-color: #ddd;
  width:800px;
  margin:100px auto;
}

์šฐ์„  .wrapper์˜ ์ „์ฒด ๋ฐฐ๊ฒฝ์ƒ‰์„ #ddd๋กœ ์ ์šฉ์‹œ์ผฐ๊ณ  width:800px์„ ์ ์šฉ์‹œ์ผฐ๋‹ค.
width๋ฅผ ์„ค์ •ํ•œ ์ด์œ ๋Š” ์ „์ฒด ํƒœ๊ทธ๋ฅผ ๊ฐ์‹ธ๋Š” .wrapper๋ฅผ margin:100px auto๋ฅผ ํ†ตํ•ด ํŽ˜์ด์ง€์— "์ค‘์•™ ์ •๋ ฌ"์„ ํ•˜๋ ค๋Š” ๋ชฉ์ ์ด ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๊ตณ์ด .wrapper๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „์ฒด ํƒœ๊ทธ๋ฅผ ๊ฐ์‹ธ๋Š” ์ด์œ ๋Š” ์ถ”ํ›„์— ๋””์ž์ธ์ด๋‚˜ ๊ธฐ๋Šฅ์ด ์—…๋ฐ์ดํŠธ ๋˜์—ˆ์„ ๋•Œ ์ถ”๊ฐ€ํ•  ์ฝ”๋“œ๋ฅผ ๋„ฃ๊ธฐ๋งŒ ํ•ด๋„ ํŽ˜์ด์ง€์— ์ค‘์•™ ์ •๋ ฌ์ด ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฏธ๋ž˜์˜ ํŽธ์˜์„ฑ๊ณผ ๋ฒ”์šฉ์„ฑ์„ ์œ„ํ•ด ํ–ˆ๋‹ค๊ณ  ํ•˜์…จ๋‹ค.(๋ฉ”๋ชจ๋ฉ”๋ชจ)

๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ๋Š” ๋‹จ์ˆœํ•œ ๋””์ž์ธ์ด์ง€๋งŒ "๋ฏธ๋ž˜๋ฅผ ์ƒ๊ฐํ•˜๋Š” CSS"๋ฅผ ๊ณ ๋ฏผํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ํ•˜์…จ๋‹ค.




.header ๋ถ€๋ถ„ ์„ค๋ช… ๐Ÿ”Ž

.header ์œ„์˜ ์ด๋ฏธ์ง€๊ฐ€ ๋‚˜ํƒ€๋‚ด๋Š” ๋ถ€๋ถ„์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค.

  • ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€
  • ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
  • ์ด๋ฆ„
  • ์ง์—…

์ด๋ ‡๊ฒŒ 4๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด ์žˆ๋‹ค.

div{
  margin: 0 auto;
}

.header{
  background-image: url(./images/cover04.png);
  background-size: cover;
  height: auto;
  text-align: center;
  color:#fff;
  padding:50px 0;
}

.header img.profile{
  border:10px solid #fff;
  border-radius: 200px / 50px;
}

.header h1 {
  font-size: 100px;
}

.header p{
  border-top:4px solid;
  display: inline-block;
  padding: 10px 20px;
  margin:20px auto;
}

.header์— background-image background-size๋ฅผ ์„ค์ •ํ•˜์—ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ์ „์ฒด ๋„“์ด๋งŒํผ ์ ์šฉํ•˜์˜€๋‹ค.

.header์—์„œ ์ค‘์š”ํ•œ ๊ฒƒ์€ text-align: center ๋ถ€๋ถ„์ด๋‹ค. ์™œ ์ด ์†์„ฑ์ด ์ค‘์š”ํ•œ์ง€ ์„ค๋ช…ํ•˜๊ฒ ๋‹ค.

<!-- header ์‹œ์ž‘ -->
      <div class="header">
        <img class="profile" src="./images/profile02.png" alt="">
        <h1>GLENN LEE</h1>
        <p>FRONTEND DESIGNER</p>
      </div>
<!-- header ๋ -->

๋ณด์‹œ๋‹ค์‹œํ”ผ .header ์•ˆ์—๋Š” <img>, <h1>, <p> ํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค.
๊ทผ๋ฐ ์ด ํƒœ๊ทธ๋“ค์€ text-align: center๊ฐ€ ์—†์œผ๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ?

์œ„์ฒ˜๋Ÿผ ์™ผ์ชฝ ์ •๋ ฌ์ด ๋œ๋‹ค.

์šฐ๋ฆฌ๋‚˜๋ผ๋Š” ๊ธ€์„ ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์„ ์ฝ๋Š”๋‹ค. ์ด๋Š” ์—ฌ๊ธฐ์„œ๋„ ์ ์šฉ์ด ๋˜๋Š”๋ฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‚˜๋ผ๋งˆ๋‹ค ๋‹ค๋ฅด์ง€๋งŒ ์šฐ๋ฆฌ๋‚˜๋ผ๋Š” ์ •๋ ฌ์„ ์„ค์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ "์™ผ์ชฝ ์ •๋ ฌ"์„ ์ ์šฉํ•œ๋‹ค.
๊ทธ๋ž˜์„œ .header์˜ ์•ˆ์˜ ํƒœ๊ทธ๋“ค์ด ์™ผ์ชฝ์œผ๋กœ ์ •๋ ฌ์ด ๋œ ๊ฒƒ์ด๋‹ค. ์ด๋ฅผ ๋””์ž์ธ์ ์œผ๋กœ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด text-align: center์„ ์ ์šฉํ•˜์˜€๋‹ค.

๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์ฝ”๋”ฉ์„ ํ• ๋•Œ ๋ฌธํ™”์ ์ธ ์ฐจ์›์—์„œ ์ ‘๊ทผํ•˜๋ฉด ์ด์œ ๊ฐ€ ๋‚˜์˜ค๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค๋Š” ๋งํ•˜์…จ๋Š”๋ฐ ์ฝ”๋”ฉ์„ ํ•˜๋ฉด์„œ ๊ทธ๋Ÿฐ ์ƒ๊ฐ์„ ํ•˜์‹ ๋‹ค๋Š” ๊ฒƒ์ด ๋˜ ํ•œ๋ฒˆ ์กด๊ฒฝ์‹ฌ์„ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‹ค์Œ ๋ด์•ผํ•˜๋Š” ํฌ์ธํŠธ <p>์˜ "์œ„์ชฝ ์„ "์ด๋‹ค.

.header p{
  border-top:4px solid;
  display: inline-block;
  padding: 10px 20px;
  margin:20px auto;
}

<p>๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•œ ์ค„์„ ์ฐจ์ง€ํ•˜๋Š” "๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ"์ด๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์œ„์— ์„ ์€ ํ•œ ์ค„์„ ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ •์ƒ์ธ๋ฐ ์™œ ์กฐ๊ธˆ๋งŒ ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒ์ผ๊นŒ?

์ด๋Š” display: inline-block๊ฐ€ ์ ์šฉ์ด ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. <p>๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ "๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ"์ด์ง€๋งŒ display ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์™€ ์ธ๋ผ์ธ ์š”์†Œ์˜ ํŠน์ง•์„ ๋‘˜ ๋‹ค ๊ฐ€์ง€๋Š” "์ธ๋ผ์ธ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ"๊ฐ€ ๋œ๋‹ค.

์ธ๋ผ์ธ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ์ธ๋ผ์ธ์˜ ํŠน์ง•์ธ "์ฝ˜ํ…์ธ ๋งŒํผ์˜ ๋„“์ด๋งŒ์„ ์ฐจ์ง€"ํ•˜๋ฉฐ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์— ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์ธ width/height์™€ padding/margin์˜ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

์œ„๋ฅผ ์ •๋ฆฌํ•ด๋ณด๋ฉด <p>๋Š” ์ธ๋ผ์ธ ๋ธ”๋ก ์š”์†Œ๊ฐ€ ๋˜์–ด ์ฝ˜ํ…์ธ  ๋งŒํผ์˜ ๋„ˆ๋น„๋ฅผ ์ฐจ์ง€ํ•˜๊ฒŒ ๋˜์–ด ์œ„์˜ ์„  ๋˜ํ•œ ๊ทธ์— ๋งž์ถฐ์ง€๊ฒŒ ๋˜์—ˆ์œผ๋ฉฐ padding๋ฅผ ์ ์šฉ์‹œ์ผœ์„œ ์ฝ˜ํ…์ธ  ๋„ˆ๋น„๋ฅผ ๋„“ํ˜€ ๋” ๊ธธ์–ด์ง€๊ฒŒ ํ–ˆ๊ณ  ํ…์ŠคํŠธ์™€ ์„  ๊ฐ„์˜ ๊ฑฐ๋ฆฌ์„ ์ฃผ์—ˆ๋‹ค.

.contents ๋ถ€๋ถ„ ์„ค๋ช… ๐Ÿ”Ž

<!-- contents ์‹œ์ž‘ -->
      <div class="contents">
        <div class="section information">
          <h2>Information</h2>
          <ul class="list">
            <li><a href="#">Shin Hyunwoo</a></li>
            <li><a href="#">[email protected]</a></li>
            <li><a href="#">Busan, Korea</a></li>
          </ul>
        </div>
        <div class="section skills">
          <h2>Skills</h2>
          <ul class="list">
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">HTML + CSS</a></li>
          </ul>
        </div>
      </div>
<!-- contents ๋ -->
.contents{
  padding:30px;
}

.section{
  background-image: url(./images/icon-information.png);
  background-repeat: no-repeat;
  background-position: right 30px center;
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.section:last-child{
  margin-bottom: 0;
}

.section.skills{
  background-image: url(./images/icon-skills.png);
}

.section h2{
  color:salmon;
  font-size:20px;
  margin-bottom: 20px;
}

.list li{
  border-left: 5px solid #ddd;
  padding : 2px 10px;
}

.list li:hover{
  border-color:pink;
  color:pink;
}

๊ฐœ์ธ์ ์œผ๋กœ ์กฐ๊ธˆ ๊ณ ๋ฏผ์„ ํ•˜๊ฒŒ ๋˜๋Š” ๋ถ€๋ถ„์ด์˜€๋‹ค.

๋‚˜์˜€๋‹ค๋ฉด <section>์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ฐฐ๊ฒฝ์ด ์•„๋‹Œ <img>๋กœ ๋„ฃ์—ˆ์„ ๊ฒƒ์ด๋‹ค.
ํ•˜์ง€๋งŒ ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋กœ ์ ์šฉํ•˜๋Š” ์ด์œ ๋Š” ์‚ฌ์šฉํ•˜๋Š” ์ด๋ฏธ์ง€ ์ž์ฒด์—๋Š” ์•„๋ฌด๋Ÿฐ ์˜๋ฏธ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋ผ๊ณ  ํ•˜์…จ๋‹ค.
<img>๋Š” ์ปจํ…์ธ ์ผ ๋•Œ, ์ฆ‰ ๋‚ด์šฉ์„ ๋‹ด๊ณ  ์žˆ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ํ•˜์…จ๋‹ค.

๊ทธ๋ฆฌ๊ณ  background-position: right 30px center์ด ์กฐ๊ธˆ ํ—ท๊ฐˆ๋ ธ๋‹ค.
๋ณดํ†ต ์†์„ฑ์˜ ๊ฐ’์„ center๋งŒ ์“ฐ๋‹ค๋ณด๋‹ˆ ๋‹ค๋ฅด๊ฒŒ ์“ฐ๋Š” ๋ฐฉ๋ฒ•์„ ์žŠ์–ด๋ฒ„๋ฆฐ ๊ฒƒ ๊ฐ™์•„ ๋‹ค์‹œ ์ •๋ฆฌํ•œ๋‹ค.

/* ๊ฐ’์ด 1๊ฐœ */
background-position: x์ถ• ์ด๋™ ๊ฐ’

/* ๊ฐ’์ด 2๊ฐœ */
background-position: x์ถ• ์ด๋™ ๊ฐ’ | y์ถ• ์ด๋™ ๊ฐ’

/* ๊ฐ’์ด 3๊ฐœ */
background-position: ํ‚ค์›Œ๋“œ1 | ํ‚ค์›Œ๋“œ1์„ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ํ•  ๊ฐ’ | ํ‚ค์›Œ๋“œ2
					 * ํ‚ค์›Œ๋“œ1์ด x๋‚˜ y์ถ•์ด๋ฉด ํ‚ค์›Œ๋“œ2๋Š” ์ž๋™์ ์œผ๋กœ ํ‚ค์›Œ๋“œ1๊ณผ ๋ฐ˜๋Œ€๋˜๋Š” ์ถ•์œผ๋กœ ์ •์˜๋จ

ex) background-position: right | 45px | bottom
	: ์˜ค๋ฅธ์ชฝ์—์„œ 45px๋ฅผ ์ด๋™ํ•˜๊ณ  ์•„๋ž˜์ชฝ์—์„œ 0px ๋ฐฐ์น˜

/* ๊ฐ’์ด 4๊ฐœ */
background-position: ํ‚ค์›Œ๋“œ1 | ํ‚ค์›Œ๋“œ1์„ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ํ•  ๊ฐ’ | ํ‚ค์›Œ๋“œ2 | ํ‚ค์›Œ๋“œ2์„ ๊ธฐ์ค€์œผ๋กœ ์ด๋™ํ•  ๊ฐ’
					 * ํ‚ค์›Œ๋“œ1์ด x๋‚˜ y์ถ•์ด๋ฉด ํ‚ค์›Œ๋“œ2๋Š” ์ž๋™์ ์œผ๋กœ ํ‚ค์›Œ๋“œ1๊ณผ ๋ฐ˜๋Œ€๋˜๋Š” ์ถ•์œผ๋กœ ์ •์˜๋จ

ex) background-position: right | 45px | bottom | 20px
	: ์˜ค๋ฅธ์ชฝ์—์„œ 45px๋ฅผ ์ด๋™ํ•˜๊ณ  ์•„๋ž˜์ชฝ์—์„œ 20px ๋ฐฐ์น˜

๊ฐ’์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ํ‚ค์›Œ๋“œ์ด๋ž€ top,bottom,left,right,center๊ฐ€ ์žˆ๋‹ค.

๊ทธ๋ž˜์„œ background-position: right 30px center๋Š” "right๋ฅผ ๊ธฐ์ค€์œผ๋กœ 30px๋ฅผ ์ด๋™ํ•˜๊ณ  y์ถ•์—์„œ ๊ฐ€์šด๋ฐ๋กœ ๋ฐฐ์น˜"๋ฅผ ๋œปํ•œ๋‹ค.

์˜ค๋žœ๋งŒ์— ์“ฐ๋ฉด ๋‹ค์‹œ ์•Œ์•„๊ฐ€๋ฉด ๋˜๋‹ˆ ์กฐ๊ธ‰ํ•ดํ•˜์ง€ ๋ง์ž! ๐Ÿ‘




.footer ๋ถ€๋ถ„ ์„ค๋ช… ๐Ÿ”Ž

<!-- footer ์‹œ์ž‘ -->
      <div class="footer">
        <a class="icon github" href="#">Github</a>
        <a class="icon facebook" href="#">Facebook</a>
        <a class="icon email" href="#">Contact</a>
      </div>
<!-- footer ๋ -->
.footer{
  background-color: #f4f4f4;
  text-align: center;
  padding:20px 0;
}

.icon{
  display: inline-block;
  width:48px;
  height:48px;
  border-radius: 30px;
  border:2px solid #ddd;
  color:white;
  text-indent: -9999px;
  background-image: url(./images/icons.png);
  background-size: 144px 96px;
}

.icon.github{
  background-color: black;
  background-position: left top;
}

.icon.facebook{
  background-color: dodgerblue;
  background-position: center top;
}

.icon.email{
  background-color: orangered;
  background-position: right top;
}

.icon:hover{
  background-position-y: bottom;
}

๋“œ๋””์–ด ๋Œ€๋ง์˜ .footer ํŒŒํŠธ!
.footer ๋ถ€๋ถ„ ๋˜ํ•œ ๊ณ ๋ฏผํ•  ๊ฒƒ์ด ์ข€ ์žˆ์—ˆ๋‹ค.

  1. ์ธ๋ผ์ธ ์š”์†Œ๊ฐ€ ๋‚˜๋ž€ํžˆ ์žˆ์„ ๋•Œ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์€ margin์ธ๊ฐ€?
  2. IR๊ธฐ๋ฒ•์ด๋ž€?
  3. ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ ๊ธฐ๋ฒ•์ด๋ž€?

1. ์ธ๋ผ์ธ ์š”์†Œ๊ฐ€ ๋‚˜๋ž€ํžˆ ์žˆ์„ ๋•Œ ์š”์†Œ ๊ฐ„์˜ ๊ฐ„๊ฒฉ์€ margin์ธ๊ฐ€?

๋‚˜์˜ ๋‹ต์€ ๋‹น๋‹นํ•˜๊ฒŒ margin์ด๋‹ค! ๋ผ๊ณ  ๋งํ–ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์ •๋‹ต์€ "margin์ด ์•„๋‹ˆ๋‹ค."์ด๋‹ค.

<!-- footer ์‹œ์ž‘ -->
      <div class="footer">
        <a class="icon github" href="#">Github</a><!--์ด ๊ณณ์ด ๊ฐ„๊ฒฉ์˜ ์›์ธ-->
        <a class="icon facebook" href="#">Facebook</a><!--์ด ๊ณณ์ด ๊ฐ„๊ฒฉ์˜ ์›์ธ-->
        <a class="icon email" href="#">Contact</a><!--์ด ๊ณณ์ด ๊ฐ„๊ฒฉ์˜ ์›์ธ-->
      </div>
<!-- footer ๋ -->

์ธ๋ผ์ธ ์š”์†Œ ๊ฐ„์— ๋ฐœ์ƒํ•˜๋Š” ์ข์€ ๊ฐ„๊ฒฉ์€ ํƒœ๊ทธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ํ•œ ์ค„์„ ๋„์› ์„ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๊ณต๋ฐฑ์ผ ๋ฟ์ด๋‹ค.
HTML ํŒŒ์ผ์—์„œ ์•„๋ฌด๋ฆฌ ์—”ํ„ฐ๋ฅผ ์—ฌ๋Ÿฌ๋ฒˆ ์ณ๋„ ์ค„๋ฐ”๊ฟˆ์€ ๋˜์ง€ ์•Š๊ณ  ๊ณต๋ฐฑ์ด ๋ณ‘ํ•ฉ์ด ๋œ๋‹ค.
๊ทธ๋ž˜์„œ ์—”ํ„ฐ ํ•œ๋ฒˆ์€ ์ธ๋ผ์ธ ์š”์†Œ ๊ฐ„์˜ ๊ฐ„๊ฒฉ์ด ๋œ๋‹ค.

em์€ "๋ถ€๋ชจ"์˜ ์„ค์ •๋œ font-size์˜ ๋ฐฐ์ˆ˜

์ฐธ๊ณ ๋กœ ์ด ๊ฐ„๊ฒฉ์€ em ๋‹จ์œ„๋กœ ๊ณ„์‚ฐ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํฐํŠธ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋ฉด ๊ทธ์— ๋น„๋ก€ํ•˜์—ฌ ์ฆ๊ฐ€ํ•œ๋‹ค.

<!-- footer ์‹œ์ž‘ -->
      <div class="footer">
        <a class="icon github" href="#">Github</a><a class="icon facebook" href="#">Facebook</a><a class="icon email" href="#">Contact</a>
      </div>
<!-- footer ๋ -->

ํฌํ•œํ•œ ๊ฑด ์œ„์ฒ˜๋Ÿผ ์ค„๋ฐ”๊ฟˆ์ด ์—†์ด ์ž‘์„ฑ์„ ํ•˜๊ฒŒ ๋˜๋ฉด ๊ฐ„๊ฒฉ ๋˜ํ•œ ์ƒ๊ธฐ์ง€ ์•Š๊ฒŒ ๋œ๋‹ค.
์ฐธ์œผ๋กœ ์‹ ๊ธฐํ•œ CSS์˜ ์„ธ๊ณ„...๐Ÿ˜ตโ€๐Ÿ’ซ

2. IR๊ธฐ๋ฒ•์ด๋ž€?

IR๊ธฐ๋ฒ•์ด๋ž€ CSS ์†์„ฑ์œผ๋กœ ๋ณด์—ฌ์ค€๋‹ค๋ฉด text-indent: -9999px์ด๋‹ค.

Image Replacement์˜ ์•ฝ์–ด๋กœ ์ด๋ฏธ์ง€์˜ ๋Œ€์ฒดํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ CSS ๊ธฐ๋ฒ•์ด๋‹ค.

์ด ์‹ค์Šต์—์„œ๋Š” .icon์˜ ๊ธฐ๋Šฅ์„ ์„ค๋ช…ํ•˜๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋กœ ๋„ฃ๊ณ  ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ background์™€ ๊ด€๋ จ๋œ ์†์„ฑ ์ค‘์— ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์„ค์ •ํ•˜๋Š” ์†์„ฑ์€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.
๊ทธ๋ž˜์„œ "์›น์ ‘๊ทผ์„ฑ"์„ ์œ„ํ•ด ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋Œ€์ฒด ํ…์ŠคํŠธ๊ฐ€ ์—†์–ด ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์žฅ์• ์ธ์—๊ฒŒ๋Š” ๋ถˆํŽธํ•จ์„ ์ดˆ๋ž˜ํ•œ๋‹ค.

๊ทธ๋ž˜์„œ <a>์— ์ด๋ฏธ์ง€๋ฅผ ์„ค๋ช…ํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์ฝ˜ํ…์ธ ๋กœ ์ž…๋ ฅํ•˜๊ณ  "๋“ค์—ฌ์“ฐ๊ธฐ"๋ฅผ ํ•ด์ฃผ๋Š” text-indent ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๊ฐ’์„ -9999px์ฒ˜๋Ÿผ ํฐ ๊ฐ’์œผ๋กœ ์„ค์ •ํ•˜์—ฌ ํ…์ŠคํŠธ๋ฅผ ๋ฉ€๋ฆฌ ๋ณด๋‚ด์ค€๋‹ค.

์ด๋ ‡๊ฒŒ ๋˜๋ฉด ํ…์ŠคํŠธ๋Š” ๋ทฐํฌํŠธ์—์„œ ์•ˆ๋ณด์ด๋Š” ๊ณณ์—์„œ ์—ฌ์ „ํžˆ ์กด์žฌํ•˜๊ธฐ ๋–„๋ฌธ์— ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ธฐ๊ฐ€ ์ธ์‹ํ•˜์—ฌ ์ฝ์–ด์ค€๋‹ค.

3. CSS ์Šคํ”„๋ผ์ดํŠธ ๊ธฐ๋ฒ•์ด๋ž€?

์›นํŽ˜์ด์ง€๋ฅผ ํด๋ก ํ•  ๋•Œ ์ด๋ฏธ์ง€๋ฅผ ๊ตฌํ•˜๋‹ค๋ณด๋ฉด ์œ„์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ด๋ฏธ์ง€๊ฐ€ ํ•œ ์ด๋ฏธ์ง€์— ๋ถ™์–ด์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
์ด๋Š” ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์†๋„๋ฅผ ์ค„์—ฌ์ฃผ๋Š” ๋“ฑ ์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” CSS ๊ธฐ๋ฒ•์ด๋‹ค.

์•„์ด์ฝ˜์ด๋‚˜ ๋ฒ„ํŠผ ๊ฐ™์ด ์ž์ฃผ ์“ฐ์ด๋Š” ์ด๋ฏธ์ง€๋“ค์„ ์“ธ ๋•Œ๋งˆ๋‹ค ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์œ„์˜ ํŒŒ์ผ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€๊ฐ€ ๋ณ‘ํ•ฉ๋˜์–ด ์žˆ๋Š” ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋กœ ํ•˜์—ฌ ์ขŒํ‘œ๊ฐ’์„ ์„ค์ •ํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.

์ขŒํ‘œ๊ฐ’์€ background-position: x์ถ• ์ด๋™ ๊ฐ’ | y์ถ• ์ด๋™ ๊ฐ’ ์†์„ฑ์„ ์‚ฌ์šฉํ•œ๋‹ค.

.icon{
  display: inline-block;
  width:48px;
  height:48px;
  border-radius: 30px;
  border:2px solid #ddd;
  color:white;
  text-indent: -9999px;
  background-image: url(./images/icons.png);
  background-size: 144px 96px;
}

์‹ค์Šต ์˜ˆ์ œ์—์„œ๋Š” ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€๊ฐ€ ๋ณ‘ํ•ฉ๋œ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ์„ค์ •ํ•˜๊ณ  width์™€ height์˜ ๊ฐ’์„ ์ •ํ•ด์ค€ ํ›„ ์•„๋ž˜์˜ background-size์˜ ์ขŒํ‘œ๊ฐ’์„ ์ด์šฉํ•˜์—ฌ ์„ค์ •ํ•˜๊ณ  ์žˆ๋‹ค.
์ด๋Ÿฐ ์‹์œผ๋กœ ์„ค์ •ํ•ด์„œ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ 48*48px ํฌ๊ธฐ๋กœ ์ž˜ ๋“ค์–ด๊ฐ„ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.



๊ทธ ๋ฐ–์˜ ์ค‘์š”ํ•œ ํŒ๋“ค!

  1. ์ธ๋ผ์ธ ์š”์†Œ์™€ ์ธ๋ผ์ธ ๋ธ”๋Ÿญ ๋ ˆ๋ฒจ ์š”์†Œ๋Š” ๋ฒ ์ด์Šค๋ผ์ธ์„ ๊ธฐ์ค€์œผ๋กœ ์„ธ๋กœ ์ •๋ ฌ์„ ํ•œ๋‹ค.

  2. ํƒ€์ž… ์…€๋ ‰ํ„ฐ(ํƒœ๊ทธ)๋Š” ๋˜๋„๋ก์ด๋ฉด resetํ• ๋•Œ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ์ „์ฒด ํƒœ๊ทธ๋ฅผ ๋‹ค ๋ฐ”๊พธ๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ์— ํ˜ผ๋ž€์ด ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

  3. ์†์„ฑ๊ฐ’ initial์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋‹น๋ถ„๊ฐ„ ์ž์ œํ•˜์ž. ์™œ๋ƒํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ € ์ƒํƒœ๊ณ„๋ฅผ ๋ฐฉํ•ดํ•˜๋Š” 'IE'๊ฐ€ ์ง€์›ํ•˜์ง€ ์•Š์•„ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์— ์ข‹์ง€ ์•Š๋‹ค. ์ต์Šค ์ด์ž์‹..

  4. ์ƒ์†์ด ์ง€์›๋˜๋Š” ์†์„ฑ์€ ์ดˆ๊ธฐํ™” ํ•ด์ค„ ๋•Œ inherit๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์ƒ์†์ด ์ง€์›์ด ์•ˆ๋œ๋‹ค๋ฉด initial ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. ํ•˜์ง€๋งŒ initial์˜ ์‚ฌ์šฉ์€ ์ž์ œํ•œ๋‹ค.

  5. ์†์„ฑ๊ฐ’ unset์€ inherit์ด ๋˜๋Š” ๊ฒƒ์€ inherit์œผ๋กœ ํ•ด์ฃผ๊ณ  ์•ˆ๋˜๋ฉด initia๋กœ ํ•ด์คŒ

  6. ์ƒ์†์ด ๋˜๋Š” ์œ„์น˜๋Š” ๊ฐœ๋ฐœ์ž ๋„๊ตฌ ํ•˜๋‹จ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  1. ๊ฐ๊ฐ์˜ Property์— ๋”ฐ๋ผ initial์˜ ๊ฐ’์€ ๋‹ค๋ฅด๋‹ค. ์™œ๋ƒํ•˜๋ฉด initial์˜ ๊ฐ’์€ ์ ์šฉํ•˜๋Š” Property์˜ "๊ธฐ๋ณธ๊ฐ’"์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ฐ๊ฐ์˜ Property์˜ ๊ธฐ๋ณธ๊ฐ’์€ MDN์—์„œ ๊ฒ€์ƒ‰ํ•˜์—ฌ ํ™•์ธํ•˜๋„๋ก ํ•œ๋‹ค.

  2. width:100%์™€ width:auto๋Š” ๋‘˜ ๋‹ค ๋ถ€๋ชจ์˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ์ฑ„์šฐ๋Š” ๊ฒƒ์€ ๋˜‘๊ฐ™๋‹ค. ํ•˜์ง€๋งŒ width:100% ์ƒํ™ฉ์—์„œ margin์„ ์ฃผ๋ฉด margin๋งŒํผ ์˜์—ญ์ด '์ถ”๊ฐ€'๊ฐ€ ๋œ๋‹ค. ์ฆ‰, 100%๊ฐ€ ์ดˆ๊ณผ๋œ๋‹ค.
    ํ•˜์ง€๋งŒ auto๋Š” margin์„ "ํฌํ•จ"ํ•ด์„œ 100%๋กœ ๊ณ„์‚ฐํ•œ๋‹ค.

  3. ์†์„ฑ์€ text-align:center ์ธ๋ผ์ธ ์š”์†Œ(์ฝ˜ํ…์ธ  ํ…์ŠคํŠธ ํฌํ•จ)๊ฐ€ ๋ถ€๋ชจ์˜ ๊ธฐ์ค€์œผ๋กœ ์ค‘์•™ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์ด๊ณ  ํƒœ๊ทธ ์ž์ฒด๊ฐ€ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— margin:0 auto๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ ์ž์ฒด๋ฅผ ์ค‘์•™ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

  4. ์œ„์•„๋ž˜๋กœ ์žˆ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ๊ฐ„์˜ ์ƒํ•˜๋‹จ margin์€ ๊ฒน์น˜๊ฒŒ ์„ค๊ณ„ํ•ด๋†“์•˜๋‹ค. ์ด๋ฅผ ๋งˆ์ง„ ๋ณ‘ํ•ฉ ํ˜„์ƒ์ด๋ผ๊ณ  ํ•œ๋‹ค. ์ด ํ˜„์ƒ์€ ์ˆœ์ˆ˜ํ•œ ๋ธ”๋Ÿญ ๋ ˆ๋ฒจ์˜ ์š”์†Œ์—๊ฒŒ๋งŒ ์ ์šฉ์ด ๋œ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋งํฌ๋ฅผ ํ†ตํ•ด ํ™•์ธํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค.
    ** ์ถ”๊ฐ€์ ์ธ ํ•ด๊ฒฐ๋ฒ• : display:flow-root๊ฐ€ ์žˆ์ง€๋งŒ ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ์ด ๋–จ์–ด์ ธ ํ™•์ธํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋„๋ก ํ•œ๋‹ค.

  5. class๋ช…์€ ๋ฐ˜๋“œ์‹œ ๋ณด๊ณ  ํ•œ๋ฒˆ์— ์–ด๋–ค ํƒœ๊ทธ์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ๋„๋ก "์ง๊ด€์ "์œผ๋กœ ์ž‘์„ฑํ•  ๊ฒƒ์„ ๋‹น๋ถ€ํ•œ๋‹ค.

  6. Selector Specificity์€ ์Šคํƒ€์ผ ์ ์šฉ์˜ ์šฐ์„ ์ˆœ์œ„์™€ ๊ด€๋ จ๋œ ๋ฒ•์น™์ด๋‹ค. ์„ ํƒ์ž(Selector)์˜ ๊ฒฝ๋กœ๊ฐ€ ๊ตฌ์ฒด์ ์ผ์ˆ˜๋ก ๋†’์€ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฐ€์ง„๋‹ค. ์•„๋ž˜ ์ด๋ฏธ์ง€๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ๋„์›€์ด ๋  ๊ฒƒ์ด๋‹ค.

  1. ํƒœ๊ทธ์— ์ ์šฉํ•˜๋Š” attribute์ธ id๋Š” ์œ ์ผํ•˜๊ฒŒ ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ€์ผ ์†์„ฑ์„ ์ ์šฉํ•˜๋Š”๋ฐ ์ ํ•ฉํ•˜์ง€ ์•Š๋‹ค. ์Šคํƒ€์ผ์€ ๋˜๋„๋ก class๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜์ž!

  2. ์ฝ”๋“œ๋ฅผ ํ•œ๋ฒˆ์— ์จ๋†“๊ณ  ๊ณ ์น˜๋Š”๊ฑด ๋งˆ์ง€๋ง‰์— ๋ชจ๋‘ ์ˆ˜์ •ํ•˜๊ธฐ ํž˜๋“ค๊ธฐ ๋•Œ๋ฌธ์— ์†Œ๊ทœ๋ชจ๋กœ ๋งˆํฌ์—…ํ•˜๊ณ  ์Šคํƒ€์ผ ์ ์šฉ/ํ™•์ธ ํ›„ ์†Œ๊ทœ๋ชจ๋กœ ์ˆ˜์ • ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

  3. ๋ ˆ์ด์•„์›ƒ์„ ํŒŒ์•…ํ•  ๋•Œ ํฐ ๋ฐ•์Šค์—์„œ ์ž‘์€ ๋ฐ•์Šค ์ˆœ์œผ๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ๋งˆํฌ์—…ํ•˜๋ผ!

  1. ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์ถ”์ฒœํ•˜๋Š” ๋งˆํฌ์—… ์ˆœ์„œ โญ๏ธ
  1. ์ปจํ…์ธ ๋ถ€ํ„ฐ ๋ง‰ ์„œ๋‘˜๋Ÿฌ ๋„ฃ์ง€ ์•Š๊ณ  ์ „์ฒด์ ์ธ ๋ฉ์–ด๋ฆฌ๋ฅผ ๋จผ์ € ๋‚˜๋ˆ„๊ธฐ.
  2. ๊ตฌ๋ถ„์„ ์œ„ํ•ด ๊ฐ๊ฐ ์‹œ๊ฐ์ ์œผ๋กœ ํžŒํŠธ๋ฅผ ์ค˜์•ผํ•œ๋‹ค. ๋ฐฐ๊ฒฝ ์ƒ‰์„ ์ฃผ๊ณ  ์˜์—ญ์ด ํ•œ๋ˆˆ์— ๊ตฌ๋ถ„์ด ๋˜๊ฒŒ ๋งŒ๋“ค๊ธฐ
  3. ๋ ˆ์ด์•„์›ƒ ๊ด€๋ จ ์Šคํƒ€์ผ๋งŒ ์ ์šฉํ•œ๋‹ค. ์•ˆ์— ๋‚ด์šฉ๋ฌผ์„ ๋ง‰ ๋„ฃ๊ธฐ ์ „์— margin/ padding ๊ฐ™์€ ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ณต๊ฐ„ ๊ตฌ์„ฑํ•˜๊ธฐ
  4. type-selector๋ฅผ ์ด์šฉํ•œ reset CSS ๋งŒ๋“ค๊ธฐ (margin:0,padding:0 ๋“ฑ)
    ** inherit๋Š” ์‚ฌ์šฉํ•˜๋˜ initial์€ IE์˜ ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด ๋‹น๋ถ„๊ฐ„ ์‚ฌ์šฉ์„ ์ž์ œํ•˜๊ธฐ
  5. class selector๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ธ์„ธํ•œ ๋‚ด๋ถ€ ์Šคํƒ€์ผ ์ ์šฉํ•˜๊ธฐ


"๋น”์บ ํ”„" ์ด์ข…์ฐฌ ๊ฐ•์‚ฌ๋‹˜์˜ ํŠน๊ฐ• ์ •๋ฆฌ๋ฅผ ๋งˆ์น˜๋ฉฐ.. ๐Ÿ˜ญ

์†”์งํžˆ "๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ" ๊ณผ์ •์„ ํ•˜๊ธฐ ์ „์— HTML๊ณผ CSS์˜ ์ค‘์š”์„ฑ์„ ์žŠ๊ณ  Javascript๋งŒ ์ž˜ํ•˜๋ฉด ๋˜๊ฒ ์ง€๋ผ๋Š” ์ƒ๊ฐ๋งŒ ๊ฐ€์ง€๊ณ  ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ์ด๋ฒˆ ํŠน๊ฐ•์„ ํ†ตํ•ด ํ•œ๋ฒˆ ๋” HTML/CSS์˜ ์ค‘์š”์„ฑ์„ ์•Œ์•˜๋‹ค.
๋˜ํ•œ ํŠน๊ฐ•์„ ํ†ตํ•ด ๋‹ค์‹œ HTML/CSS์˜ ๊ธฐ์ดˆ์— ํฅ๋ฏธ๋ฅผ ๋Š๋ผ๊ฒŒ ๋˜์–ด ์ด 8์‹œ๊ฐ„์˜ ๊ฐ•์˜๊ฐ€ ์งง๊ฒŒ ๋Š๊ปด์งˆ ์ •๋„๋กœ ์žฌ๋ฏธ์žˆ์—ˆ๊ณ  ์ธ์ƒ ๊นŠ์—ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ด์ข…์ฐฌ ๊ฐ•์‚ฌ๋‹˜์˜ CSS๋ฅผ ํŠน๋ณ„ํ•œ ๊ด€์ ์œผ๋กœ ๋ณด๋Š” ๊ฒƒ์— ๋Œ€ํ•ด์„œ ์ •๋ง ์กด๊ฒฝ์Šค๋Ÿฌ์› ์œผ๋ฉฐ ๊ณ„์†ํ•ด์„œ ๋ฐœ์ „ํ•˜๋ ค๋Š” ๋ชจ์Šต์„ ๋ณด๊ณ  ์Šค์Šค๋กœ ๋ฐ˜์„ฑํ•˜๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

์ด๋ฒˆ ํŠน๊ฐ•์„ ๊ณ„๊ธฐ๋กœ ๊ณ„์† ๋ฐœ์ „ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•˜๋„๋ก ๋”์šฑ ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค.
์ธ์ƒ๊นŠ์€ ์ด๋ก ์˜ ๋Œ€ํ•œ ํŠน๊ฐ•๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ฐœ๋ฐœ์ž์˜ ํƒœ๋„๋ฅผ ํ•œ๋ฒˆ ๋” ๊ฐ€๋ฅด์ณ์ฃผ์‹  ์ด์ข…์ฐฌ ๊ฐ•์‚ฌ๋‹˜๊ป˜ ๋‹ค์‹œ ํ•œ๋ฒˆ ๊ฐ์‚ฌ์˜ ์ธ์‚ฌ๋ฅผ ์ „ํ•˜๊ณ  ์‹ถ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ