border-radius 속성 overflow속성 으로 드롭다운 메뉴 버튼 꾸미기
오늘은 지난시간에 공부한 목록태그를 이용한 드롭다운 메뉴바 만들기에 이어서
메뉴 버튼을 좀더 이쁘게 꾸며 주는 border-radius속성 과 overflow속성 으로 스타일을 주고 어떻게 변하는지에 대해 살펴 보고 공부 하는 시간을 갖도록합니다.
아래는 스타일 시트 입니다
<style>
div, ul, li{margin:0; padding:0}
body{font-size:12px; font-family:"맑은고딕", arial}
ul{list-style:none}
a{color:#000; text-decoration}
#dk{
width:640px; height:60px; margin:auto; margin-top:50px; background:#ddd;
}
#dk>ul{
width:620px; height:30px; padding:20px 0 0 20px;
}
#dk>ul>li{float:left; width:110px; height:30px; text-align:center; margin-right:5px; position:relative; top:-30;border:1px solid gray; border-radius:0.5em;
}
#dk>ul>li>a{
display:block;width:100%; height:100%; font-famliy:'Malgun Gothic','맑은고딕','sans-serif; font-size:13px/16px; font-weight:bold; color:purple; text-align:center; background:#7093DB; text-decoration:none;
border:1px solid gray; border-radius:0.5em;}
#dk>ul>li>a:hover{
color:orange; background:blue; text-decoration:none; border:1px solid gray; border-radius:0.5em;
}
#dk ul ul{display:none;}
#dk>ul>li:hover ul{
display:block; width:110px; height:25px; text-align:center; position:absolute; left:0px; top:30px;
}
#dk li li{display:none; width:110px; height:25px; background-color:lime; text-align:center; border:1px solid gray; border-radius:0.5em;
}
#dk li li a{
display:block; width:100%; height:100%; font-weight:bold 12px/25px; font-famliy:'Malgun Gothic','맑은고딕','sans-serif;font-size:13px; text-align:center;
}
#dk li li a:hover{
color:red; background:none; valign:middle;
}
#clre {display:clerfix;}
</style>
아래는 결과 입니다.
메뉴 버튼을 클릭하면 실제로 드롭다운이 됩니다.
border-radius 속성의 값으로
border-bottom-left-radius:00px;또는00 em;이값은 박스의 하단부 왼쪽에 라운드를 주게 됩니다.
border-bottom-right-radius:00px;또는00 em;하단부의 오른 쪽 에 값을 주게 되겠죠
border-radius:0px 0px 0px 0px; 이렇게 네 모서리에 값을 한꺼번에 따로 따로 줄수도 있습니다.
상단의 왼쪽 모서리 부터 상단의 오른쪽 하단의 오른쪽 그리고 하단의 왼쪽 순서로 값이 전달 됩니다.
border-radius:1px 2px; 이렇게 주게 되면 상단부의 왼쪽에 1픽셀 하단부의 오른쪽에 2픽셀의 값을 주게 됩니다.
border-radius:2px; 이렇게 주게 되면 네 모서리 전체에 똑 같이 2픽셀의 값을 주게 됩니다.
그리고 만약 동그랗게 만들고 싶을경우엔
border-radius:50%;이렇게 50%의 값을 주게 되면 박스가 동그란 원이 됩니다.
그리고 위의 결과에서 세번째 주메뉴를 클릭 했을때 서브 메뉴가 길어 영역을 벗어나 버리게 되는데 이것을 수정 하기 위해 예제를 하나 더 만들어 보도록 하겠 습니다.
<style>
#gg {width:auto; height:150px; margin-bottom:10px;}
div, ul, li{margin:0; padding:0}
body{font-size:12px; font-family:"맑은고딕", arial}
#dk ul{list-style:none;}
a{color:#000; text-decoration}
#dk{
width:640px; height:60px; margin:auto; margin-top:50px;
}
#dk>ul{
width:620px; height:30px; padding:20px 0 0 20px;
}
#dk>ul>li{float:left; width:110px; height:30px; margin-right:5px; position:relative; top:-30; border:1px solid lime; border-radius:0.2em;
}
#dk>ul>li>a{
display:block;width:100%; height:100%; font-famliy:'Malgun Gothic','맑은고딕','sans-serif; font-size:13px/16px; font-weight:bold; color:purple; text-align:center; background:#7093DB; text-decoration:none; border:1px solid gray; border-radius:0.2em;
}
#dk>ul>li>a:hover{
color:orange; background:blue; text-decoration:none; border:1px solid gray; border-radius:0.2em;
}
#dk ul ul{display:none;}
#dk>ul>li:hover ul{
display:block; width:110px; height:25px; text-align:center; position:absolute; left:0px; top:30px;
}
#dk li li{display:block; width:110px; height:25px; background-color:lime; text-align:center; border:1px solid gray; border-radius:0.2em;
overflow:hidden;
}
#dk li li a{display:block; list-style:none; width:100%; height:100%; font-weight:bold 12px/25px; font-famliy:'Malgun Gothic','맑은고딕','sans-serif;font-size:13px; text-align:center; text-decoration:none;
}
#dk li li a:hover{
color:red; background:none; valign:middle;
}
#clre {display:clerfix;}
</style>
값으로는hidden visible overflow:scroll; overflow-x:scroll; overflow-y:scroll;이 있습니다.
overflow:hidden;은 넘치는 부분을 잘라서 보이지 않게 하는 것입니다.
overflow:visible;은 기본적으로 주어지게 되는 값인데요 만약 상위에서white-space:nowrap 과 hidden값으로 고정시킨 경우 변경 하고자 하는 부분에 visible값을 주게 되면 영역 밖으로 내용이 넘쳐 나도록 하는 속성값입니다.
overflow-x:scroll; 가로스크롤 overflow-y:scroll; 세로스크롤 overflow:scroll;이속성 과 값은 가로스크롤 과 세로스크롤을 한꺼번에 줄때 사용 합니다. x 와 y scroll은white-space:nowrap으로 문단의 줄바꿈을 못하도록 고정한 영역에 주어지게 되면 각각 가로와 세로의 스크롤이 생겨 나는 것입니다.
위CSS로 주메뉴 3번의 서브메뉴에서 영역을 벗어나 아래 메뉴공간을 침범한 링크주소를 overflow:hidden; 을 이용해 보이지 않도록 설정 했습니다.
아래는 결과 입니다.
제블로그는 다음 웹앱에 최적화되어 있어 네이버 창에서 열었을때 결과 값이 상당히 다르게 나타 납니다.
아래의 예문들은 네이버에 최적화 한 예문들 입니다.