Top
반응형
<!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}
#content {
width: 800px;
margin: 0 auto;
}
#content h1 {
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
.fixed_img_row {}
.fixed_img_row li {}
.fixed_img_row li {
padding: 15px 0;
border-bottom: 1px solid #ccc;
*zoom: 1;
}
.fixed_img_row li:after {
content: '';
display: block;
clear: both;
}
.fixed_img_row li a {
color: #333;
}
.fixed_img_row li a .thumb {
position: relative;
float: left;
width: 120px;
background-color: #ddd;
text-align: center;
line-height: 80px;
}
.fixed_img_row li a .thumb img {}
.fixed_img_row li a .thumb em {
display: none;
position: absolute;
left: 0;
top: 0;
opacity: .6;
width: 100%;
background-color: #000;
color: #fff;
font-weight: bold;
line-height: 80px;
}
.fixed_img_row li a:hover .thumb em {
display: block;
}
.fixed_img_row li a strong {
display: block;
margin-left: 130px;
/* thumb 클래스에서 마진을 주는게 아니라 텍스트 있는 태그 strong, p 에서 왼쪽
이미지 폭 + 원하는 레프트 마진값을 더해서 적용 */
margin-bottom: 6px;
}
.fixed_img_row li p {
margin-left: 130px;
margin-bottom: 5px;
color: #666;
line-height:
}
</style>
</head>
<body>
<div id="content">
<!-- UI Object -->
<h1>Fixed Image+Text Row List</h1>
<div class="fixed_img_row">
<ul>
<li>
<a href="#">
<span class="thumb">
<img src="img/wendy.jpg" width="120" alt="">
<em>Category</em>
</span>
<strong>이미지의 너비가 고정폭 이어야 할 때</strong>
</a>
<p>이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. </p>
<p>이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. 이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다. </p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy.jpg" width="120" alt=""> <em>Category</em></span> <strong>이미지의 너비가 고정폭 이어야 할 때</strong></a>
<p>이미지의 너비가 고정폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지더라도 이미지 아래쪽으로 글이 흐르지 않는 것을 확인 할 수 있습니다.</p>
</li>
<li>
<a href="#">
<span class="thumb">
No Images
<em>Category</em>
</span>
<strong>이미지가 없는 항목</strong>
</a>
<p>이미지가 포함되지 않은 경우 이미지 자리를 표시 합니다. 이 목록 스타일의 장점은 서로 같은 이미지 크기 때문에 수직 정렬이 맞아서 잘 정돈된 느낌을 줍니다. 단점은 가변폭 이미지를 수용할 수 없다는 점 입니다.</p>
</li>
</ul>
</div>
<!-- //UI Object -->
</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>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}
#content {
width: 800px;
margin: 0 auto;
}
#content h1 {
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
.flexible_img_row {}
.flexible_img_row li {
padding: 20px 0;
border-bottom: 1px solid #ccc;
*zoom: 1;
}
.flexible_img_row li:after {
content: '';
display: block;
clear: both;
}
.flexible_img_row li a {
color: #333;
}
.flexible_img_row li a .thumb {
float: left;
margin: 0 15px 15px 0;
}
.flexible_img_row li a strong {
display: block;
margin-bottom: 8px;
}
.flexible_img_row li p {
color: #666;
line-height: 1.;
}
</style>
</head>
<body>
<div id="content">
<!-- UI Object -->
<h1>Flexible Image+Text Row List</h1>
<div class="flexible_img_row">
<ul>
<li>
<a href="#">
<span class="thumb">
<img src="img/@thumb.jpg" width="160" alt="">
</span>
<strong>이미지의 너비가 가변폭이어야 할 때</strong>
</a>
<p>이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. 이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다. </p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/@thumb.jpg" width="120" alt=""></span> <strong>이미지의 너비가 가변폭이어야 할 때</strong></a>
<p>이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다.</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/@thumb.jpg" width="80" alt=""></span> <strong>이미지의 너비가 가변폭이어야 할 때</strong></a>
<p>이미지의 너비가 가변폭일 때 이 스타일을 사용 합니다. 이미지보다 글의 양이 많아지면 이미지 아래쪽으로 글이 흐르는 것을 확인 할 수 있습니다.</p>
</li>
<li>
<a href="#">
<strong>이미지가 없는 항목</strong>
</a>
<p>이미지가 포함되지 않은 경우 이미지 자리를 표시하지 않고 글만 출력 합니다. 이 목록 스타일의 장점은 가변폭 이미지를 수용할 수 있다는 점 입니다. 단점은 서로 다른 이미지 크기 때문에 수직 정렬이 맞지 않아서 정돈되지 않은 느낌을 줍니다.</p>
</li>
</ul>
</div>
<!-- //UI Object -->
</div>
</body>
</html>
이미지의 너비가 가변폭일 경우
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 018 CSS 공부 (14) 다음 부동산 메뉴, 테이블 예제 실습 (0) | 2021.02.16 |
|---|---|
| 017 CSS공부 (13) 이미지 하단 텍스트, 다음 메인 예제 실습 (0) | 2021.02.16 |
| 015 CSS공부(11) 갤러리 형식의 리스트 예제 실습 (0) | 2021.02.04 |
| 014 CSS공부(10) FAQ 목록 만들기 예제 실습 (0) | 2021.02.03 |
| 013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습 (0) | 2021.02.01 |
Daily Study/Web Dev
