[TIL] 1119 LikeLion๐Ÿฆ FES 15

cnsrn1874ยท2021๋…„ 11์›” 19์ผ
0

inline ์š”์†Œ์— position์ด๋‚˜ float์„ ์ฃผ๋ฉด?

inline ์š”์†Œ์˜ ํŠน์ง•

inline ์š”์†Œ๋“ค์—” ๋ช‡๊ฐ€์ง€ ํŠน์ง•์ด ์žˆ๋‹ค.

  • ์ปจํ…์ธ ๋งŒํผ์˜ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง„๋‹ค.
  • width์™€ height๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.
  • margin๊ณผ padding์€ ์ƒํ•˜๋ฅผ ์ œ์™ธํ•œ ์ขŒ์šฐ์—๋งŒ ์ ์šฉ๋œ๋‹ค.
    padding์€ ์ƒํ•˜๋„ ์ ์šฉ๋˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๊ธฐ๋งŒ ํ• ๋ฟ ์‹ค์ œ๋ก  ์ขŒ์šฐ๋งŒ ์ ์šฉ๋œ๋‹ค.

์ด๋Ÿฐ ํŠน์ง•์„ ๊ฐ€์ง„ inline ์š”์†Œ์— width, height, padding, margin์„ ์ ์šฉ์‹œํ‚ค๋ ค๋ฉด display: inline-block ๋˜๋Š” block์„ ๋ถ€์—ฌํ•˜๋Š” ์ˆ˜๋ฐ–์—” ์—†๋‹ค. ์ง€๊ธˆ๊นŒ์ง€๋Š” ๊ทธ๋ ‡๊ฒŒ ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ฐฉ๋ฒ•์ด ๋” ์žˆ์—ˆ๋‹ค.

MDN ๊ธฐ์ค€ inline ์š”์†Œ์ด์ง€๋งŒ inline-box๊ฐ™์€ ์„ฑ์งˆ์„ ๊ฐ€์ง„ <button>, <img>, <input>, <textarea>๋“ฑ์„ ์ œ์™ธํ•œ <a>, <span>, <label>, <small>, <strong> ํƒœ๊ทธ๋“ค๋กœ ์‹คํ—˜ํ•ด๋ณด์•˜๋‹ค.

	HTML
        <a href="">a tag</a>
        <span>span tag</span>
        <label for="">label tag</label>
        <small>small tag</small>
        <strong>strong tag</strong>

inline ํƒœ๊ทธ๋‹ต๊ฒŒ ์ปจํ…์ธ ๋งŒํผ์˜ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๋ฉด์„œ ํ•œ ์ค„ ์•ˆ์— ๋‚˜๋ž€ํžˆ ์ •๋ ฌ๋˜์–ด์žˆ๋‹ค. (๋ณด๊ธฐ ํŽธํ•˜๊ฒŒ border๋ฅผ ์ ์šฉํ–ˆ๋‹ค.)

์—ฌ๊ธฐ์— <a>๋ฅผ ํ•˜๋‚˜ ๋” ๋งŒ๋“ค์–ด์„œ padding: 25px;์„ ์ ์šฉ์‹œ์ผœ๋ดค๋‹ค. ๋‘๋ฒˆ์งธ <a>์—” ์ขŒ์šฐ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์ƒํ•˜์—๋„ ํŒจ๋”ฉ์ด ์ ์šฉ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ๊ทธ๋ ‡๊ฒŒ ๋ณด์ด๊ธฐ๋งŒ ํ•  ๋ฟ, ์œ„์ชฝ ํŒจ๋”ฉ์ด ๋ฌด์‹œ๋ผ์„œ ๋‹ค๋ฅธ ํƒœ๊ทธ๋“ค๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ฝ˜ํ…์ธ ์˜ baseline(๋นจ๊ฐ„ ์„ )์„ ๋”ฐ๋ผ ์ •๋ ฌ๋˜์–ด์žˆ๋‹ค.

