๐Ÿ“’ [ TIL ] 2022.05.04_13์ผ์ฐจ # ์ธ์Šคํƒ€ UIํด๋ก (4)

๋ฌธ๋ช…์ฃผยท2022๋…„ 5์›” 4์ผ
0
post-thumbnail

[ 2022-05-04 (์ˆ˜) ์˜ค๋Š˜์˜ TIL ]

[ Today Project ]

  • ์ธ์Šคํƒ€๊ทธ๋žจ UIํด๋ก  ๋ฐฑ์—”๋“œ๊ฐœ๋ฐœ+ ํ”„๋ก ํŠธ ์ถ”๊ฐ€๊ฐœ๋ฐœ
    : ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋Š” ํŒ€ํ”„๋กœ์ ํŠธ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

[ Today Learn ]

  • ๋ฏธํกํ•˜๊ฒŒ ์ •๋ฆฌ๋œ html ๋ฐ CSS ์ถ”๊ฐ€ ๊ฐœ๋ฐœ
  • ๋กœ๊ทธ์ธํŽ˜์ด์ง€, ๊ฐœ์ธํŽ˜์ด์ง€ ์ถ”๊ฐ€ ๊ฐœ๋ฐœ

โœ๏ธ ๋‚ด๊ฐ€ ๋ฐฐ์šด๊ฒƒ, ์–ป์€๊ฒƒ

ํƒœ์ธ๋‹˜๊ป˜์„œ ๋กœ๊ทธ์ธํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“œ์…จ๋Š”๋ฐ ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฌธ์ œ๋กœ ์ธํ•ด ๋‚ด๊ฐ€ ๋‹ค์‹œ ์ž‘์—…ํ•˜์˜€๋‹ค.
1) ์™ผ์ชฝ ํฐ์ผ€์ด์Šค์ด๋ฏธ์ง€์™€ ์•ˆ์— ๋“ค์–ด๊ฐ€์•ผํ•  ์ด๋ฏธ์ง€๊ฐ€ ๊ฒน์น˜์ง€์•Š๋Š” ์˜ค๋ฅ˜
2) ์™ผ์ชฝ์˜ ์ด๋ฏธ์ง€์™€ ์˜ค๋ฅธ์ชฝ์˜ ์ž…๋ ฅ์ฐฝ์˜ ์ •๋ ฌ ์˜ค๋ฅ˜
3) Footer ๊ฐœ๋ฐœ

  • 1)๋ฒˆ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

๐Ÿงฉ ์ ์šฉ ์˜ˆ์‹œ

position: ansolute์™€ x-index: 1์„ ์ด์šฉํ•˜์—ฌ ํฐ์ผ€์ด์Šค์ด๋ฏธ์ง€๊ฐ€ ํ•ญ์ƒ ์ธ์Šคํƒ€์ด๋ฏธ์ง€๋ณด๋‹ค ์œ„๋กœ ์ •๋ ฌ๋  ์ˆ˜ ์žˆ๊ฒŒ ์ ์šฉํ•˜์˜€๋‹ค.

<div class="item1" style="margin-right: 100px">
            <div class="phone" style="position: absolute; top:0; ">
                <img src="\static\images\iphone2.png"
                     style="x-index: 1; height: 700px; margin-top: 70px; margin-right: 50px;">
            </div>
            <div class="photo">
                <img src="\static\images\login01.png" alt=""
                     style="width: 280px; height: 550px; margin-left: 211px;">
            </div>
</div>
  • 2)๋ฒˆ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

๐Ÿงฉ ์ ์šฉ ์˜ˆ์‹œ

์•„๋ž˜์™€ ๊ฐ™์ด ์ด๋ฏธ์ง€๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„(ํŒŒ๋ž€๊ณต๊ฐ„)์ด ๋„ˆ๋ฌด ์ปค์„œ ์˜ค๋ฅธ์ชฝ์˜ ์ž…๋ ฅ์ฐฝ์˜ input๊นŒ์ง€ ์ž๋ฆฌ๋ฅผ ์นจ๋ฒ”ํ•ด์„œ ์นจ๋ฒ”ํ•œ ๊ณณ ์œ„๋กœ๋Š” ์ปค์„œ๊ฐ€ ๋งŒ๋“ค์–ด ์ง€์ง€ ์•Š์•„์„œ ์ž…๋ ฅ์„ ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌ๋œ div์— position: relative๋ฅผ ์ ์šฉํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž…๋ ฅ์ฐฝ์˜ ๋ฐ‘์œผ๋กœ ์ •๋ ฌ๋  ์ˆ˜ ์žˆ๊ฒŒํ•˜์—ฌ ์˜ค๋ฅ˜๋ฅผ ๊ณ ์น  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

<div class="item2" style="margin-right: 60px; position: relative ">

[๐Ÿ‘ ์˜ค๋Š˜์˜ ๊ฒฐ๊ณผ๋ฌผ ]

  • ๋กœ๊ทธ์ธํŽ˜์ด์ง€
  • ๊ฐœ์ธํŽ˜์ด์ง€

๐ŸŒฑ ๋Š๋‚€ ์ 

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

๐ŸŽ ์ž์„ธํ•œ ์ฝ”๋“œ๋Š” Moonmoo ์— ๊ฒŒ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค

profile
ํ•˜๋ฃจ ํ•œ๊ฑธ์Œ์”ฉ ๊พธ์ค€ํžˆ ๋‚˜์•„๊ฐ€๋Š” ๊ฐœ๋ฐœ์ž๐Ÿ™†โ€โ™€๏ธ https://github.com/Moonmooj

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

๊ด€๋ จ ์ฑ„์šฉ ์ •๋ณด