Home
Top

017 CSS공부 (13) 이미지 하단 텍스트, 다음 메인 예제 실습

Daily Study/Web Dev

2021. 2. 16.

반응형
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>list</title>
	<style>
	/* reset */
	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:'Malgun Gothic',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_type {
		width: 400px;
		border: 1px solid #888;
		margin: 10px auto;
		padding: 5px;
		*zoom: 1;
	}
	.lst_type:after {
		content: '';
		display: block;
		clear: both;
	}
	.lst_type li {
		float: left;
		width: 90px;
		margin: 5px;
	}
	.lst_type li a {
		display: block;
		color: #fff;
	}
	.lst_type li a .thumb {
		display: block;
	}
	.lst_type li a em {
		display: block;
		padding: 5px 0;
		background-color: #888;
		font-size: 11px;
		letter-spacing: -1px;
		line-height: 1.5;
	}

	</style>
</head>
<body>
<!-- UI Object -->
<ul class="lst_type">
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
	<li>
		<a href="#">
			<span class="thumb"><img src="img/wendy5.png" width="90" height="90" alt=""></span>
			<em>하단에 텍스트가있는 이미지리스트입니다.</em>
		</a>
	</li>
</ul>
<!-- //UI Object -->
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>list</title>
	<style>
	/* reset */
	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:'Malgun Gothic',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 */
	#content {
		width: 800px;
		margin: 0 auto;
	}
	.lst_app {
		/*background-color: lime;*/
		*zoom: 1;
	}
	.lst_app:after {
		content: '';
		display: block;
		clear: both;
	}
	.lst_app li {
		float: left;
		margin: 10px;
	}
	.lst_app li .thmb {
		width: 180px;
		height: 180px;
		background: url(img/bg_thmb.gif) no-repeat;
	}
	.lst_app li .btn_area {
		padding: 15px 0;
		text-align: center;
	}
	.lst_app li a {
		text-decoration: none;
	}

	</style>
</head>
<body>
<div id="content">
	<!-- UI Object -->
	<ul class="lst_app">
	<li>
	    <div class="thmb">
	    	<a href="#">
	    		<img src="img/wendy5.png" width="180" height="180" alt="팡야">
	    	</a>
	    </div>
	    <div class="btn_area">
	        <a href="#">
	        	<img src="img/btn_edt.gif" width="39" height="22" alt="수정">
	        </a>
	        <a href="#">
	        	<img src="img/btn_del.gif" width="39" 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>
	<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 -->

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid repellat repudiandae quis eius nihil, ipsam minus eos sequi harum qui a neque molestias praesentium laborum, temporibus dicta ex ipsa ratione explicabo fuga sit rerum id laboriosam assumenda tempora. Nemo voluptatum minus, quos aliquam tempora itaque dolorem in distinctio natus unde vero quod, perspiciatis veritatis sint, nulla repudiandae, eveniet consectetur reiciendis. Pariatur recusandae dolore, maiores, distinctio magni, ex provident ipsam reprehenderit blanditiis nisi quidem excepturi porro facere architecto, repellendus minima suscipit ad natus? Nostrum, explicabo sunt porro quia architecto unde dolor reiciendis facere ullam quis voluptates sequi. Nemo tempora voluptatem fugit!</p>

</div>
	
