menu 탭메뉴,메뉴 1 (22:41)
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*reset*/
html,body{width: 100%; height: 100%; }
body,input,textarea,select,button,table {font-family: 'Malgun Gothic','돋움',Dotum,AppleGothic;font-size: 12px}
img, fieldset{border: 0 }
ul,ol{list-style: none}
em,address{font-style: normal}
a{text-decoration: none}
a:hover,a:active,a:focus{text-decoration: underline;}
/*style*/
/*js로 할 것을 css로 무리하게 하면은 cross-browsing에 문제가 생긴다고 알려져 있다. */
.wrap{
width: 960px;
border: 1px solid red;
margin: 0 auto;
}
.tab_list li.m1 > a{ /* 만일 ie6을 고려하지 않는다면 자식 선택자도 가능한 선택지 이다. */
color: red;
}
.tab_list{
/* 메뉴 바를 보면 위치는 달라지지 않고 고정되어 있으니까 li보다는 .tab_list나 ul이 낫다 */
position: relative;
}
.tab_list li.m1,
.tab_list li.m2,
.tab_list li.m3{
}
/*이렇게 해야 메인 버튼을 먼저 디자인 할 수 있겠죠. */
.tab_list li.m1 > a,
.tab_list li.m2 > a,
.tab_list li.m3 > a{
/*메인 메뉴들을 display하는 방식에 float을 하려는 데 그게 이치에 안맞는다 그 이유로는 밑에 li까지 딸려있으니까 그렇다. 그래서 >a로서 메뉴만 잡아주는 형태를 잡는다.*/
float: left;
display: block; /*왜냐면 하나씩 블록을 가져서 넘어가야 하기 때문입니다. 또한 크기도 만들 수 있으니까.*/
/*height: 35px ; */
padding: 0 30px;
background-color: #eee;
border: 1px solid #ddd;
color : #666;
font-size: 13px;
line-height: 35px; /*높이라고 생각해도됨.*/
}
.tab_list li.m1 ul,
.tab_list li.m2 ul,
.tab_list li.m3 ul{
position: absolute;
left:0;
top:36px;
width:100%;
border-top: 1px solid #aaa
/* absolute가 원래 처리를 하면 내용까지만 처리가 됩니다. 그럴 때에는 크기를 지정하면 됩니다. 픽셀보다는 %로 바깥에 무언가 있을 때 채워지도록 합니다. */
}
.tab_list li.m1 .more,
.tab_list li.m2 .more,
.tab_list li.m3 .more{
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="tab_list">
<ul>
<li class="m1">
<a href="#"><span>공지사항</span></a>
<ul>
<li><!-- › 요즘에는 이렇게 안쓰고 아이콘을 넣음--><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li>
<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li>
<li><a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a></li>
</ul>
<p class="more"><a href="#">공지사항 더보기</a></p> <!-- 성격이 다르니까 빼주는 것이 좋겠죠 -->
</li>
<li class="m2">
<a href="#"><span>보도자료</span></a>
<ul>
<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
<li><a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a></li>
</ul>
<p class="more"><a href="#">보도자료 더보기</a></p>
</li>
<li class="m3">
<a href="#"><span>해명자료</span></a>
<ul>
<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
<li><a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a></li>
</ul>
<p class="more"><a href="#">해명자료 더보기</a></p>
</li>
</ul>
</div>
</div>
</body>
</html>결과창
질문
강의 도중에 border-top을 이용해 라인을 처리하는 부분이 있는데 꽤나 오래 고민 해봤는데 해결을 못해서 질문합니다. 계속해서 결과창의 보라색과 같은 남는 선이 생깁니다.
어떻게 해결해야 할까요??
저의 코드를 수정한 코드를 보여주신다면 정말 감사하겠습니다.
답변 2
1
/*reset*/
* {margin: 0; padding: 0}
html,body{width: 100%; height: 100%; }
body,input,textarea,select,button,table {font-family: 'Malgun Gothic','돋움',Dotum,AppleGothic;font-size: 12px}
...
css 작업하실 때 맨 앞에 margin 과 padding 을 초기화 해 주면 되겠습니다.
많은 블록 요소들은 기본적으로 margin 을 가지고 있는데 이 부분을 없애지 않아서 특히 목록의 margin이 표현된 겁니다. ^^
혹시 주석선택 중 마지막 /마크로되어있는거 선택 단축기가 뭔가요
0
42
2
img 이미지가 안나와요
0
42
2
이메일/이벤트 실습 예제 파일
0
393
2
마크업 실습 관련 질문입니다.
0
405
1
이미지를 안쓰고도 만들 수 있을거 같은데 이미지로 써서 만들때 어떤 장점이 있나요 ??
0
405
1
category를 top: 50% 했을 때 이동되는 위치들이 잘 이해가 안가네요ㅠ
0
552
1
css 하다가 궁금한게 있어서 질문드립니다 !
0
385
1
<li class ="m1" > 을 m2 m3으로 나눠서 해야되는 이유가 있을까요 ??
0
295
1
cover 의미 질문있습니다. !
0
325
1
탭 / 쉬프트 탭으로 들여쓰기와 들여쓰기 삭제하기
0
668
1
섹션닝으로 작성해봤는데 지적해주실만한 내용 있을까요 ?
0
342
1
섹셔닝하는 것에 대해서..
0
283
1
footer에 전화번호도 추가 됬는데 address에 같이 포함 시키면 되나요 ?
0
340
1
tab이 안 먹어요~
0
251
1
실무에서 이벤트 페이지를 작업할 때 이렇게 만드나요??
0
267
1
border 겹침은 어떻게 해결하나요?
0
4157
1
이메일 페이지라는게 이해가 잘 안되는데 ..
1
286
1
css backgrond 관련 질문입니다..!
1
281
2
선생님 공부 순서는 어떻게 하는게 좋을까요?
2
399
2
속성을 닫을때 작은따옴표로 쓰면 안될까요?
1
356
1
선생님 !! 질문있습니다.
1
336
2
선생님 !! button, input 버튼이 깨지는데 왜그런건가요??
1
325
2
안녕하세요 !! width값을 100으로 작게 줘도 변화가 없는데 왜그런걸 까요 ??
2
290
2
!+Tab 입력시
1
211
1