큰 글씨들을 없애면, 메뉴사이에 구분이 좀 애매해 집니다.
그래서, Profile 메뉴의 상하에 구분선을 적용해 보았습니다.
#mLeft h3{display:none;}
.mypiMenu02{width:150px;margin:10px 0;padding:10px 0;border-top:1px dashed #ccc;border-bottom:1px dashed #ccc;}
위에서 "display:none"이란 선언문을 사용하면, 보이지 않게 됩니다.
그리고, 적당한 간격유지를 위해, "margin:10px 0; padding:10px 0;"이란 선언문을 사용했습니다.
두 값 모두 여백을 주기 위해 사용하지만, 구분은 확실히 해야합니다.
margin은 외부여백 / padding은 내부여백으로 이해하면 됩니다.
그림으로 표현하면 아래와 같습니다.
위 그림에서 빨강 테두리는 border값 입니다.
그리고, border-top / border-bottom:1px(선굵기) dashed(점선사용) #ccc(선색상값) 입니다.
적용 가능한 선값은 아래와 같습니다.
solid / dashed / double / dotted / inset / outset / ridge
사용해 보시고, 선호하는 스타일로 적용하시면 될겁니다.
마지막으로, 좌측에 있는 아바타(?)라고 해야할까요.
해당 이미지 클릭시 마이피 처음으로 돌아갈 수 있도록 설정해 보겠습니다.
"마이피 관리모드 -> 디자인설정 -> 좌측배경 -> 텍스트"에 위와 같이 입력해 주시면 됩니다.
텍스트만 가능한 것이 아니라, HTML도 적용되니 다양하게 꾸밀수 있겠네요.
