상품 상세페이지 아코디언 부분

$(function(){ /* Include html Files */ $('.gnb-include').load('/include/gnb.html') $('.main-header-include').load('/include/main-header.html') $('.goods-detail-header-include').load('/include/goods-detail-header.html') /* Category - Accordion */ $('.category-accordion .detail').eq(0).show() $('.category-accordion .title').click(function(){ $(this).next().stop().slideDown() $(this).siblings('.category-accordion .title').next().stop().slideUp() $(this).addClass('active') $(this).siblings('.category-accordion .title').removeClass('active') }) /* Recent Search Result */ $('.search-recent .btn-clear').click(function(){ $(this).parent().hide() }) $('.search-recent .btn-all-clear').click(function(){ $('.search-recent .item').hide() }) /* Cart Items */ $('.cart-content .btn-all-clear').click(function(){ $('.cart-item').hide() }) $('.cart-content .btn-clear').click(function(){ $(this).parent().parent().hide() }) /* Front Slider */ $('.front-slider').slick({ slidesToShow: 1, dots: false, arrows: true, autoplay: false, }); /* Goods Suggestion Slider */ $('.goods-suggestion-items').slick({ slidesToShow: 3, dots: false, arrows: true, autoplay: false, slidesToScroll: 2, }); /* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').click(function(){ $(this).toggleClass('active') $(this).next().toggle() $(this).siblings('.goods-accordion .title').removeClass('active') }) /* Goods Order Info */ $('.btn-order-choice').click(function(){ $('.goods-order-choice').hide() $('.goods-order-final').slideDown(250) $('.overlay-fold').show() }) $('.btn-fold, .overlay-fold').click(function(){ $('.goods-order-choice').show() $('.goods-order-final').slideUp(250) $('.overlay-fold').hide() }) /* Wish */ $('.wish').click(function(){ $(this).toggleClass('active') }) /* Front Footer */ $('.btn-view-more').click(function(){ $('.company-info-more').toggle() }) /* Goods Detail Slider */ $('.goods-detail-slider').slick({ slidesToShow: 1, dots: true, arrows: false, autoplay: true, slidesToScroll: 1, }); })

상품 상세페이지 아코디언 부분

