강의 : list - 이미지 하단에 텍스트가 있는 목록 2

미해결질문
andrewlee 프로필

코드 

<!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>

결과창

질문 

강의를 잘 따라가서 목표한 페이지를 구현했습니다.

그런데 다 만들고 확인 과정을 거치던 중 버튼 사이에 이상한 줄이 생겼다 사라졌다 하는 것을 발견했습니다. 

코드는 문제가 없어 보이는 데 이건 무슨 현상인가요?? 

좋은 강의 해주셔서 항상 감사드립니다. 

Dongho Lee 프로필
Dongho Lee 9달 전

이 선은 링크의 선입니다.
a:hover {text-decoration: underline} 이 지정되어 있어서 마우스 올렸을 때 밑줄이 나타나는 겁니다.

.lst_app  li .btn_area a {text-decoration: none} 을 추가 해 보세요^^

andrewlee 프로필
andrewlee 9달 전

해결했습니다. 감사합니다 :) 

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스