๋ชจ๋“  ํƒœ๊ทธ์— padding: 50px;์„ ์ค€ ๋’ค ํ™”๋ฉด๋„ˆ๋น„๋ฅผ ์ค„์—ฌ ๊ฐœํ–‰๋˜๊ฒŒ ํ•œ๋‹ค๋ฉด ๊ฐ ํƒœ๊ทธ์˜ ์ƒํ•˜ padding ์˜์—ญ์ด ์นจ๋ฒ”๋‹นํ•˜๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

margin ๋˜ํ•œ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ค. ๋ชจ๋“  ํƒœ๊ทธ์— margin: 25px;์„ ์ค€ ๋’ค, ํ™”๋ฉด ๋„ˆ๋น„๋ฅผ ์ค„์—ฌ๋ณด๋ฉด ์ƒํ•˜ margin ์˜์—ญ์ด ์นจ๋ฒ”๋‹นํ•˜๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

position๊ณผ float ์ž…์žฅ~

์œ„์™€ ๊ฐ™์€ ํŠน์ง•์„ ๊ฐ€์ง„ inline ์š”์†Œ์— width, height, padding, margin์„ ์ œ๋Œ€๋กœ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด display: inline-block ๋˜๋Š” block์„ ์ค˜์•ผํ•œ๋‹ค๋Š” ๊ฑด ๋„ˆ๋ฌด๋‚˜๋„ ์ž˜ ์•Œ๊ณ ์žˆ๋Š” ์‚ฌ์‹ค์ด๋‹ค.

ํ•˜์ง€๋งŒ position ์ค‘ ์ผ๋ถ€ ์†์„ฑ(absolute, fixed)๊ณผ float์„ ๋ถ€์—ฌํ•ด๋„ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋‚ธ๋‹ค!

position

์œ„ ํƒœ๊ทธ๋“ค ์ค‘ <a>์—๋งŒ ์•„๋ž˜์˜ ์†์„ฑ์„ ๋ถ€์—ฌํ•ด๋ณด์ž.

position: absolute;
width: 100px;
height: 50px;
margin: 25px;
padding: 25px;

๋งˆ์น˜ block ์š”์†Œ์—๊ฒŒ ์†์„ฑ์„ ๋ถ€์—ฌํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ์ž˜ ์ ์šฉ๋˜์—ˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์ด๋Š” position: fixed;๋ฅผ ๋ถ€์—ฌํ•ด๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ค.

ํ•˜์ง€๋งŒ position: static ๋˜๋Š” relative ๋˜๋Š” sticky;๊ฐ€ ๋ถ€์—ฌ๋œ inline ์š”์†Œ์—๋Š” ์ ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.

float

<a>๋ฅผ ์„ธ ๊ฐœ ๋งŒ๋“ค์–ด์„œ
a tag1์— float: left;, a tag2์— float: right;, a tag3์— clear: both;๋ฅผ ๋ถ€์—ฌํ–ˆ๋‹ค.
a tag3๋ฅผ ์ œ์™ธํ•˜๊ณค position๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ž˜ ์ ์šฉ๋˜์—ˆ๋‹ค.

๊ฒฐ๋ก 

์ด์ œ position: absolute ๋˜๋Š” fixed or float: left ๋˜๋Š” right๊ฐ€ ๋ถ€์—ฌ๋œ inline ์š”์†Œ๋ผ๋ฉด,
ํฌ๊ธฐ๋‚˜ ์—ฌ๋ฐฑ์„ ์กฐ์ ˆํ•˜๊ธฐ ์œ„ํ•ด ๊ตณ์ด display: inline-block ๋˜๋Š” block์„ ๋ถ€์—ฌํ•˜์ง€ ์•Š์•„๋„ ๋˜๊ฒ ๋‹ค.


<a href=""> ๋ฌด๋ ฅํ™”์‹œํ‚ค๊ธฐ

