โก๋ฆฌ์คํธ ํ๊ทธ ์ฌ์ฉํด์ ์๋ธ๋ฉ๋ด ๋ง๋ค๊ธฐ ์ฐ์ตโก
๋ฉ๋ด์ ๋ง์ฐ์ค ์ฌ๋ ธ์ ๋ ๋ค์๊ณผ ๊ฐ์ด ์๋ธ๋ฉ๋ด๊ฐ ๋ํ๋๋๋ก ํ๊ธฐ ์ํด ์ด๋ป๊ฒ ์ฝ๋ ์์ฑํ๋์ง ์์ ๋ณด์.
- ์๊น ์ ํ์ฃผ๋ css ์ฝ๋๋ ๋ณ๋๋ก ํ๋จ์ ์ฌ๋ ค ๋์์ผ๋ <head>ํ๊ทธ ์์ <style>ํ๊ทธ ์ด์ด์ ์ ์ฉ์์ผ์ฃผ๊ฑฐ๋ ์คํ์ผ ์ํธ๋ฅผ ํ๋ ์ถ๊ฐํด์ ์ฐ๊ฒฐํด์ฃผ๋ฉด ๋๋ค. ์ธ๋ถ CSS ํ์ผ์ HTML ํ์ผ์ ๋งํฌํ๋ ค๋ฉด HTML ํ์ผ์ <head> ํ๊ทธ ๋ด์ <link> ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ CSS ํ์ผ์ ๋ถ๋ฌ์์ฃผ๋ฉด ๋๋ค.
<link rel="stylesheet" href="styles.css">
1. ๋ฉ์ธ๋ฉ๋ด (1 depth ๋ฉ๋ด)
์ฐ์ 1 depth ๋ฉ๋ด๋ฅผ ์์ฑํด์ผ ํ๋ค. ๋ฉ๋ด ๊ตฌ์กฐ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๊ธฐ ์ ์ ๋ณด์ด๋ ์ฃผ๋ฉ๋ด๋ฅผ 1 depth ๋ฉ๋ด๋ผ๊ณ ํ๋ค. ํด๋น ๋ฉ๋ด์์ ํ ์นธ์ฉ ํ์ ๋ฉ๋ด๋ก ๋ด๋ ค ๊ฐ๋ฉด 2 depth, 3 depth ์์ผ๋ก ๋ช ๋ช ํ๋ค.
<body>
<nav class="dropdownmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Articles on HTML5 & CSS3</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
2. Submenu ์๋ธ๋ฉ๋ด ๊ตฌ์กฐ
๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๊ธฐ ์ ์ ๋ณด์ฌ์ง ๋ฉ๋ด๋ฅผ ๋จผ์ ์์ฑํ ํ์ About us์ ์๋ธ๋ฉ๋ด๋ฅผ ์์ฑํ๋ค. ์ด ๋ About us <li> ํ๊ทธ๊ฐ ๋ซํ๊ธฐ ์ ์ ์๋ก์ด ๋ฆฌ์คํธ๋ฅผ ์์ฑํด์ผ ํ๋ ๊ฒ์ด ์ค์ํ๋ค. ์ด ์๋ธ๋ฉ๋ด๊ฐ depth2 ๋ฉ๋ด์ด๋ค.
<body>
<nav class="dropdownmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li>
<a href="#">Articles on HTML5 & CSS3</a>
<ul id="submenu">
<li><a href="#">Difference between SVG vs. Canvas</a></li>
<li><a href="#">New features in HTML5</a></li>
<li><a href="#">Creating links to sections within a webpage</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
3. CSS
<style>
.dropdownmenu ul, .dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}
.dropdownmenu li {
float: left;
position: relative;
width:auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color:#000000;
}
</style>
CSS ์ฝ๋ ํด์ค
์ CSS ์ฝ๋์ ์๋ฏธ๋ฅผ ์ดํด๋ณด์. ์ ์ฝ๋์์ ๊ฐ์ฅ ํต์ฌ 2๊ฐ์ง๋
- submenu๊ฐ ์๋ณด์ด๋ค๊ฐ ๋ฉ๋ด๋ฐ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์๋ submenu๊ฐ ๋์ค๊ฒ ํ๋ ๋๋กญ๋ค์ด ๊ตฌํ
- ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ ์๋ธ๋ฉ๋ด๊ฐ ๋ถ๋๋ฝ๊ฒ ๋ํ๋๋๋ก ํจ
3-1. ๋๋กญ๋ค์ด ๊ตฌํ
<style>
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
</style>
#submenu์ ์ด๊ธฐ ์ํ:
<style>
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
</style>
- left: 0: ์๋ธ๋ฉ๋ด์ ์ผ์ชฝ ์์น๋ฅผ ๋ถ๋ชจ ์์์ ์ผ์ชฝ์ ๋ง์ถค
- opacity: 0: ์๋ธ๋ฉ๋ด๋ฅผ ๋ณด์ด์ง ์๊ฒ ์ค์
- position: absolute: ์๋ธ๋ฉ๋ด๋ฅผ ๋ถ๋ชจ ์์ ๊ธฐ์ค์ผ๋ก ์ ๋ ์์น
- top: 35px: ์๋ธ๋ฉ๋ด์ ์์ชฝ ์์น๋ฅผ ๋ถ๋ชจ ์์์ ์๋๋ก 35ํฝ์ ๋จ์ด์ง๊ฒ ์ค์
- visibility: hidden: ์๋ธ๋ฉ๋ด๋ฅผ ์จ๊น
- z-index: 1: ์๋ธ๋ฉ๋ด๊ฐ ๋ค๋ฅธ ์์๋ค ์์ ํ์๋๋๋ก ์ค์
๋ถ๋ชจ li ์์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ #submenu๋ฅผ ํ์ํ๋ ๋ถ๋ถ:
<style>
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
</style>
- opacity: 1: ์๋ธ๋ฉ๋ด๋ฅผ ๋ณด์ด๊ฒ ์ค์
- top: 40px: ์๋ธ๋ฉ๋ด์ ์์ชฝ ์์น๋ฅผ ๋ถ๋ชจ ์์์ ์๋๋ก 40ํฝ์ ๋จ์ด์ง๊ฒ ์ค์ ํฉ๋๋ค.
- visibility: visible: ์๋ธ๋ฉ๋ด๋ฅผ ๋ณด์ด๊ฒ ์ค์
์ด CSS ์ฝ๋๋ ์๋ธ๋ฉ๋ด๊ฐ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ (li:hover) ๋ํ๋๋๋ก ํจ. ์ฆ, ๋ถ๋ชจ li ์์์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์์ #submenu๊ฐ ๋ณด์ด๋๋ก ์ค์ ๋ ๊ฒ
3-2. ์๋ธ๋ฉ๋ด ๋ถ๋๋ฝ๊ฒ ๋ํ๋๊ฒ ํ๊ธฐ
์๋ธ๋ฉ๋ด๊ฐ ๋ถ๋๋ฝ๊ฒ ๋ํ๋๊ฒ ํด์ฃผ๋ ๋ถ๋ถ์ #submenu์ li:hover ul#submenu์ ์ ์ฉ๋ transition ์์ฑ. ์ด ์์ฑ์ ์๋ธ๋ฉ๋ด์ opacity์ top ์์ฑ ๋ณ๊ฒฝ ์ ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ ์ฉํ์ฌ ๋ถ๋๋ฝ๊ฒ ๋ํ๋๋๋ก ํ๋ค.
<style>
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
</style>
์ ์ฝ๋์์ -transition: all .25s ease; ๋ถ๋ถ์ด ๋ถ๋๋ฌ์ด ์ ํ ํจ๊ณผ๋ฅผ ์ฃผ๋ ์ฝ๋์ด๋ค.
์ผ๋จ ์์ -webkit-์ด ๋ถ์ ์ฝ๋๋ฅผ ๊ธฐ์ค์ผ๋ก ์ดํด ๋ณด์. .25๋ 0.25์ด๋ฅผ ๋ปํ๋ค. ๋จ์๋ ์ด๋จ์๋ก ์จ ์ฃผ์ด์ผ ํ๋ค.
- -webkit-transition: all .25s ease; ๋ชจ๋ ์์ฑ์ ๋ณํ์ ๋ํด 0.25์ด ๋์ ๋ถ๋๋ฝ๊ฒ ์ ํ๋๋๋ก ์ค์ . ์นํท ๋ธ๋ผ์ฐ์ ์ฉ
- -moz-transition: all .25s ease; ๋ชจ์ง๋ผ ๋ธ๋ผ์ฐ์ ์ฉ
- -ms-transition: all .25s ease; ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ ๋ธ๋ผ์ฐ์ ์ฉ
- -o-transition: all .25s ease; ์คํ๋ผ ๋ธ๋ผ์ฐ์ ์ฉ
- transition: all .25s ease; ํ์ค ์์ฑ