/* ##### Goods Detail html ##### */ .goods-detail {} .goods-detail-inner {} .goods-detail-content { padding: 0; } /* Goods Slider CSS */ .goods-detail-slider-outer { position: relative; } .goods-detail-slider.slick-dotted.slick-slider { margin-bottom: 0; } .goods-detail-slider a { width: 100%; height: 350px; } .goods-detail-slider a img { width: inherit; height: inherit; object-fit: cover; } /* Goods Slider Custom CSS */ .goods-detail-slider .slick-dots { bottom: 15px; } .goods-detail-slider .slick-dots li { width: 15px; height: 15px; margin: 0 -3px; } .goods-detail-slider .slick-dots li button:before { color: white; opacity: 1; } .goods-detail-slider .slick-dots li.slick-active button:before { color: var(--crimson); } /* Goods Info */ .goods-info { padding: 20px; } .goods-rating { display: flex; justify-content: flex-end; } .stars {} .stars .bi { color: var(--gold); } .stars em { font-style: normal; font-size: 13px; color: var(--royalblue); } .goods-info .goods-title h3 { font-size: 16px; margin: 10px 0; } .goods-info .goods-title div { justify-content: flex-start; font-size: 20px; gap: 15px; margin-top: 15px; } .goods-info .goods-title div span { margin-right: auto; } .goods-delivery-info { display: flex; margin: 25px 0; border-top: 1px solid var(--gloudy-gray); border-bottom: 1px solid var(--gloudy-gray); padding-top: 20px 0; gap: 10px; } .goods-delivery-info b {} .goods-delivery-info div {} .goods-delivery-info div span { display: block; } .goods-delivery-info div span em { font-style: normal; color: var(--silver-gray); } /* Goods Detail */ .good-detail img { width: 100%; } .good-detail p { padding: 0 20px; text-align: center; } /* Goods Accordion */ .goods-accordion {} .goods-accordion .title { border-bottom: 1px solid var(--gloudy-gray); height: 40px; font-weight: normal; padding-left: 20px; display: flex; align-items: center; position: relative; } .goods-accordion .title:after { content: '\F64D'; position: absolute; font-family: bootstrap-icons; right: 20px; } .goods-accordion .title.active { color: var(--crimson); background-color: yellowgreen; } .goods-accordion .title.active:after { content: '\F63B'; } .goods-accordion .detail { display: none; } /* Goods Order Info */ .goods-order-info { background-color: white; border-radius: 10px 10px 0 0; box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05); padding: 20px; position: fixed; bottom: 0; width: 100%; z-index: 100; } .goods-order-choice { display: flex; align-items: center; gap: 15px; } .goods-order-choice .wish { transform: scale(1.5); flex: 1; } .btn-order-choice { background-color: var(--royalblue); flex: 6; } .goods-order-final { display: none; z-index: 3; } .goods-order-final-info .goods-title { margin: 20px 0; } .goods-order-final-info .goods-title h3 { font-size: 16px; } .goods-order-final-info .goods-title > div { font-size: 20px; margin-top: 15px; } .btn-fold { background-color: transparent; width: 50px; position: absolute; border: none; top: 5px; left: 50%; transform: translateX(-50%); } .overlay-fold { position: fixed; width: 375px; height: 100vh; top: 0; left: 0; display: none; } .payment-benefit { font-size: 13px; margin-top: 20px 0; } .payment-benefit b { font-weight: 400; } .payment-benefit p { color: var(--light-gray); } .payment-benefit p a { text-decoration: underline; } .good-order-btns { display: flex; gap: 10px; } .btn-cart { border: 1px solid var(--royalblue); color: var(--royalblue); background-color: white; } .btn-now-order { background-color: var(--royalblue); }

상품 상세페이지 아코디언 부분

Goods Detail - Today's Meal Kit (사진) (사진) (사진) (사진) (53) new hot 바다향 가득! 해산물 씨키트 해물 스파게티 밀키트 30%11,760원16,800원 배송정보 5만원 이상 구매시 무료 배송 8/24(목) 도착 예정 (평균 배송 소요 2~3일) 제주, 도서, 산간 지역 15,000원 추가 (사진) 입 안에 가득 퍼지는 풍부한 바다 향과 스파케티의 다채로운 2가지 맛의 콤비네이션 (사진) 우스터소스, 간장, 꿀, 레드 와인 식초로 맛을 낸 마리네이드 소사는 풍미를 더해줄 뿐만 아니라 오징어의식감을 더욱 부드럽게 만들어줍니다. (사진) 오늘 메뉴는 아이들이 좋아하는 오징어 토마토 스파게티를 만들어 주세요. 입에서 살살 녹는 Today's Meal Kit 토마토 오징어 스파게티 상품후기(45) (사진) 상품문의 (사진) 배송안내 (사진) 교환 및 반품안내 (사진) 구매하기 내일도착 바다향 가득! 해산물 씨키트 해물 스파게티 밀키트(2인) 1300g 30%11,760원16,800원 1 2 3 4 5 결제 혜택 하나카드 5만원 결제 시 최대 8개월 무이자 할부, PAYCO 생애 첫 결제 시 2,000원 즉시 할인 더보기 장바구니 담기 바로구매

개발자도구

