๊ณผ์ œ ๋ฆฌ๋ทฐ_11/5

yoojinparkยท2021๋…„ 11์›” 6์ผ
0

๐Ÿšฉ๊ธˆ์š”์ผ์€ ํ•œ์žฌํ˜„ ์„ ์ƒ๋‹˜์˜ ์ˆ˜์—… ๋ ˆ์ด์•„์›ƒ ์œ„์ฃผ์˜ ์ˆ˜์—…์ด ์ง„ํ–‰๋๋‹ค.
๋ ˆ์ด์•„์›ƒ์„ ์œ„ํ•ด ๊ทธ ์ค‘์‹ฌ์ด ๋˜๋Š” ๋ฐ•์Šค๋ชจ๋ธ๊ณผ ์ •๋ ฌ์ด ๋งค์šฐ๋งค์šฐ๋งค์šฐ ์ค‘์š”ํ•œ๊ฑฐ ๊ฐ™๋‹ค!
๊ณผ์ œ(?)๋Š” ์•„๋‹ˆ์—ˆ์ง€๋งŒ, ์ˆ˜์—…์ค‘์— ๋„ค์ด๋ฒ„ ํšŒ์›๊ฐ€์ž…๋ž€์„ ๋งŒ๋“ค์—ˆ๋‹ค.
์—„์ฒญ ๊ฐ„๋‹จํ•ด ๋ณด์ด๋˜ ๋ ˆ์ด์•„์›ƒ์ธ๋ฐ, ํ•˜๋‚˜๋ฅผ ๊ณ ์น˜๋ฉด ํ•˜๋‚˜๊ฐ€ ๋‹ฌ๋ผ์ง€๊ณ ....
๊ทธ๊ฒŒ 11์›” 5์ผ ๋ฆฌ๋ทฐ๋ฅผ 11์›” 6์ผ์— ์˜ฌ๋ฆฌ๋Š” ์ด์œ ์ด๊ธฐ๋„ ํ•˜๋‹ค.

๋งํฌํ…์ŠคํŠธ


์šฐ์„  ์–ด๋ ค์› ๋˜ ๋ถ€๋ถ„๋“ค์„ ์‚ดํŽด๋ณด๋ฉด,

1. ๊ทธ๋ฆผ์ด ์•ˆ๋“ค์–ด ๊ฐ„๋‹ค.

์•„์ด๋”” ๋น„๋ฐ€๋ฒˆํ˜ธ ์ฐพ๊ธฐ ์•ž์— ์ž๋ฌผ์‡  ๋ชจ์–‘์˜ ๊ทธ๋ฆผ์ด ์žˆ๋‹ค.
์ฒ˜์Œ์— ๊ฐ€์ƒ์š”์†Œ ์„ ํƒ์ž๋กœ ::before์„ ์จ์„œ ์˜ฌ๋ฆฌ๊ณ  ์‹ถ์—ˆ๋‹ค.

.find_id::before {}
	

๊ทธ๋Ÿฐ๋ฐ, ๊ทธ๋ฆผ์ด ์•ˆ๋ณด์ธ๋‹ค??
๋ถ„๋ช… ์ฝ”๋“œ์•ˆ์—๋„ ์žˆ๊ณ , ํ™”๋ฉด์œผ๋กœ ํด๋ฆญ๋„ ๋˜๋Š”๋ฐ ์‚ฌ์ง„์ด ์•ˆ๋ณด์˜€๋‹ค.
์ด์œ ๋Š”? ์‚ฌ์ง„์ด ๋„ˆ๋ฌด ์ปค์„œ ํ•˜์–€ ๋ฐ”ํƒ• ๋ถ€๋ถ„๋งŒ ๋‚˜์˜จ๊ฒƒ์ด๋‹ค.

๐Ÿ’กbackground-size:contain
background-size:contain ์ปจํ…์ธ ์˜ ๊ฐ€๋กœ์„ธ๋กœ ๋น„๋ฅผ ์œ ์ง€ํ•˜๋ฉด์„œ ์ฝ˜ํ…์ธ ๊ฐ€ ๋ฐ•์Šค ๋‚ด๋ถ€์— ๋“ค์–ด๊ฐ€๋„๋ก ํฌ๊ธฐ๋ฅผ ์กฐ์œจํ•ด ์ค€๋‹ค!


2. button๊ณผ a ๋ญ˜ ๋„ฃ์–ด์•ผ ๋˜๋‚˜??

๋กœ๊ทธ์ธ ํ• ๋•Œ ํ•ด๋‹น ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์•„์ด๋””์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ž€์œผ๋กœ ๋„˜์–ด๊ฐ„๋‹ค.
๋‹น์—ฐํžˆ ๋ฒ„ํŠผ์ด๋‹ˆ ๋ฒ„ํŠผ์„ ์“ธ๊นŒ?

