๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Computer Science

CS >> Udemy ๊ฐ•์ขŒ ์ •๋ฆฌ

1. <div>

It stands for a content division element. It split up or divide your content into separate containers.
์ฆ‰, <div>ํƒœ๊ทธ๋Š” HTML ๋ฌธ์„œ์—์„œ ํŠน์ • ์˜์—ญ(division)์ด๋‚˜ ๊ตฌํš(section)์„ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

cssํŒŒ์ผ์—์„œ ๋†’์ด๋ฅผ 100px๋กœ ์ •์˜ํ•œ <div>ํƒœ๊ทธ๋ฅผ index.html์— ์ž…๋ ฅํ•ด์ฃผ๋ฉด ์™ผ์ชฝ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ ์ƒˆ๋กœ์šด ์˜์—ญ์ด ์ƒ๊ธฐ๊ฒŒ ๋˜๊ณ ,

  <body>
    <div></div>
    <h1>I'm Sophia.</h1>
    <p>a M.S student.</p>
  </body>

<div>ํƒœ๊ทธ ์•ˆ์— ๋‹ค๋ฅธ ์š”์†Œ๋“ค์„ ๋„ฃ์–ด์ฃผ๊ฒŒ ๋˜๋ฉด, ์•„๋ž˜์˜ ์˜ค๋ฅธ์ชฝ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ์ƒˆ๋กœ ์ƒ๊ธด ์˜์—ญ์•ˆ์— <h1>๊ณผ <p>๋‚ด์šฉ์ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  <body>
    <div>
      <h1>I'm Sophia.</h1>
      <p>a M.S student.</p>
    </div>
  </body>

1.1 Overriding devault values & margin & margin-top

์œ„์— ๋ณด์ด๋Š” ์Šคํฌ๋ฆฐ์ƒท์—์„œ ์ƒˆ๋กœ์ƒ๊ธด <div>๋ฐ•์Šค์˜ ์ƒํ•˜์ขŒ์šฐ์— ์ž‘์€ ์—ฌ๋ฐฑ์ด ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ์š”.

์ด๋ฅผ ์œ„์™€ ๊ฐ™์ด ์‚ฌ๋ฐฉ์œผ๋กœ ํ™”๋ฉด์— ๊ฝ‰์ฐจ๋Š” <div>์˜์—ญ์„ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋ฉด, cssํŒŒ์ผ์—์„œ margin์„ ์ˆ˜์ •ํ•ด์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
์™œ๋ƒํ•˜๋ฉด ์ด๋Š” ์›๋ž˜์˜ htmlํŒŒ์ผ์—์„œ default value๋กœ ์ƒํ•˜์ขŒ์šฐ์˜ ์—ฌ๋ฐฑ์„ 8px๋กœ ์„ค์ •ํ•ด๋†จ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”!

์ƒˆ๋กœ ๋งŒ๋“  <div>ํƒœ๊ทธ์— background-color๋ฅผ ์ž…ํžˆ๊ณ  '๊ฐœ๋ฐœ์ž๋ณด๊ธฐ'๋ฅผ ํ†ตํ•ด default value๋ฅผ ํ™•์ธํ•ด๋ณด๋‹ˆ ์•„๋ž˜์˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ์›นํ™”๋ฉด์— ๋นˆ๊ณต๊ฐ„์ด ์ƒ๊น๋‹ˆ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด cssํŒŒ์ผ์„ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด, ์›ํ•˜๋Š” ํ˜•์‹์˜ ๋””์ž์ธ์ด ๋‚˜์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

div {   
    background-color: #FDEFF4;
}
body {  
    margin: 0;
}
h1 { 
    margin-top: 0;
}
  • margin :
  • margin-top :

1.2 margin & border & padding์˜ ์ฐจ์ด์ ?

  • { padding : 20px; }
  • { margin : 10px; }
  • { border : 10px; }

1.3 CSS Display ์†์„ฑ

  1. Block : block ์†์„ฑ์„ ๊ฐ€์ง„ <p>์˜ ๊ฒฝ์šฐ ์œ„์˜ ํ•‘ํฌ์ƒ‰ ๋ธ”๋Ÿญ์ฒ˜๋Ÿผ width์™€ height์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์œผ๋‚˜, inline ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ๋ฌด์กฐ๊ฑด ํ•œ์ค„์„ ์ฐจ์žํ•ด๋ฒ„๋ฆฝ๋‹ˆ๋‹ค.
  2. Inline : inline ์†์„ฑ์„ ๊ฐ€์ง„ <span>์˜ ๊ฒฝ์šฐ ์œ„์˜ ์ดˆ๋ก์ƒ‰ ์‚ฌ๊ฐํ˜•์ฒ˜๋Ÿผ ๊ธ€์ž ํฌ๊ธฐ์™€ ๊ฐ™์ด ๋‹ด๊ณ ์ž ํ•˜๋Š” ์ปจํ…์ธ ์˜ ๋‚ด์šฉ๋งŒํผ์˜ ํฌ๊ธฐ๋งŒ ์ ์œ ํ•  ์ˆ˜ ์žˆ์œผ๋‚˜, block์ฒ˜๋Ÿผ ์›ํ•˜๋Š” ๋Œ€๋กœ width์™€ height์†์„ฑ์„ ๋ฐ”๊พธ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” inline ์†์„ฑ์„ ๊ฐ€์ง„ ์นœ๊ตฌ๋“ค์ž…๋‹ˆ๋‹ค.
    1. Spans <span>
    2. Images <img>
    3. Anchors <a>
  3. Inline-Block : ์–˜๋Š” ์œ„์˜ ๋‘๊ฐ€์ง€๋ฅผ ์งฌ๋ฝ•ํ•œ ์• ๋ผ์„œ (1) width, height๊ณผ ๊ฐ™์€ ์†์„ฑ์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, (2) ํ•œ์ค„์„ ๋‹ค ์ฐจ์ง€ํ•˜์ง€ ์•Š๊ณ  ์ฝ˜ํ…์ธ ์™€ ์ •ํ•ด๋†“์€ ํฌ๊ธฐ๋งŒํผ์˜ ๊ณต๊ฐ„๋งŒ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค!!๐Ÿง
  4. None

