A background color is added to the links to show the link area.
Notice that the whole link area is clickable, not just the text.
\\ ====예제 설명==== * ''%%display: block;%%'' - 링크를 블럭 요소로 표시하면, 텍스트뿐만 아니라 전체 링크 영역을 클릭할 수 있게 만들고, 너비 (그리고 패딩, 마진, 높이 등)를 지정할 수 있습니다. * ''%%width: 60px;%%'' - 블럭 요소는 기본적으로 사용 가능한 전체 너비를 차지합니다. 60픽셀의 너비를 지정합니다.\\ 또한 블록 요소로 표시될 때 사용 가능한 전체 너비를 차지하기 때문에, %%A background color is added to the links to show the link area.
Notice that the whole link area is clickable, not just the text.
=====Vertical Navigation Bar Examples===== 회색 컬러의 배경으로, 기본 세로 네비게이션 바를 만들고,\\ 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.\\ {{:wiki:css:css_note:vnavbar1.png?600|}}\\ ====예제====In this exmple, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.
=====Center Links & Add Borders===== ''%%text-align:center%%''를 %%In this exmple, we center the navigation links and add a border to the naviation bar.
=====Full-height Fixed Vertical NavBar===== 전체 높이의 'sticky'(고정된) 측면 네비게이션을 만듭니다:\\ {{:wiki:css:css_note:fixedfullheightsidenav.png?600|}}\\ ====예제====Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.
Also notice that we have set overflow:auto to sidenav. This willl add a scrollbar when the sidenav is too long (for exmaple if it has over 50 links inside of it).
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...
Some text...