๐Ÿ’กbutton๊ณผ aํƒœ๊ทธ์˜ ์ฐจ์ด์ 
๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ button๊ณผ a์˜ ์ฐจ์ด์ ์„ ์•Œ๋ ค์ฃผ์…จ๋‹ค.
button์€ ๊ธฐ๋Šฅ์ ์œผ๋กœ ๋ญ”๊ฐ€ ์ œ์ถœํ•˜๊ฑฐ๋‚˜, ๋ฆฌ์…‹ํ•˜๋Š” ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ์ž‘๋™ํ•ด์•ผ ํ• ๋•Œ ์“ด๋‹ค.
a๋Š” ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•ด์•ผ ํ• ๋•Œ ์“ด๋‹ค.

ํ™”๋ฉด์„ ๋ณด๋ฉด, ์ € ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํ™”๋ฉด์ด ์ด๋™ํ•œ๋‹ค.
๊ทธ๋ž˜์„œ a ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

<a href="" class="link-login"><img src="../images/title.png" alt="๋„ค์ด๋ฒ„" class="naver">๋กœ๊ทธ์ธ</a>
        <section class="find">
            <img src="../images/lock.png" alt="" class= "lock">
            <a href="#" class="find_id">์•„์ด๋””</a>
            <a href="#">๋น„๋ฐ€๋ฒˆํ˜ธ์ฐพ๊ธฐ</a>
        </section>
        <section class="login">
            <img src="../images/user.png" alt="์‚ฌ์šฉ์ž" class="user">
            <a href="#">ํšŒ์›๊ฐ€์ž…</a>
        </section>

    </article>
</body>
</html>


3.์ •๋ ฌ๋ฌธ์ œ

์•„๋‹ˆ...
๊ฐ€์žฅ ๋จธ๋ฆฌ๊ฐ€ ์•„ํŒ ๋˜ ๋ฌธ์ œ์˜€๋‹ค.
html๋กœ ๊ตฌ์กฐ๋ฅผ ์งœ๊ณ , css๋กœ ์Šคํƒ€์ผ์„ ๋งŒ๋“œ๋Š”๋ฐ, ํ•˜๋‚˜๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ํ•˜๋‚˜๊ฐ€ ๊ฐ€๊นŒ์ด ๋ถ™์–ด ์žˆ๊ณ ,
margin์ด๋‚˜ padding์œผ๋กœ ์กฐ์ ˆํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์ „์ฒด์ ์ธ ํฌ๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง€๊ฑฐ๋‚˜, ๋ฌด๋„ˆ์ง€๊ฑฐ๋‚˜..
๊ณ„์† ๊พธ์ค€ํžˆ ๋‹นํ™ฉ์Šค๋Ÿฌ์šด ์ƒํ™ฉ์ด์—ˆ๋‹ค...

๐Ÿ’กvertical-aligh
์ด๋ฒˆ์— ์ƒˆ๋กœ ์•Œ๊ฒŒ๋œ ์ˆ˜์ง ์ •๋ ฌ์„ ํ•  ์ˆ˜์žˆ๋Š” ๊ธฐ๋Šฅ์ด๋‹ค.
vertical-aligh:top์œผ๋กœ ๋‘๊ณ , margin-top์œผ๋กœ ์กฐ์œจํ•˜๋ฉด ์œ„์—์„œ ๋ถ€ํ„ฐ ์š”์†Œ๊ฐ€ ๋–จ์–ด์ง€๋Š” ๊ฑฐ๋ฆฌ๋ฅผ
์กฐ์œจํ•  ์ˆ˜ ์žˆ๋‹ค.

 .naver {
            width: 60px;
            height: 12px;
            vertical-align: top;
            margin-top: 3px;
            margin-right: 5px;
          }

*******

์ด๋ฒˆ์— ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋‹ค๋ฅธ ๋ถ„๋“ค ์ฝ”๋“œ๋ฅผ ๋งŽ์ด ๋ณผ ์ˆ˜์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.
๊ทธ๋Ÿฌ๋ฉด์„œ ์•„์˜ˆ ์ƒˆ๋กœ์šด ๋ฐฉํ–ฅ์œผ๋กœ ์ „๊ฐœํ•  ์ˆ˜๋„ ์žˆ์–ด์„œ ์ข€ ์‹ ์„ ํ•˜๊ณ , ์žฌ๋ฐŒ์—ˆ๋‹ค.
๊ทธ๋Ÿฌ๋ฉด์„œ ์Šคํ„ฐ๋””์˜ ํ•„์š”์„ฑ์„ ๋Š๋ผ๊ฒŒ ๋˜๊ณ ... ๋‹ค์Œ์ฃผ๋ถ€ํ„ฐ๋Š” ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํ„ฐ๋””๋ฅผ ๊ตฌ์„ฑํ–ˆ๋‹ค.
๋‹ค๋“ค ์œˆ์œˆ ํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํ„ฐ๋””๊ฐ€ ๋˜๊ธฐ๋ฅผ!!!

profile
๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๋Š” ๊ฐœ๋ฆฐ์ด์ž…๋‹ˆ๋‹ค.

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