block, inline, inline-block
html์ด ๋ชจ๋ ์์๋ ์น ๋ธ๋ผ์ฐ์ ์ ์ด๋ป๊ฒ ๋ณด์ด๋๊ฐ๋ฅผ ๊ฒฐ์ ์ง๋ display๋ผ๋ ์์ฑ์ ๊ฐ์ง๊ณ ์๋ค (์ ํํ๋ body ๋ด๋ถ์ ๋ค์ด์ค๋ ์์๋ค)
๊ธฐ๋ณธ์ ์ผ๋ก inline ํน์ block ์์ฑ์ ๊ฐ์ง๊ณ ์๋ค
block
: ์ธ์ ๋ ์๋ก์ด ๋ผ์ธ์์ ์์ํ๋ ์์ฑ
(ํด๋น ๋ผ์ธ์ ๋ชจ๋ ๋๋น๋ฅผ ์ฐจ์งํ๋ ์์ฑ)
h
, ul
, ol
, p
, div
inline
: ์์์ ๋๋น๊ฐ ํด๋น ์์์ ์ปจํ
์ธ ๋งํผ๋ง ์ฐจ์งํ๋ ์์ฑ
span
, a
, img
div
: ๋ค๋ฅธ html ์์๋ค์ ํ๋๋ก ๋ฌถ์ด์ฃผ๋ ๋ํ์ ์ธ block ์์
span
: ํ
์คํธ(์ปจํ
์ธ )์ ํน์ ๋ถ๋ถ์ ๋ฌถ๋๋ฐ ์์ฃผ ์ฌ์ฉ๋๋ ๋ํ์ ์ธ ์์ฑ
์์์ ๋ชจ์ต์ ๋ณด์ด๊ฒ ํ ๊ฒ์ธ๊ฐ ๋ง๊ฒ์ธ๊ฐ (์์์ ๋ ๋๋ง ์ฌ๋ถ ๊ฒฐ์ )
- visible : ์์์ ๋ ๋๋ง(ํด๋น ์์๋ฅผ ๋ณด์ด๊ฒ ํ๋ ์์ฑ / ๊ธฐ๋ณธ๊ฐ)
- hidden : ํด๋น ์์๋ฅผ ๋ณด์ด์ง ์๊ฒ ํ๋ค
- collapse : ํ์ด๋ ์ด์ ๋ณด์ด์ง ์๊ฒ ํ๋ ์์ฑ(ํ ์ด๋ธ ์ ์ฉ ์์ฑ)
opacity
: ์์์ ํฌ๋ช
๋๋ฅผ ์กฐ์ ํ๋ ์์ฑdisplay
๋ ํด๋น ์์์ ๊ณต๊ฐ๊น์ง ๋ชจ๋ ์ฌ๋ผ์ง์ง๋ง
visibility
๋ ํด๋น ์์์ ๊ณต๊ฐ์ ๋จ๋๋ค
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;
}
๊ฒฐ๊ณผํ๋ฉด