강의 : list - 이미지 하단에 텍스트가 있는 목록 2
402
작성한 질문수 35
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*디자인을 할 때는 큰 그림을 기준으로 우리가 판단을 합니다.*/
/*reset*/
*{margin: 0; padding: 0}
html,body{width: 100%; height: 100%; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
img{
vertical-align: top;
}
ul,ol{list-style: none}
em,address{font-style: normal}
a{text-decoration: none}
a:hover,a:active,a:focus{text-decoration: underline;}
/*style*/
.lst_app{
width: 800px;
margin: 0 auto;
border : 1px solid #aaa;
/*float 해지를 잊지마 이름을 기억해 */
*zoom =1;
}
.lst_app:after{
content: '';
display: block;
clear: both;
}
.lst_app li{
float: left;
padding: 10px 10px;
width: 180px;
}
.lst_app li .thmb{
height : 180px;
background: url(img/bg_thmb.gif) no-repeat;
}
.lst_app li .btn_area{
padding: 15px 0;
/*링크 걸려있는 공간이 인라인 요소잖아요. 그래서 text-align:만 지정을 해도 정렬이 됩니다.*/
text-align: center;
}
.lst_app li .btn_area .edit{}
.lst_app li .btn_area .delete{}
</style>
</head>
<body>
<div id="content">
<!-- UI Object -->
<ul class="lst_app">
<li>
<div class="thmb">
<a href="#">
<img src="img/@tmp_thmb.gif" alt="팡야">
</a>
</div>
<div class="btn_area">
<a href="#" class="edit">
<img src="img/btn_edt.gif" alt="수정">
</a>
<a href="#" class="delete">
<img src="img/btn_del.gif" alt="삭제">
</a>
</div>
</li>
<li>
<div class="thmb">
<a href="#">
<img src="img/@tmp_thmb.gif" alt="팡야">
</a>
</div>
<div class="btn_area">
<a href="#" class="edit">
<img src="img/btn_edt.gif" alt="수정">
</a>
<a href="#" class="delete">
<img src="img/btn_del.gif" alt="삭제">
</a>
</div>
</li>
<li>
<div class="thmb">
<a href="#">
<img src="img/@tmp_thmb.gif" alt="팡야">
</a>
</div>
<div class="btn_area">
<a href="#" class="edit">
<img src="img/btn_edt.gif" alt="수정">
</a>
<a href="#" class="delete">
<img src="img/btn_del.gif" alt="삭제">
</a>
</div>
</li>
<li>
<div class="thmb">
</div>
<div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div>
</li>
<li>
<div class="thmb"></div>
<div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div>
</li>
<li>
<div class="thmb"></div>
<div class="btn_area"><a href="#"><img src="img/btn_upld_img.gif" width="80" height="22" alt="이미지 올리기"></a></div>
</li>
</ul>
<!-- //UI Object -->
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquam eligendi rerum placeat vel quam facere, adipisci, deserunt rem aliquid eaque! Commodi eos dolor consequatur quia vel quasi, error iure, modi officiis repellendus temporibus sint maxime animi esse fugiat, aperiam vitae quidem voluptas, sunt voluptatem. Quae non perspiciatis cum, iste officia. Possimus mollitia, fuga ipsam odio corporis repellendus voluptatibus amet obcaecati ab magni nemo id dolorem eveniet quod quia maiores consequatur! Soluta vel commodi voluptatum culpa aspernatur cum ipsa reprehenderit eius numquam repellendus eligendi suscipit, ullam fugiat nostrum similique voluptas, quos esse. Praesentium inventore enim obcaecati nisi. Nesciunt, voluptatum, ducimus.
</p>
</body>
</html>결과창
질문
강의를 잘 따라가서 목표한 페이지를 구현했습니다.
그런데 다 만들고 확인 과정을 거치던 중 버튼 사이에 이상한 줄이 생겼다 사라졌다 하는 것을 발견했습니다.
코드는 문제가 없어 보이는 데 이건 무슨 현상인가요??
좋은 강의 해주셔서 항상 감사드립니다.
답변 2
1
이 선은 링크의 선입니다.
a:hover {text-decoration: underline} 이 지정되어 있어서 마우스 올렸을 때 밑줄이 나타나는 겁니다.
.lst_app li .btn_area a {text-decoration: none} 을 추가 해 보세요^^
혹시 주석선택 중 마지막 /마크로되어있는거 선택 단축기가 뭔가요
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