css position

sodalite1204ยท2021๋…„ 11์›” 2์ผ
0

position์†์„ฑ

์š”์†Œ์— ๋Œ€ํ•˜์—ฌ ๊ธฐ์ค€์œ„์น˜๋กœ๋ถ€ํ„ฐ ๋ฐฐ์น˜ํ•  ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ.
css์—์„œ

  • relative
    ์š”์†Œ์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜(์›์œ„์น˜)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๋ฅผ ์ง€์ •
    ๐Ÿ–ฅ selector๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์™ผ์ชฝ๊ณผ ์œ„์—์„œ 10px๋งŒํผ ๋–จ์–ด์ง€๊ฒŒ ํ•˜๊ณ  ์‹ถ์„๋•,
       ์•„๋ž˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์ž‘์„ฑ!
       selector {
          position: relative; //secector์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ง€์ •
          top: 10px; //secector์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์—์„œ 10px๋งŒํผ ๋„์›€
          left: 10px; //secector์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์™ผ์ชฝ์—์„œ10px๋งŒํผ ๋„์›€
        }
  • absolute
    relative๋ฅผ ๊ฐ€์ง„ ๋ถ€๋ชจ๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ, ๋ถ€๋ชจ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ ˆ๋Œ€์ ์ธ ์œ„์น˜๋ฅผ ์ง€์ •
    ๐Ÿ–ฅ ๋ถ€๋ชจ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์™ผ์ชฝ๊ณผ ์œ„์—์„œ 10px๋งŒํผ ๋–จ์–ด์ง€๊ฒŒ ํ•˜๊ณ  ์‹ถ์„๋•,
       ์•„๋ž˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์ž‘์„ฑ!
       
       ๋ถ€๋ชจselector { 
       	  position: relative; //secector์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ง€์ •
        }
       
       selector {
          position: absolute; //๋ถ€๋ชจsecector๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜์ง€์ •
          top: 10px; //๋ถ€๋ชจsecector์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์—์„œ 10px๋งŒํผ ๋„์›€
          left: 10px; //๋ถ€๋ชจsecector์˜ ์ผ๋ฐ˜์ ์ธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์™ผ์ชฝ์—์„œ10px๋งŒํผ ๋„์›€
        }
  • fixed
    ๋ˆˆ์— ๋ณด์ด๋Š” ๋ธŒ๋ผ์šฐ์ € ๋งŒํผ, ํ™”๋ฉด๋‚ด์—์„œ ์œ„์น˜๋ฅผ ์ง€์ •
    โžก๏ธ ์Šคํฌ๋กค๋ฐ”๋ฅผ ์‚ฌ์šฉํ•ด ์ด๋™์„ ์‹œ์ผœ๋„ ๊ณ ์ •๋˜์–ด ์žˆ๋‹ค.
    ๐Ÿ–ฅ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ selector๋ฅผ ์™ผ์ชฝ๊ณผ ์œ„์—์„œ 10px๋งŒํผ ๋–จ์–ด์ง€๊ฒŒ ํ•˜์—ฌ ์‹ถ์„๋•,
       ์•„๋ž˜ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์ž‘์„ฑ!
       selector {
          position: fixed; //๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜์—ฌ ๊ณ ์ •
          top: 10px; //๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์—์„œ 10px๋งŒํผ ๋„์›€
          left: 10px; //๋ธŒ๋ผ์šฐ์ €๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์™ผ์ชฝ์—์„œ10px๋งŒํผ ๋„์›€
        }
profile
์ดˆ๋ณด ๊ฐœ๋ฐœ์ž!

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