Web/인프런
아코디언 갤러리 html, css 코드 소스
100seo
2022. 1. 20. 21:02
<코드 미리보기>
See the Pen 아코디언 갤러리 by seohyeon baek (@100seo) on CodePen.
미리보기에는 이미지 적용이 안되어서 하얀 배경으로 보입니다.
아래 파일을 저장한 뒤 여시면 정상적으로 이미지가 보입니다.
design100seo_아코디언 갤러리.zip
0.57MB
<read me>
*적용예시
1. 개인 혹은 회사 포트폴리오 카테고리 프리뷰 페이지
회사소개-사업분야-갤러리-오시는길-상담문의
2. 제품판매 사이트 카테고리 프리뷰 페이지
ring-necklace-bracelet-earring-contact
3. 카드뉴스 타이틀 페이지
최근글1-최근글2-최근글3-최근글4-최근글5
*코드 관련
1. 이 코드는 코딩웍스(https://www.youtube.com/codingworks)님의 인프런 HTML+CSS+JS 퍼블리싱 강의 예제를 이용해 제작하였습니다. 원 코드의 소스는 코딩웍스님 강의에 있음을 알립니다.
2. 직접 디자인 할 수 있는 부분(컬러,폰트사이즈 등)은 주석에 설명을 덧붙여놓았습니다.
3. 웹폰트는 따로 삽입해주셔야하며, 화면비 100%외일 경우 레이아웃이 망가지는 점은 공부가 더 필요한 부분인 것 같습니다.
4. 코드에 대해 궁금한 점 혹은 피드백 해야 할 부분은 이메일 deepgreen7362@gmail.com혹은 티스토리 댓글로 남겨주시면 확인하도록 하겠습니다.
<코드블럭>
HTML
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아코디언 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="gallery">
<li>
<div class="content">
<!--제목-->
<h2>Uploads made easy </h2>
<!--부제목-->
<p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.</p>
<!--더보기-->
<a href="#">
<span>Read More</span>
</a>
</div>
</li>
<li>
<div class="content">
<!--제목-->
<h2>Uploads made easy </h2>
<!--부제목-->
<p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.</p>
<!--더보기-->
<a href="#">
<span>Read More</span>
</a>
</div>
</li>
<li>
<div class="content">
<!--제목-->
<h2>Uploads made easy </h2>
<!--부제목-->
<p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.</p>
<!--더보기-->
<a href="#">
<span>Read More</span>
</a>
</div>
</li>
<li>
<div class="content">
<!--제목-->
<h2>Uploads made easy </h2>
<!--부제목-->
<p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.</p>
<!--더보기-->
<a href="#">
<span>Read More</span>
</a>
</div>
</li>
<li>
<div class="content">
<!--제목-->
<h2>Uploads made easy </h2>
<!--부제목-->
<p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.</p>
<!--더보기-->
<a href="#">
<span>Read More</span>
</a>
</div>
</li>
</ul>
</body>
</html>CSS
더보기
body{
line-height: 1.5em;
margin: 0;
}
a{
text-decoration: none;
}
.gallery {
list-style: none;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
.gallery li{
border-right: 5px solid #000;/*각 컨텐츠 사이 선*/
flex: 1;
transition: .5s;
position: relative;
overflow: hidden;
}
.gallery li:last-child{
border-right: none;
}
/*이미지 변경 탭 시작. images파일에 원하는 이미지 넣고 ()안에 경로 넣어주기 */
.gallery li:nth-child(1){
background: url(images/artistic-image-01.jpg) no-repeat center center;
}
.gallery li:nth-child(2){
background: url(images/artistic-image-02.jpg) no-repeat center center;
}
.gallery li:nth-child(3){
background: url(images/artistic-image-03.jpg) no-repeat center center;
}
.gallery li:nth-child(4){
background: url(images/artistic-image-04.jpg) no-repeat center center;
}
.gallery li:nth-child(5){
background: url(images/artistic-image-05.jpg) no-repeat center center;
}
/*이미지 변경 탭 끝*/
.gallery:hover li{
flex: 1;
}
.gallery li:hover{
flex: 3;/*3 비율만큼 커짐*/
filter: grayscale(1);/*0~1까지 흑백처리. 브라우저 호환성 낮음. 삭제가능 */
}
.content{
position: absolute;
background-color: #000;/*컨텐츠박스 배경 색상*/
color: #fff;/*폰트 색상*/
height: 250px;
bottom: -350px;
transition: .5s;
padding-top: 40px;
box-sizing: border-box;
text-align: center;
}
.content a{
position: absolute;
display: block;
font-size: 14px;/*폰트 사이즈*/
text-align: center;
line-height: 30px;
width: 100px;/*박스 사이즈*/
height: 30px;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;/*배경 색상*/
}
.content a:hover{
font-weight: bold;
}
.gallery li:hover .content{
bottom: 0;
transition-delay: .5s;
}
/*컨텐츠박스 위 사선 디자인. 삭제가능*/
.content::before{
content: '';
position: absolute;
background-color: #000;
width: 100%;
height: 80px;
left: 0;
top: 0px;
transform-origin: left bottom;/*기준점*/
transform: rotate(-5deg) scale(1.3);
}