이거 이미지 가로정렬시키실수 있으신분 계신가요 ㅡㅡ 정보
이거 이미지 가로정렬시키실수 있으신분 계신가요 ㅡㅡ본문
css파일
a.headmenu_login{display:block; width:47px; height:14px; background:url(headmenu_login.gif) no-repeat;}
a:hover.headmenu_login{ background-position:0 -14px;}
a.headmenu_login span{display:none;}
a.headmenu_chuchun{display:block; width:150px; height:14px; background:url(headmenu_chuchun.gif) no-repeat;}
a:hover.headmenu_chuchun{ background-position:0 -14px;}
a.headmenu_chuchun span{display:none;}
a.headmenu_deliv{display:block; width:109px; height:14px; background:url(headmenu_deliv.gif) no-repeat;}
a:hover.headmenu_deliv{ background-position:0 -14px;}
a.headmenu_deliv span{display:none;}
a.headmenu_favorit{display:block; width:84px; height:14px; background:url(headmenu_favorit.gif) no-repeat;}
a:hover.headmenu_favorit{ background-position:0 -14px;}
a.headmenu_favorit span{display:none;}
a.headmenu_jjim{display:block; width:84px; height:14px; background:url(headmenu_jjim.gif) no-repeat;}
a:hover.headmenu_jjim{ background-position:0 -14px;}
a.headmenu_jjim span{display:none;}
a.headmenu_logout{display:block; width:53px; height:14px; background:url(headmenu_logout.gif) no-repeat;}
a:hover.headmenu_logout{ background-position:0 -14px;}
a.headmenu_logout span{display:none;}
a.headmenu_mail{display:block; width:47px; height:14px; background:url(headmenu_mail.gif) no-repeat;}
a:hover.headmenu_mail{ background-position:0 -14px;}
a.headmenu_mail span{display:none;}
a.headmenu_point{display:block; width:50px; height:14px; background:url(headmenu_point.gif) no-repeat;}
a:hover.headmenu_point{ background-position:0 -14px;}
a.headmenu_point span{display:none;}
a.headmenu_regi{display:block; width:54px; height:14px; background:url(headmenu_regi.gif) no-repeat;}
a:hover.headmenu_regi{ background-position:0 -14px;}
a.headmenu_regi span{display:none;}
a.headmenu_search{display:block; width:87px; height:14px; background:url(headmenu_search.gif) no-repeat;}
a:hover.headmenu_search{ background-position:0 -14px;}
a.headmenu_search span{display:none;}
html파일
<a href="#" class="headmenu_login"><span>로그인</span></a>
<a href="#" class="headmenu_chuchun"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_deliv"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_favorit"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_jjim"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_logout"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_mail"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_point"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_regi"><span>추천휴대폰</span></a>
<a href="#" class="headmenu_search"><span>추천휴대폰</span></a>
도대체 붙을 생각을 안하네요..가로로 ㅜㅜ
0
댓글 11개
http://sir.co.kr/bbs/tb.php/tip_css/466/b6518433b13eab14e7bb5774f06b33f1
참고하세요..
대신에
a.headmenu_point span{ visibility:hidden; }
로 쓰세요.
스크린 리더가 display:none; 부분은 안 읽어 준다고 하네요.
<a ... </a><a ...
이렇게 해 보세요.
앵커에 display: block;은 이미 주셨으니 float: left;만 해주시면 됩니다.
하지만 저런 방식의 CSS 작성은 일일히 엘리먼트마다 스타일을 주는 것과 다름이 없습니다.
감싸주는 요소가 필요하며 이러한 요소의 존재는 도움이 됩니다.
공부하다보니 어떤 것은 귀속 되는 듯 하고, 어떤 것은 아닌거 같고...;;
직접 해 보면 또 되는 듯 하고;;; 아리송합니다~~
일일히 지정해 둔건 곳곳에 쓰여서(일괄적으로 한곳에 쓰일게 아니라서 ^^)
답변 감사합니다.