<a href=""> ํƒœ๊ทธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํด๋ฆญ ์‹œ ์–ด๋”˜๊ฐ€๋กœ ์ด๋™์‹œํ‚ค๋Š” ๋งํฌ ์—ญํ• ์„ ํ•œ๋‹ค.
<a href="www.velog.io">๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ฒจ๋กœ๊ทธ ์‚ฌ์ดํŠธ๋กœ ์ด๋™ํ•˜๊ณ ,
<a href="#content">๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋ฌธ์„œ ๋‚ด์˜ content๋ผ๋Š” ์•„์ด๋””๋ฅผ ๊ฐ€์ง„ ํƒœ๊ทธ๋กœ ์Šคํฌ๋กค๋œ๋‹ค.
๋งˆํฌ์—… ๋‹จ๊ณ„๋ผ๋“ ๊ฐ€ ์–ด๋– ํ•œ ์ด์œ ๋กœ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์„ ๋ง‰๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธฐ๋Š”๋ฐ ์ด ๋„ค๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

๋ฌด๋ ฅํ™” ๋ฐฉ๋ฒ•

<a href="#">

ํŽ˜์ด์ง€์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ์ด๋™ํ•œ๋‹ค. ์ž˜๋ชป ๋ˆ„๋ฅด๊ธฐ๋ผ๋„ ํ•œ๋‹ค๋ฉด ์Šคํฌ๋กค์„ ๋‹ค์‹œ ํ•ด์•ผํ•˜๋ฏ€๋กœ ๋งค์šฐ ๊ท€์ฐฎ๋‹ค.

<a href="#none">

์•„์ด๋””๊ฐ€ none์ธ ํƒœ๊ทธ๋กœ ์ด๋™ํ•œ๋‹ค...์ง€๋งŒ ๊ทธ๋Ÿฐ ํƒœ๊ทธ๊ฐ€ ์—†์œผ๋ฉด ์•„๋ฌด ์ผ๋„ ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค.

<a href="javascript:;">

javascript:~~๋ผ๊ณ  ์ž‘์„ฑํ•˜๋ฉด ~~๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋ผ๋Š” ์˜๋ฏธ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์•„๋ฌด ๊ฒƒ๋„ ์•ˆ ์ ์–ด์คฌ์œผ๋ฏ€๋กœ ์•„๋ฌด ์ผ๋„ ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค.

<a href="javscript:void(0);">

void(0)์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋ผ๋Š” ๋œป์ด์ง€๋งŒ void(0)์€ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฏ€๋กœ ์•„๋ฌด ์ผ๋„ ์ผ์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค.

๋ฌด์—‡์„ ์“ธ๊นŒ

๊ฐœ์ธ์ ์œผ๋กœ HTML์€ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ, ๋งˆํฌ์—…์— ์ถฉ์‹คํ•ด์•ผ ํ•˜๋ฉฐ javascript๋ฅผ ํ†ตํ•œ ์กฐ์ž‘์€ ์™ธ๋ถ€ js ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌ๋˜์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ธ๋ผ์ธ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋„ฃ๋Š” ๊ฒŒ ์ฉ ์œ ์พŒํ•˜์ง€๋Š” ์•Š๋‹ค.
์–ด๋”˜๊ฐ€๋กœ ๋งํฌ๋˜์–ด์•ผ ํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ๋ฐ ๊ตณ์ด <a>๋ฅผ ์จ์•ผํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์–ด๋–ค ๊ฒŒ ์žˆ์„๊นŒ ์‹ถ๊ธฐ๋„ ํ•˜๊ณ , ๋งํฌ ์—ญํ• ์„ ํ•ด์•ผ ๋  ํƒœ๊ทธ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด <button>์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ ์ ˆํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.
๊ทธ๋ž˜๋„ ๊ตณ์ด ์จ์•ผํ•œ๋‹ค๋ฉด <a href="#none">์„ ์‚ฌ์šฉํ•˜๊ณ , ์–ด๋– ํ•œ ํƒœ๊ทธ์—๋„ ์•„์ด๋””๋กœ none์„ ์ฃผ์ง€ ์•Š์œผ๋ฉด ๋˜๋Š” ๊ฑฐ ์•„๋‹๊นŒ?
<a href="javascript:void(0);">์€ ๊ธธ์–ด์„œ ์ž‘์„ฑํ•˜๋Š”๋ฐ ๊ฑฐ๋ถ€๊ฐ ๋จผ์ € ๋“ ๋‹ค...