ํŠน์ • ์†์„ฑ์„ ๊ฐ€์ง„ tag๋“ค์ด ์žˆ์œผ๋‚˜ display์†์„ฑ์„ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด ์–ธ์ œ๋“ ์ง€ ์›ํ•˜๋Š” ๋Œ€๋กœ ๋””์ž์ธ์„ ๋ฐ”๊ฟ€ ์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด์„œ, ๋ธ”๋Ÿญ์„ฑ์งˆ์„ ๊ฐ€์ง„ <div>๋ฅผ ์‚ฌ์šฉํ•˜์˜€์œผ๋‚˜

{ display: inline }์„ ํ†ตํ•ด ๋‘๊ฐœ์˜ ์ปจํ…์ธ ๋ฅผ ๋‚˜๋ž€ํžˆ ๋ณด์—ฌ์ค„ ์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

1.4 CSS positioning

  1. Positioning
    1. Static : defulat value
    2. Relative
      • Coordinates
        1. Top
        2. Bottom
        3. Left
        4. Right
    3. Absolute : Adding a margin to parent elements! ์ฆ‰ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ปจํ…์ธ ์˜ ์œ„์น˜๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ ˆ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜๋  ์š”์†Œ๋Š” ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์œ„์น˜ ์ง€์ • ์กฐ์ƒ (์ฆ‰, static์ด ์•„๋‹Œ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์กฐ์ƒ) ์„ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜๋˜๋Š”๋ฐ, ๊ทธ๋Ÿฐ ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ดˆ๊ธฐ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์ด ๊ธฐ์ค€์ด ๋ฉ๋‹ˆ๋‹ค.
    4. Fixded : ํŽ˜์ด์ง€์— ๋งž๊ฒŒ ๊ฐ™์ด ์›€์ง์ด๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๋ฌด์กฐ๊ฑด ํ•œ ์œ„์น˜์— ๊ณ ์ •๋œ ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

1.5 Element๋ฅผ ์ค‘์•™์— ๋†“์œผ๋ ค๋ฉด?

  1. { text-align: center } : ๋ฌธ์ž๋ฅผ ์ค‘์•™์— ์œ„์น˜ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

  2. { margin: 0 auto }(0: ์ƒํ•˜์— ์ ์šฉ, auto: ์ขŒ์šฐ์— ์ ์šฉ) : ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ์•„์„œ ์ ์ ˆํ•œ ์—ฌ๋ฐฑ ํฌ๊ธฐ๋ฅผ ์„ ํƒํ•˜๊ธธ ์›ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์–ด๋–ค ์š”์†Œ๋ฅผ ์ค‘์•™ ์ •๋ ฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ display๊ฐ€ inline-block์œผ๋กœ ์ง€์ •์ด ๋˜์–ด์žˆ์„๋•, ์ ์šฉํ•  ์ˆ˜ ์—†๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

    • e.g.
      html ํŒŒ์ผ โฌ‡๏ธŽ
      h1 { 
        margin: 0 auto; width: 100px; 
        background-color: pink; 
      }
      css ํŒŒ์ผ โฌ‡๏ธŽ
      <body> 
          <h1>Hello World</h1> 
      </body>

1.6 ํฐํŠธ ์‚ฌ์ด์ฆˆ ๋ฐ”๊พธ๊ธฐ

  • 1em : 1em์€ 16px์ด๋ž‘ ๊ฐ’์ด ๋˜‘๊ฐ™์Šต๋‹ˆ๋‹ค.
  • 1px
  • 1rem
        h1 {
         font-size: 1rem; 
        }

1.7 float property

float์€ "๋œจ๋‹ค"๋ผ๋Š” ๋œป์„ ๊ฐ€์ง„ ๊ฒƒ์ฒ˜๋Ÿผ, ์–ด๋–ค '์š”์†Œ'๋ฅผ ๋œจ๊ฒŒ ๋งŒ๋“ ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰ ์–ด๋–ค ๋ฌผ์ฒด๊ฐ€ ๋ฌผ์œ„์— ๋œจ๋“ฏ์ด ๊ธฐ์กด์— ๋งŒ๋“ค์–ด๋†“์€ ์—ฌ๋Ÿฌ์š”์†Œ๋“ค์˜ ํ๋ฆ„์—์„œ ์›ํ•˜๋Š” ๊ฒƒ์„ ๋นผ์„œ ๋œจ๊ฒŒ ๋งŒ๋“ ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ธฐ์กด์˜ ํ๋ฆ„์—์„œ ๋นผ๋‚ธ ์š”์†Œ ๋ฅผ ์™ผ์ชฝ์— ๋„์šธ ๊ฒƒ์ธ์ง€, ์˜ค๋ฅธ์ชฝ์— ๋„์šธ ๊ฒƒ์ธ์ง€ ์— ๋”ฐ๋ผ์„œ css ์ฝ”๋“œ๊ฐ€ ๋‹ฌ๋ผ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.