js (글자수 제한이 있어서 따로따로 올립니다 감사합니다!)$(function(){ /* Trigger */ $('.trigger').click(function(){ $(this).toggleClass('active') $('.gnb').toggleClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active') $('.trigger').removeClass('active') }) /* Smooth Scrolling */ $('.menu a, .gototop').click(function(e){ $.scrollTo(this.hash || 0, 900) }) // Change CSS with Scroll $(window).scroll(function(){ if($(window).scrollTop() > 50) { $('header, .gototop').addClass('active') } else { $('header, .gototop').removeClass('active') } }) // Slick.js history $('.history-slider').slick({ dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 2, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }) // Slick.js project photo $('.project-photo').slick({ dots: true, infinite: true, speed: 500, fade: true, autoplay: true, autoplaySpeed: 2000, cssEase:'linear' }) })

개발자도구

반응형 CSS@media (max-width: 768px) { /* Entire Layout */ .cd-section { height: auto; } .cd-section > div { height: auto; } .content { position: static; width: 100%; height: 100%; } /* Header */ header { transition: 0.5s; z-index: 1; } header.active { background: white; border-bottom: 1px solid #ddd; } .menu { display: block; } .slogan { display: none; } .gnb { background-color: #fff; position: fixed; top: 0; right: -270px; width: 250px; height: 100vh; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1); transition: 0.5s; } .gnb.active { right: 0; } .menu { line-height: 40px; margin-top: 60px; } .menu a { display: block; text-align: right; padding-right: 20px; color: black; font-size: 20px; } /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: black; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } .trigger.active span:nth-child(1) { top: 50%; transform: rotate(45deg); } .trigger.active span:nth-child(2) { top: 50%; width: 80%; opacity: 0; } .trigger.active span:nth-child(3) { top: 50%; transform: rotate(-45deg); } /* Gototop */ .gototop { position: fixed; bottom: 20px; left: 20px; z-index: 2; border: 1px solid white; display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; line-height: 52px; transform: translateY(30px); opacity: 0; transition: 0.5s; } .gototop.active { opacity: 1; transform: translateY(0); } /* Hiring Button */ .btn-hiring { right: 20px; bottom: 20px; } .cd-vertical-nav { display: none; } /* ### Section : home ### */ .home-inner { height: 100vh; } .welcome-text { transform: translate(-50%, -50%) scale(0.7); width: 100%; } .home-heading { left: 20px; } .home-heading span { font-size: 50px; } /* ### Section : about ### */ .about-inner { height: auto; padding: 20px; background: #0dace3; } .about-items { width: 100%; position: static; margin-left: 0; transform: none; text-align: center; } .item img { float: none; } /* ### Section : plan ### */ .plan-inner { height: auto; padding: 20px; } .plan-feature { width: 100%; position: static; transform: none; } .plan-feature > div { height: auto; } .plan-info { margin-bottom: 40px; } .plan-info div { float: none; width: 100%; } .plan-heading { padding-right: 0; } .plan-photo img { width: 100%; height: auto; } /* ### Section : awards winner ### */ .awards-inner { height: auto; } .awards-inner > div { float: none; width: 100%; } .about-heading, .victory-jump img { position: static; transform: none; padding: 40px 20px; } .about-heading { width: 100%; } .victory-jump img { text-align: center; } /* ### Section : location winner ### */ .location-inner { height: auto; } .feature { width: 100%; position: relative; top: 0; left: 0; transform: none; } .feature > div { float: none; width: 100%; padding: 20px; } /* ### Section : contact ### */ .contact-inner { height: auto; } .contact-feature { width: 100%; position: static; transform: none; } .contact-feature > div { float: none; width: 100%; } /* ### Section : project ### */ .project-inner { height: auto; border: none; } .tab > div { width: 100%; float: none; } .view-project { width: 100%; } .project-info { padding: 20px; } .detail div { font-size: 13px; } .btn { width: 100%; bottom: -10px; } .project-info p { position: relative;; } /* ##### SubPage : Hiring ##### */ .hiring-info { padding: 20px; } .hiring-main { height: 300px; } .hiring-heading { width: 100%; top: 60%; } .hiring-heading h1 { font-size: 32px; margin-top: 10px; } .hiring-heading span:before, .hiring-heading span:after { background-color: #141414; } .hiring-info > div { float: none; width: 100%; height: auto; } .center-child { position: static; transform: none; width: 100%; } .hiring-slogan { padding: 50px 0; } .hiring-slogan p { font-size: 26px; } .hiring-slogan p:before { top: -72px; left: -60px; } .hiring-contact ul { display: block; width: 100%; } .center-child h2 { font-size: 28px; } /* Featherlight Mobile CSS */ .featherlight .featherlight-close-icon { font-size: 25px; right: 30px; } /* ##### SubPage : Project ##### */ .hiring-main.project-main1, .hiring-main.project-main2, .hiring-main.project-main3 { height: 70vh; } .hiring-main.project-main1 .hiring-heading h1, .hiring-main.project-main2 .hiring-heading h1, .hiring-main.project-main3 .hiring-heading h1 { font-size: 40px; } .photo.project-info { font-size: 19px; } }

개발자도구

스타일 CSS/* Google Web Font : Montserrat */ @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap'); /* FontAwesome CDN 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Reset CSS */ * { box-sizing: border-box; } ul { list-style: none; padding: 0;} a { text-decoration: none; } /* Default CSS */ body { font-family: 'Montserrat', sans-serif; color: #222; font-size: 15px; margin: 0; height: 100vh; background: white; } /* Entire Layout */ .cd-section { height: 100vh; } .cd-section > div { height: 100%; position: relative; } .content { background-color: white; position: absolute; width: calc(100% - 40px); height: calc(100% - 80px); left: 20px; bottom: 20px; overflow: hidden; } /* Header */ header { position: fixed; width: 100%; top: 0; left: 0; } .gnb-inner { width: calc(100% - 40px); height: 60px; margin: auto; line-height: 60px; } .logo { float: left; } .logo img { padding-top: 17px; } .gnb { float: right; } .menu { display: none; } .slogan { font-size: 16px; font-style: italic; } .trigger { display: none; } /* Hiring Button */ .btn-hiring { position: fixed; right: 50px; bottom: 50px; color: white; background-color: black; padding: 10px 20px; border-radius: 20px; box-shadow: 5px 5px 20px #00000017; transition: 0.5s; } .btn-hiring .fa { transform: rotateY(180deg); margin-right: 5px; } .btn-hiring:active { transform: scale(80%); } /* ### Section : project ### */ .project-inner { height: 100%; overflow: hidden; border: 1px solid #ddd; } .tabs { height: 100%; width: 300%; transition: 0.5s; } .tab { width: calc(100% / 3); height: 100%; float: left; } .tab > div { height: 100%; float: left; } .project-info { width: 25%; } .project-photo { width: 75%; overflow: hidden; } input[name='tabmenu'] { display: none; } .btn { position: absolute; left: 0; bottom: 30px; width: 25%; text-align: center; } .btn label{ cursor: pointer; width: 5px; height: 5px; background-color: black; display: inline-block; border-radius: 50%; margin: 8px; position: relative; } .btn label:before { content: ''; display: inline-block; border: 1px solid transparent; width: 17px; height: 17px; border-radius: 50%; position: absolute; left: -6px; top: -6px; transition: 0.3s; } .btn label:hover:before { border: 1px solid #bbb; } input[id='tab1']:checked ~ .btn label[for='tab1']:before, input[id='tab2']:checked ~ .btn label[for='tab2']:before, input[id='tab3']:checked ~ .btn label[for='tab3']:before { border: 1px solid #bbb; } input[id='tab1']:checked ~ .tabs { margin-left: 0; } input[id='tab2']:checked ~ .tabs { margin-left: -100%; } input[id='tab3']:checked ~ .tabs { margin-left: -200%; } /* Project info */ .project-info { padding: 50px; position: relative; } .project-info:before { content: attr(data-text); font-size: 130px; color: #eee; position: absolute; top: -10px; left: 10px; } .project-info h3 { font-size: 20px; position: relative; } .project-info p { font-size: 16px; line-height: 1.6em; } .project-info ul { line-height: 2em; margin: 50px 0; } .project-info ul li:before { content:"\f105"; font-family: fontawesome; margin-right: 10px; } .detail { margin-bottom: 50px; } .detail div { display: inline-block; text-align: center; width: 32.5%; color: #999; } .detail div span { font-size: 36px; font-weight: bold; display: block; color: black; margin-bottom: 10px; } .view-project { background: #3f3f3f; color: white; text-transform: uppercase; font-size: 13px; display: inline-block; width: 250px; padding: 10px; text-align: center; transition: 0.3s; position: relative; } .view-project:hover { background-color: black; } .view-project .fa { transition: 0.3s; } .view-project:hover .fa { margin-left: 10px; } /* ### Section : home ### */ .home-inner { background-color: white; height: 100%; } .home-inner:before { content: ''; background-color: black; position: absolute; top: 0; left: 0; width: 10; height: 100%; animation: overlay 1s 2s ease-in-out both; } .welcome-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; font-weight: 300; text-align: center; line-height: 1.2em; margin: 0; font-family: 'Source Code Pro'; animation: sliderup 2s 0s linear both; } .welcome-text span { display: block; font-size: 20px; } .welcome-text span .fa { color: crimson; } .opacity-image { background: url(/images/section-bg-01.jpg) no-repeat center center; background-size: cover; height: 100%; opacity: 0; animation: opacity-image 1s 2.5s ease-in-out both; } .home-heading { position: absolute; top: 50%; left: 300px; transform: translateY(-50%); } .home-heading span { display: block; font-size: 115px; color: white; font-weight: 600; width: 0%; overflow: hidden; animation: reveal 0.5s 3s ease-in both; } .home-heading span:nth-child(1) { animation-delay: 3s; } .home-heading span:nth-child(2) { animation-delay: 3.2s; } .home-heading span:nth-child(3) { animation-delay: 3.4s; } @keyframes sliderup { 0% { opacity: 0; margin-top: 50px; } 20% { opacity: 1; margin-top: 0; } 40% { opacity: 1; margin-top: 0; } 100% { opacity: 0; } } @keyframes overlay { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0%; left: 100%; } } @keyframes opacity-image { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes reveal { 0% { width: 0; } 100% { width: 100%; } } /* ### Section : about ### */ .about-inner { background: #0dace3 url(/images/line-drawing.png)no-repeat right bottom; height: 100%; } .about-items { width: 50%; color: white; position: absolute; top: 50%; transform: translateY(-50%); left: 100px; } .item { overflow: hidden; margin-bottom: 40px; } .item:hover img { filter: invert(0); transition: 0.5s; } .item img { height: 120px; float: left; margin-right: 20px; filter: invert(1); } .item h3 { font-size: 28px; font-weight: 500; margin: 0; transition: 0.5s; letter-spacing: -1px; } .item:hover h3 { color: black; } .item p { overflow: hidden; font-size: 18px; } /* Slick.js Custom CSS */ .history-slider .slick-arrow { display: none !important; } .history-slider .slick-dots li button:before { font-size: 40px; color: white; } .history-slider .slick-dots li { margin: 0; } /* Featherlight Custom CSS */ .featherlight .featherlight-content { position: relative; text-align: left; vertical-align: middle; display: inline-block; overflow: auto; padding: 0; border-bottom: 25px solid transparent; margin-left: 0; margin-right: 0; max-height: 100%; background: #fff; cursor: auto; white-space: normal; width: 100%; height: 100%; } .featherlight iframe { border: none; width: 100%; height: 100%; } .featherlight .featherlight-close-icon { position: absolute; z-index: 9999; top: 30px; right: 70px; line-height: 25px; width: 25px; cursor: pointer; text-align: center; font-family: Arial, sans-serif; background: #fff; background: rgba(255, 255, 255, 0.3); color: #000; border: none; padding: 0; font-size: 40px; outline: none; }

개발자도구

html (10000자 이하로 적으라고 해서 about섹션까지만 적었어요!) DesignWorks Architecture Agency You can do it with CodingWorks Creative Architecture Specialists (사진) Together we can make an impact Design Works the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs. (사진) We’re always looking for talent If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available. (사진) Fellowship Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer. (사진) Home About Project Plan & History Awards Location Contact We design places, not projects. (사진) Hiring Next Prev