</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>example</title>
	<style>
	/* reset */
	html,body {width: 100%; height: 100%}
	body,ul,li,p {margin: 0; padding: 0}
	body {font-family: 'Malgun Gothic','맑은 고딕',sans-serif; font-size: 12px}
	li {list-style: none}
	em {font-style: normal}
	img {vertical-align: top}
	a {text-decoration: none}
	a:hover,a:focus {text-decoration: underline}

	/* style */
	#content {width: 990px; margin: 0 auto}
	.car_gallery {margin-bottom: 15px}
	.car_gallery ul {*zoom: 1;}
	.car_gallery ul:after {content:''; display: block; clear: both}
	.car_gallery li {float: left; width: 192px; margin: 17px 17px 0 0; color: #222}
	.car_gallery li a {display: block; position: relative; color: inherit}
	/* 부모 글자색 상속 */
	.car_gallery li a:hover {color: #118eff}
	.car_gallery li a .thumb {}
	.car_gallery li a .thumb img {width: 100%}
	.car_gallery li a .txt {display: block; margin-top: 5px; padding: 0 4px; line-height: 18px}
	.car_gallery li a .ico {display: block; position: absolute; top: 85px; right: 10px; width: 23px; height: 23px; background: url(img/ico.png) no-repeat; text-indent: -9999em;}
	.car_gallery li a .ico.mov {background-position: -70px 0}
	.car_gallery li a .ico.pic {background-position: -40px 0}
	</style>
</head>
<body>
<div id="content">
	<div class="car_gallery">
		<ul>
			<li>
				<a href="#">
					<span class="thumb"><img src="img/thumb1.jpg" alt="횡단보도 정지선의 비밀.. 독일과 한국 뭐가 다른가"></span>
					<em class="txt">횡단보도 정지선의 비밀.. 독일과 한국 뭐가 다른가</em>
					<span class="ico mov">동영상</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="thumb"><img src="img/thumb2.jpg" alt="슈퍼카 씹어먹는 최강의 슈퍼밴 베스트 5"></span>
					<em class="txt">슈퍼카 씹어먹는 최강의 슈퍼밴 베스트 5</em>
					<span class="ico pic">사진</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="thumb"><img src="img/thumb3.jpg" alt="BMW의 누더기 전기차 'LOVOS'"></span>
					<em class="txt">BMW의 누더기 전기차 'LOVOS'</em>
					<span class="ico pic">사진</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="thumb"><img src="img/thumb4.jpg" alt="쉽게 즐길 수 있는 전천후 모터사이클,G 310 GS"></span>
					<em class="txt">쉽게 즐길 수 있는 전천후 모터사이클, G 310 GS</em>
					<span class="ico pic">사진</span>
				</a>
			</li>
		</ul>
		
	</div>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quis laudantium blanditiis veniam, unde nostrum, vel earum excepturi sit, iste, aperiam asperiores ducimus enim! Nesciunt quod porro at, itaque iure quisquam enim labore, hic et nisi ut alias doloribus perferendis nihil animi debitis iste sunt eos facilis voluptates! Esse iste, architecto, dignissimos quis officia quae molestias facere maiores itaque provident ullam pariatur! Ipsum rerum modi, a? Ex assumenda odit cumque ut, tempora excepturi eligendi, aliquam voluptate error sapiente nobis quibusdam veniam laborum quaerat non dignissimos perspiciatis, odio. Error consequuntur omnis ut nostrum, quia commodi ad dolorem accusantium odio molestias, quis?</p>
</div>
</body>
</html>

 

 

요즘 블렌더하는 데에 시간을 많이 쏟다 보니까

웹개발 공부를 많이 못한 것 같다...

 

아직 웹개발은 뭔가 감이 안오는데

블렌더는 내가 만들고 싶은 것들을 만들 계획을 세우니까

슬슬 어떻게 만들고 어떻게 씬을 짤지가 대강 감이 오는데

 

예제만 따라하는거 말고 내가 따로 뭘 만들어봐야 제대로 감이 올텐데 아직은 아닌 것 같다.

반응형
저작자표시

'Daily Study > Web Dev' 카테고리의 다른 글

019 CSS 공부 (15) 로그인 페이지 예제 실습  (0) 2021.02.17
018 CSS 공부 (14) 다음 부동산 메뉴, 테이블 예제 실습  (0) 2021.02.16
016 CSS공부(12) 이미지와 텍스트 목록 예제 실습  (0) 2021.02.09
015 CSS공부(11) 갤러리 형식의 리스트 예제 실습  (0) 2021.02.04
014 CSS공부(10) FAQ 목록 만들기 예제 실습  (0) 2021.02.03

티스토리툴바