Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gallery 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;
}
#content h1 {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}
.fixed_img_col {}
.fixed_img_col ul {
border-bottom: 1px solid #ccc;
*zoom:1;
}
.fixed_img_col ul:after {
content: '';
display: block;
clear: both;
}
.fixed_img_col li {
position: relative;
top: 1px;
float: left;
width: 120px;
height: 190px;
border-bottom: 1px solid #ccc;
padding: 20px 15px 0 15px;
}
.fixed_img_col li a {
display: block;
color: #333;
text-decoration: none;
}
.fixed_img_col li a .thumb {
display: block;
position: relative;
background-color: #ededed;
text-align: center;
line-height: 120px;
}
.fixed_img_col li a .thumb img {
width: 120px;
height: 120px;
}
.fixed_img_col li a .thumb em {
display: none;
opacity: .6;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: #000;
color: #fff;
font-weight: bold;
font-family: verdana,sans-serif;
}
.fixed_img_col li a:hover .thumb em {
display: block;
}
.fixed_img_col li a strong {
display: block;
padding: 6px 0 2px;
/*text-decoration: underline;*/
line-height: 1.4;
}
.fixed_img_col li a:hover strong {
text-decoration: underline;
}
.fixed_img_col li p {
color: #666;
font-size: .9em;
}
#content .paragraph {
padding: 5px 0;
}
</style>
</head>
<body>
<div id="content">
<!-- UI Object -->
<h1>Fixed Image+Text Col List</h1>
<div class="fixed_img_col">
<ul>
<li>
<a href="#">
<span class="thumb">
<img src="img/wendy1.png" alt="">
<em>Category</em>
</span>
<strong>이미지 제목</strong>
</a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy2.png" alt=""> <em>Category</em></span> <strong>이미지 제목 이미지 제목 이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy03.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy4.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy5.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy2.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy1.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy03.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy5.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#">
<span class="thumb">
No Images
<em>Category</em>
</span>
<strong>이미지 제목</strong>
</a>
<p>2010-12-24</p>
</li>
</ul>
<p class="paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo repellendus blanditiis suscipit veniam, perspiciatis dolor ab mollitia officia saepe atque voluptate est labore repellat ducimus ipsa maiores? Repudiandae cum, excepturi aliquam officiis dolores ratione illo fuga libero voluptatem voluptas aliquid praesentium facere commodi, ducimus, magnam recusandae est, doloremque dolorem soluta consequatur provident eius dolore. Necessitatibus rem tenetur eum repudiandae quibusdam nulla voluptatem aperiam totam. Necessitatibus earum suscipit ipsa ipsum inventore quos itaque, maiores quas atque odio facere ad sequi consectetur quibusdam consequuntur labore optio quaerat corporis officiis maxime, eius natus dicta unde, ipsam. Quo, voluptatibus odio deleniti quis adipisci neque.</p>
</div>
<!-- //UI Object -->
</body>
</html>
이미지와 제목, 날짜가 나타나고
이미지나 제목 부분 a태그 영역에 마우스를 올리면 이미지가 어두워지고 텍스트가 나타나는 형태의 갤러리
크게 헷갈리는 부분은 없었는데
이미지들의 경우에는 120px * 120px 사이즈를 맞추려고 내가 포토샵에서 잘라서 넣은건데
나중에는
이미지 소스를 그냥 넣어도
알아서 크기대로 잘라서 쓸 수 있게 만들 수도 있을 것 같다.
유튜브 보면 알아서 얼굴인식해서 그 쪽을 위주로 크롭시키게도 코딩할 수 있던데
그건 좀 한참 나중에나 해볼 것 같긴 하지만.. 대충 그런 느낌으로 하면 더 쓸모는 많겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gallery 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;
}
#content h1 {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}
.flexible_img_col {}
.flexible_img_col ul {
border-bottom: 1px solid #ccc;
*zoom:1;
}
.flexible_img_col ul:after {
content: '';
display: block;
clear: both;
}
.flexible_img_col li {
position: relative;
top: 1px;
float: left;
width: 120px;
height: 250px;
border-bottom: 1px solid #ccc;
padding: 20px 15px 0 15px;
}
.flexible_img_col li a {
display: block;
color: #333;
text-decoration: none;
}
.flexible_img_col li a .thumb {
display: block;
overflow: hidden;
position: relative;
background-color: #ededed;
text-align: center;
line-height: 80px;
}
.flexible_img_col li a .thumb img {
width: 100%
}
.flexible_img_col li a .thumb em {
display: none;
opacity: .6;
position: absolute;
left: 0;
top: 50%;
/* 전체를 반만큼 내려간 부분부터 시작하게 함 */
width: 100%;
margin-top: -100px;
/* 마진을 마이너스를 줘서 다시 끌어올림 -> 중간에 맞춰짐 */
background-color: #000;
color: #fff;
font-weight: bold;
font-family: verdana,sans-serif;
line-height: 200px;
/* 제일 큰 이미지를 덮을 수 있는 크기 */
}
.flexible_img_col li a:hover .thumb em {
display: block;
}
.flexible_img_col li a strong {
display: block;
padding: 6px 0 2px;
/*text-decoration: underline;*/
line-height: 1.4;
}
.flexible_img_col li a:hover strong {
text-decoration: underline;
}
.flexible_img_col li p {
color: #666;
font-size: .9em;
}
#content .paragraph {
padding: 5px 0;
}
</style>
</head>
<body>
<div id="content">
<!-- UI Object -->
<h1>Flexible Image+Text Col List</h1>
<div class="flexible_img_col">
<ul>
<li>
<a href="#">
<span class="thumb">
<img src="img/wendy.jpg" alt="">
<em>Category</em>
</span>
<strong>이미지 제목</strong>
</a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy02.jpg" alt=""> <em>Category</em></span> <strong>이미지 제목 이미지 제목 이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy03.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy4.png" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy02.jpg" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy05.jpg" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy.jpg" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy05.jpg" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb"><img src="img/wendy02.jpg" alt=""> <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
<li>
<a href="#"><span class="thumb">No Images <em>Category</em></span> <strong>이미지 제목</strong></a>
<p>2010-12-24</p>
</li>
</ul>
</div>
<!-- //UI Object -->
</body>
</html>
위의 갤러리 리스트랑 거의 비슷한데 이미지의 세로비율이 짧거나 길 때 쓰는 방식이다.
이미지의 가로 값을 아까 기본 값인 120px로 맞춰주면
세로 값이 들쭉날쭉해지는데
어둡게 처리되는 em태그 부분(category라고 적힌 영역)의 크기를 아예 이미지를 넘어가게 크게 넉넉하게 잡고
overflow : hidden; 태그를 써서 넘어간 부분은 가려준다.
그리고 category라는 글씨가 가운데에 위치할 수 있게 하기 위해
position : absolute 를 설정해주고
top : 50%로 위로부터 절반 위치까지 내려준 이후에
margin-top : -100px(설정한 em태그 부분의 높이 절반) 를 적용해서
위로 다시 끌어올리면 중앙에 텍스트가 위치하게 된다.
실제로는 하늘색 네모만큼 em태그가 위치해 있는건데
overflow : hidden 태그로 넘어간 부분은 가리는 것이다.
오늘 한 갤러리는 크게 어려운 부분은 없었다.
이제 내가 혼자 저렇게 뚝딱뚝딱 할 수 있느냐가 관건일 뿐...
오늘은 그냥 하다가 예제랑 똑같은 애기 사진으로 하기 심심해서
승완이 사진들로 예제를 만들었는데
새삼 예전에 승완이랑 SWBD랑 콜라보? 아닌 콜라보했던 때 찍힌 사진이
멋있고 예쁘게 나왔던걸 한참 잊고 있다가 간만에 봐서 기분이 좋았다.
멋진 승완이 하하호호
한쪽 가디건 걸친것도 멋지다
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 017 CSS공부 (13) 이미지 하단 텍스트, 다음 메인 예제 실습 (0) | 2021.02.16 |
|---|---|
| 016 CSS공부(12) 이미지와 텍스트 목록 예제 실습 (0) | 2021.02.09 |
| 014 CSS공부(10) FAQ 목록 만들기 예제 실습 (0) | 2021.02.03 |
| 013 CSS공부(9) 페이징 부분, 탭 메뉴 예제 실습 (0) | 2021.02.01 |
| 012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습 (0) | 2021.01.28 |
Daily Study/Web Dev
