[TIL] CSS - Display

ํ…Œ๋””ยท2022๋…„ 6์›” 21์ผ
0

๐Ÿ–Œ๏ธDisplay

block, inline, inline-block
html์ด ๋ชจ๋“  ์š”์†Œ๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์— ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”๊ฐ€๋ฅผ ๊ฒฐ์ •์ง“๋Š” display๋ผ๋Š” ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค (์ •ํ™•ํžˆ๋Š” body ๋‚ด๋ถ€์— ๋“ค์–ด์˜ค๋Š” ์š”์†Œ๋“ค)
๊ธฐ๋ณธ์ ์œผ๋กœ inline ํ˜น์€ block ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค

block : ์–ธ์ œ๋‚˜ ์ƒˆ๋กœ์šด ๋ผ์ธ์—์„œ ์‹œ์ž‘ํ•˜๋Š” ์†์„ฑ
(ํ•ด๋‹น ๋ผ์ธ์˜ ๋ชจ๋“  ๋„ˆ๋น„๋ฅผ ์ฐจ์ง€ํ•˜๋Š” ์†์„ฑ)

  • ๋Œ€ํ‘œ์ ์ธ block ์†์„ฑ
    • h, ul, ol, p, div

inline : ์š”์†Œ์˜ ๋„ˆ๋น„๊ฐ€ ํ•ด๋‹น ์š”์†Œ์˜ ์ปจํ…์ธ  ๋งŒํผ๋งŒ ์ฐจ์ง€ํ•˜๋Š” ์†์„ฑ

  • ๋Œ€ํ‘œ์ ์ธ inline ์†์„ฑ
    • span, a, img

div : ๋‹ค๋ฅธ html ์š”์†Œ๋“ค์„ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์ฃผ๋Š” ๋Œ€ํ‘œ์ ์ธ block ์š”์†Œ
span : ํ…์ŠคํŠธ(์ปจํ…์ธ )์˜ ํŠน์ •๋ถ€๋ถ„์„ ๋ฌถ๋Š”๋ฐ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋Œ€ํ‘œ์ ์ธ ์†์„ฑ


๐Ÿ–Œ๏ธVisibility

์š”์†Œ์˜ ๋ชจ์Šต์„ ๋ณด์ด๊ฒŒ ํ•  ๊ฒƒ์ธ๊ฐ€ ๋ง๊ฒƒ์ธ๊ฐ€ (์š”์†Œ์˜ ๋ Œ๋”๋ง ์—ฌ๋ถ€ ๊ฒฐ์ •)

  • visible : ์š”์†Œ์˜ ๋ Œ๋”๋ง(ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋ณด์ด๊ฒŒ ํ•˜๋Š” ์†์„ฑ / ๊ธฐ๋ณธ๊ฐ’)
  • hidden : ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค
  • collapse : ํ–‰์ด๋‚˜ ์—ด์„ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•˜๋Š” ์†์„ฑ(ํ…Œ์ด๋ธ” ์ „์šฉ ์†์„ฑ)

์š”์†Œ๋ฅผ ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•

  1. visibility: hideen
  2. display : none
  3. opacity : 0
    opacity : ์š”์†Œ์˜ ํˆฌ๋ช…๋„๋ฅผ ์กฐ์ ˆํ•˜๋Š” ์†์„ฑ
    opacity์˜ ์„ค์ •๊ฐ’์€ 0~1๊นŒ์ง€(๋‹จ์œ„๋Š” ์†Œ์ˆ˜์  1์ž๋ฆฌ)

visibilitiy vs display (์š”์†Œ ์ˆจ๊ธธ๋•Œ ๊ธฐ์ค€)

  • display ๋Š” ํ•ด๋‹น ์š”์†Œ์˜ ๊ณต๊ฐ„๊นŒ์ง€ ๋ชจ๋‘ ์‚ฌ๋ผ์ง€์ง€๋งŒ

  • visibility๋Š” ํ•ด๋‹น ์š”์†Œ์˜ ๊ณต๊ฐ„์€ ๋‚จ๋Š”๋‹ค


๐Ÿ“•display๋ฅผ ํ™œ์šฉํ•œ ๋ฉ”๋‰ด๋“œ๋กญ๋‹ค์šด

HTML ์˜ˆ์ œ

<h1>๋“œ๋กญ๋‹ค์šด exam</h1>
<div class="dropdown">
    <span>๋งˆ์šฐ์Šค ์˜ฌ๋ฆฌ๋ฉด ๋“œ๋กญ๋‹ค์šด</span>
    <div class="dropdown-con">
        <p>๋“œ๋กญ๋‹ค์šด ๊ฒฐ๊ณผ!</p>
    </div>
</div>

CSS ์˜ˆ์ œ

.dropdown {
    display: inline-block;
    position: relative;
}
.dropdown-con {
    display: none;
    position: absolute;
    background-color: aqua;
    padding: 10px;
    color: white;
}
/* dropdown ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ ์š”์†Œ์— hover๋ฅผ ํ–ˆ์„๋•Œ
    .dropdown-con ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ ์š”์†Œ์— ์Šคํƒ€์ผ ๋ถ€์—ฌ 
*/
.dropdown:hover .dropdown-con {
    display: block;
}

๊ฒฐ๊ณผํ™”๋ฉด

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