CSS๋กœ ์‚ผ๊ฐํ˜• ๊ทธ๋ฆฌ๊ธฐ

CSS๋กœ ์‚ฌ๊ฐํ˜•์€ ์ž์ฃผ ๊ทธ๋ ค๋ดค๋Š”๋ฐ ์‚ผ๊ฐํ˜•์€ ์–ด๋–ป๊ฒŒ ๊ทธ๋ ค์•ผ ํ• ๊นŒ?

์ด ์‚ฌ๊ฐํ˜•์˜ ๊ฐ€๋กœ, ์„ธ๋กœ ๊ธธ์ด๋Š” 200px์ด๋‹ค. div์— width: 200px; height: 200px์„ ๋ถ€์—ฌํ•ด์„œ ๋งŒ๋“ค์—ˆ์„๊นŒ? ์•„๋‹ˆ๋‹ค. ์ด ์‚ฌ๊ฐํ˜•์€ width: 0px; height: 0px; border: 100px;๋กœ ๋งŒ๋“ค์—ˆ๋‹ค.
border์˜ ์ƒ‰์„ ๋‹ค๋ฅด๊ฒŒ ์ฃผ๋ฉด ๊ตฌ๋ถ„ํ•˜๊ธฐ ์‰ฌ์šธ ๊ฒƒ์ด๋‹ค.

์ด๋ ‡๊ฒŒ ๋ณด๋‹ˆ ์ด ์‚ฌ๊ฐํ˜•์—” ์‚ผ๊ฐํ˜• 4๊ฐœ๊ฐ€ ๋ชจ์—ฌ์žˆ๋‹ค. ์ด์ œ ์—ฌ๊ธฐ์„œ ํ•œ๊ฐ€์ง€ ๊ณผ์ •๋งŒ ๋” ๊ฑฐ์น˜๋ฉด ์‚ผ๊ฐํ˜•์„ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋‹ค.
๋จผ์ € ์›ํ•˜๋Š” ๋ฐฉํ–ฅ์˜ ์‚ผ๊ฐํ˜•์„ ๊ณ ๋ฅธ ๋’ค์—, ํ•ด๋‹น ์‚ผ๊ฐํ˜• ๋ฐ˜๋Œ€์ชฝ border์˜ ์ƒ‰์„ none์œผ๋กœ ํ•˜๋“ ์ง€ ์•„๋‹ˆ๋ฉด ํ•ด๋‹น border๋ฅผ ์•„์˜ˆ ์—†์• ์ค˜๋„ ๋œ๋‹ค. ๊ทธ ๋’ค์— ์–‘ ์˜†์˜ border์˜ ์ƒ‰์„ transparent๋กœ ์ฃผ๋ฉด ์™„์„ฑ์ด๋‹ค.

HTML
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
CSS
            div{
                display: inline-block;
                width: 0px;
                height: 0px;
            }
            .one {
                border-top: 100px solid red;
                border-right: 100px solid transparent;
                border-bottom: 100px solid none;
                border-left: 100px solid transparent;
            }
            .two {
                border-top: 100px solid transparent;
                border-right: 100px solid yellow;
                border-bottom: 100px solid transparent;
                border-left: 100px solid none;
            }
            .three {
                border-top: 100px solid none;
                border-right: 100px solid transparent;
                border-bottom: 100px solid green;
                border-left: 100px solid transparent;
            }
            .four {
                border-top: 100px solid transparent;
                border-right: 100px solid none;
                border-bottom: 100px solid transparent;
                border-left: 100px solid blue;
            }

profile
๋‹น์‹ ์„ ํ•œ ์ค„๋กœ ์†Œ๊ฐœํ•ด๋ณด์„ธ์š”

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

comment-user-thumbnail
2021๋…„ 11์›” 20์ผ

์‚ผ๊ฐํ˜• ์žฌ๋ฐŒ์–ด๋ณด์ด๋„ค์šฅใ…‹ใ…‹ใ…‹ใ…‹

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