복습으로 혼자 해봤는데 slick을 입히면 project-phot... - 인프런

반응형 웹사이트 포트폴리오(Architecture Agency)

PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더)

복습으로 혼자 해봤는데 slick을 입히면 project-photo가 안보입니다.

2021-04-26T09:49:11.469Z

497

wodnjs306

작성한 질문수 25

강사님 안녕하세요!

home 섹션까지 전부 마치고 전체적으로 제 힘으로 다시 만들어보고 있는 중인데 아무리 삽질해도 안되는 부분이 생겨 질문드립니다...

project 섹션에서 html/css를 전부 구축하고 slick 효과를 넣는 과정에서 강사님처럼 slick을 입혔는데 .project-photo 영역이 전부 흰색으로 보이는 현상이 발생했습니다.

완성본이랑 비교해보는 중인데 일단 css를 완성본으로 덮어씌우면 slick 효과가 입혀지는 것으로 확인돼서 css에 문제가 있는 것 같다고 판단했습니다.

html은 완성본과 같은 상태이고 css는 복습과정에서 강사님 css 순서와 다르게 써내려가고 있는데 어디가 잘못된건지 도통 못찾겠습니다... ㅠㅠ 확인 한번만 부탁드립니다 ㅠㅠ

.project-inner{
background-color: #fff;
border: 1px solid #ddd;
}
.tabs{
width: 300%;
height: 100%;
transition: 0.5s;
}
.tab{
width: 33.33333%;
height: 100%;
float: left;
}
input[id=tab1]:checked ~ .tabs {
margin-left: 0;
}
input[id=tab2]:checked ~ .tabs {
margin-left: -100%;
}
input[id=tab3]:checked ~ .tabs {
margin-left: -200%;
}

input[type=radio]{
display: none;
}
.btn{
width: 36%;
height: 10px;
position: absolute;
bottom: 30px;
left: 40px;
}
.btn label{
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
display: block;
float: left;
margin: 0 10px;
position: relative;
cursor: pointer;
}
.btn label:first-child{
margin-left: 6px;
}
.btn label:before{
content: '';
display: block;
position: absolute;
top: -6px;
left: -6px;
width: 17px;
height: 17px;
border: 1px solid transparent;
border-radius: 50%;
transition: 0.5s;
}
.btn label:hover::before{
border: 1px solid #aaa;
}
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 #ddd;
}


.project-info{
width: 37%;
float: left;
padding-top: 20px;
padding-left: 40px;
}
.project-info h3{
margin-top: 35px;
font-size: 22px;
}
.project-info ul{
margin-bottom: 30px;
}
.project-info ul li{
margin: 10px 0;
}
.project-info ul li i{
font-size: 14px;
}
.project-info .detail{
margin-bottom: 30px;
}
.project-info .detail div{
font-size: 12px;
display: inline-block;
text-align: center;
margin: 0 15px;
}
.project-info .detail div span{
font-size: 30px;
display: block;
}
.project-info button{
border: none;
width: 230px;
padding: 12px 0;
text-transform: uppercase;
background-color: #3f3f3f;
color: #fff;
transition: 0.5s;
cursor: pointer;
}
.project-info button .fas{
transition: 0.3s;
}
.project-info button:hover{
background-color: #000;
}
.project-info button:hover .fas{
padding-left: 20px;
}
.project-photo{
width: 60%;
height: 100%;
float: right;
position: relative;

overflow: hidden;
}
.project-photo img{
position: absolute;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

웹 디자인 jquery HTML/CSS 반응형-웹

답변 2

코딩웍스(Coding Works)

2021-05-01T03:28:25.218Z

슬릭 슬라이더 안보이는 문제 해결했는데요. 시간이 좀 걸린 이유가 제가 만든 코드랑 다르게 만드셔서 그래요.

JS 문제는 아니구요. CSS 문제에요.

제가 만든 강의 영상 코드는 .tab 밑에 .project-info 와 .project-photo에 아래 처럼 CSS가 되어 있거든요.

.tab > div {

height: 100%;

float: left;

}

.project-info {

width: 25%;

}

.project-photo {

width: 75%;

overflow: hidden;

}

작성하신 코드에는 너무 불필요한 속성이 많이 들어가 있어요. 특히 .project-photo img 라는 선택자는 필요가 없는데... 여기에 positon: absolute가 있어서 slick css에 있는 position 속성과 충돌이 나서 그런 것 같아요. 슬릭은 요소가 있으면 알아서 div로 묶어서 position 속성으로 제어하거든요.

일단 .project-photo img 선택자면 없어지면 문제해결되요. 곧 이 선택자에서 준 absolute가 문제가 되서 슬릭이 안보인거에요.

.project-photo {
  width: 60%;
  /* height: 100%; */
  float: right;
  /* position: relative;
  overflow: hidden;
  border: 5px solid red; */
}

.project-photo img {
  /* position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}

wodnjs306

2021-05-03T11:46:07.135Z

진짜 길고 제멋대로라 파악하기 너무 힘드셨을 것 같은데 찾아주셔서 감사합니다 ㅠㅠㅠ

제이쿼리 라이브러리가 들어갈 곳에는 css 제어를 함부로 하면 안되는 것이군요!!

깨달음을 얻었어요 감사합니다 ㅠㅠ

코딩웍스(Coding Works)

2021-04-27T12:02:28.786Z

제가 이번주에 강의를 시작해서 정신이 없어서 답변을 빨리 못드렸네요.

죄송합니다...ㅠㅠ

혹시 해결이 되셨나요? 해결 아직 못하셨으면 코드 올려주세요.

CSS만 가지고는 알 수 없구요. 풀코드가 있어야 해요.

html, css, js 풀 코드를 답글로 올려주세요.

wodnjs306

2021-04-28T12:35:42.155Z

아직 해결 못했습니다ㅠㅠㅠ HTML / CSS / JS 순서대로 풀코드 올렸습니다!!
번거로운 검사하시게 해드려서 죄송하고 감사합니당 ㅜㅜ
@@@@@@@@@@@@@@ HTML
<!doctype html>
<html lang="en" class="no-js">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DesignWorks Architecture Agency</title>

<script src="js/jquery-2.1.4.js"></script>
<!-- Page scroll -->
<script src="js/velocity/velocity.min.js"></script>
<script src="js/velocity/velocity.ui.min.js"></script>
<script src="js/velocity/main.js"></script>
<link rel="stylesheet" href="js/velocity/velocity2.css">
<!-- Smooth scroll -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- Custom Js&Css -->
<script src="custom2.js"></script>
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="responsive2.css">
<!-- Slick Js&Css -->
<script src="js/slick/slick.min.js"></script>
<link rel="stylesheet" href="js/slick/slick-theme.css">
<link rel="stylesheet" href="js/slick/slick.css">
<!-- FontAwesome CDN 5.15.3 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">


</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->

<body data-hijacking="on" data-animation="rotate">

<section class="cd-section" id="home">
<div>
<div class="content">
<div class="home-inner">
<!-- welcome-text home-heading -->
<h3 class="welcome-text">
You can do it <span>with CodingWorks<i class="fas fa-heart"></i></span>
</h3>
<div class="opacity-image"></div>
<div class="home-heading">
<span>Creative</span>
<span>Architecture</span>
<span>Specialists</span>
</div>
</div>
</div>
</div>
</section>

<section class="cd-section" id="about">
<div>
<div class="content">
<div class="about-inner">
<div class="about-items">
<div class="item">
<div class="icon">
<img src="images/careers-main-01.png">
</div>
<div class="text">
<h3>Together we can make an impact</h3>
<p>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.</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="images/careers-main-02.png">
</div>
<div class="text">
<h3>We’re always looking for talent</h3>
<p>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.</p>
</div>
</div>
<div class="item">
<div class="icon">
<img src="images/careers-main-03.png">
</div>
<div class="text">
<h3>Fellowship</h3>
<p>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.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="cd-section visible" id="project">
<div>
<div class="content">
<div class="project-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tabs">
<div class="tab">
<div class="project-info">
<h3>Project : Glass Wall Architecture</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, temporibus recusandae unde neque
excepturi eius ad aliquam non iusto officiis!</p>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<b>Area</b> : 1670 m2
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Completed Date</b> : September 2018
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Architect</b> : Andrew Yu
</li>
</ul>
<div class="detail">
<div>
<span>225</span>
WORKING DAY
</div>
<div>
<span>320</span>
MEMBERS
</div>
<div>
<span>3M</span>
BUDGET
</div>
</div>
<button>
view-project
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
<div class="tab">
<div class="project-info">
<h3>Project : Glass Wall Architecture</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, temporibus recusandae unde neque
excepturi eius ad aliquam non iusto officiis!</p>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<b>Area</b> : 1670 m2
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Completed Date</b> : September 2018
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Architect</b> : Andrew Yu
</li>
</ul>
<div class="detail">
<div>
<span>225</span>
WORKING DAY
</div>
<div>
<span>320</span>
MEMBERS
</div>
<div>
<span>3M</span>
BUDGET
</div>
</div>
<button>
view-project
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
<div class="tab">
<div class="project-info">
<h3>Project : Glass Wall Architecture</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, temporibus recusandae unde neque
excepturi eius ad aliquam non iusto officiis!</p>
<ul>
<li>
<i class="fas fa-chevron-right"></i>
<b>Area</b> : 1670 m2
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Completed Date</b> : September 2018
</li>
<li>
<i class="fas fa-chevron-right"></i>
<b>Architect</b> : Andrew Yu
</li>
</ul>
<div class="detail">
<div>
<span>225</span>
WORKING DAY
</div>
<div>
<span>320</span>
MEMBERS
</div>
<div>
<span>3M</span>
BUDGET
</div>
</div>
<button>
view-project
<i class="fas fa-long-arrow-alt-right"></i>
</button>
</div>
<div class="project-photo">
<img src="images/project-main-01-01.jpg">
<img src="images/project-main-01-02.jpg">
<img src="images/project-main-01-03.jpg">
<img src="images/project-main-01-04.jpg">
</div>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>

</div>
</div>
</div>
</section>
<section class="cd-section" id="plan">
<div>
<div class="content">
<div class="plan-inner">
<div class="plan-feature">
<div class="plan-info">
<div class="plan-heading">
<h3>Planning <br>For the Next Project</h3>
<hr class="bar">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque quibusdam quaerat id delectus neque
corrupti assumenda nesciunt suscipit sunt laboriosam, ad tempore vitae iure quae! Aut deleniti dolorem
</p>
</div>
<div class="plan-photo">
<img src="images/plan-main-01.jpg">
</div>
</div>
<div class="history-info">
<h3>History</h3>
<hr class="bar">
<div class="history-slider">
<div class="item">
<h4>The Project of Architect for the <span>2013</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2014</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2015</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2016</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2017</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2018</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2019</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2020</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="item">
<h4>The Project of Architect for the <span>2021</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus ea libero nam fugit autem odit?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="awards">
<div>
<div class="content">
<div class="awards-inner">
<div class="about-awards">
<div class="about-heading">
<h3>
2020<br>
Architecture Award<br>
Winner
</h3>
<hr class="bar">
<p>The mission of the Architecture MasterPrize (AMP) is to advance the appreciation and exposure of
quality
architectural design worldwide. The AMP architecture award celebrates creativity and innovation in the
fields of architectural design, landscape architecture, and interior design. Submissions from architects
all around the world are welcome.
</p>
<a class="view-awards">view the awards</a>
</div>
</div>
<div class="victory-jump">
<img src="images/victory-jump.png">
</div>
</div>
</div>
</div>
</section>
<section class="cd-section" id="location">
<div>
<div class="content">
<div class="location-inner">
<div class="feature">
<div class="office">
<div class="headquarters">
<span>CREATIVE DESGIN GROUP</span>
<h3>Headquarters</h3>
<p>
spanorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam ab iure alias cum sapiente at
laudantium
explicabo ad magnam corrupti.
</p>
<p class="address">
Address: 309, New Cavendish St, EC1Y 3WK / Tel : 0800 214 5252
</p>
</div>
<div class="customer">
<span>THE PERFECT WAY</span>
<h3>Customer Service</h3>
<p>
spanorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam ab iure alias cum sapiente at
laudantium
explicabo ad magnam corrupti.
</p>
<p class="address">
Address : 11 Fifth Ave - New York, US / Tel : 0800 809 3400
</p>
</div>
</div>
<div class="service">
<div class="service-items">
<div class="item">
<i class="fas fa-leaf"></i>
<h4>Built and natural contexts</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
accusamus inventore.</p>
<div class="item">
<i class="fas fa-bullseye"></i>
<h4>Landscape design</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
accusamus inventore.</p>
<div class="item">
<i class="fas fa-cube"></i>
<h4>Every building site unique</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
accusamus inventore.</p>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</section>
<section class="cd-section" id="contact">
<div>
<div class="content">
<div class="contact-inner">
<div class="contact-feature">
<div class="contact-form">
<h3><b>Contact</b> Us</h3>
<p>Feel free to ask for details, dont’save any questions.</p>
<h4>Email <span>*</span></h4>
<form class="send-box">
<input type="email">
<h4>Subject <span>*</span></h4>
<input type="text">
<h4>Message <span>*</span></h4>
<textarea cols="30" rows="10"></textarea>
<button>
send messages
</button>
</form>
</div>
<div class="contact-info">
<h4>Our <b>Office</b></h4>
<ul>
<li>
Address : Address: 309, New Cavendish St, EC1Y 3WK
</li>
<li>
Phone : 0800 214 5252
</li>
<li>
Email : designworks@designworks.com
</li>
</ul>
<h4>Business <b>Hours</b></h4>
<ul>
<li>
<i class="far fa-clock"></i>Monday - Friday : 9am to 5pm
</li>
<li>
<i class="far fa-clock"></i>Saturday : 9am to 2pm
</li>
<li>
<i class="far fa-clock"></i>Sunday : Closed
</li>
</ul>
<h4>Get in <b>Touch</b></h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident consequatur minus deleniti? Quia
error animi tenetur veritatis consequuntur sapiente perspiciatis quae atque. Aliquam, sint quas?</p>
</div>
</div>
</div>
</div>
</div>
</section>
<header>
<div class="gnb-inner">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="opacity-black"></div>
<div class="gnb">
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#project">Project</a>
<a href="#plan">Plan & History</a>
<a href="#awards">Awards</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</div>
<div class="slogan">
We design places, not projects.
</div>
</div>
<div class="trigger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<div class="gototop">
<a href="#"><i class="fas fa-arrow-up"></i></a>
</div>
<div class="hiring">
<a><i class="far fa-comment-dots"></i>hiring</a>
</div>
</body>
</html>
@@@@@@@@@@@@@@ CSS
/* Google Web Font : Montserratet */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@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");

/* FontAwesome CDN 5.15.3 */
@import url("https://use.fontawesome.com/releases/v5.15.3/css/all.css");

/* Reset CSS */
* {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
body{
margin: 0;
}

/* Default CSS */
body{
font-family: 'Montserrat', sans-serif;
color: #222;
height: 100vh;
}

.cd-section{
height: 100%;
}
.cd-section > div{
height: 100%;
position: relative;
}

/* Entire Layout */
.content{
width: calc(100% - 40px);
height: calc(100% - 80px);
margin: 60px 20px 20px 20px;
background-color: #ddd;
overflow: hidden;
}
.content > div{
width: 100%;
height: 100%;
position: relative;
}

/* Header */
header{
position: relative;
width: 100%;
height: 60px;
}
.gnb-inner{
line-height: 60px;
width: calc(100% - 40px);
margin: auto;
}
.logo{
float: left;
cursor: pointer;
}
.gnb{
float: right;
}
.gnb .menu{
display: none;
}
.gnb .slogan{
float: right;
}
/* gototop */
.gototop{
display: none;
}
/* Hiring */
.hiring {
position: fixed;
bottom: 40px;
right: 40px;
color: #fff;
text-align: center;
border-radius: 20px;
padding: 10px 20px;
background-color: #000;
transition: 0.3s;
cursor: pointer;
}
.hiring a i{
padding-left: 5px;
font-size: 20px;
transform: rotateY(180deg);
}
.hiring:active{
transform: scale(0.8);
}

/* ################### section : home ################### */
.home-inner{
background-color: #fff;
position: relative;
}
.home-inner::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #000;
animation: overlay 1s 1.3s both;
}

.welcome-text{
font-family: 'Source Sans Pro', sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: 300;
text-align: center;
opacity: 0;
animation: slideup 1.5s both;
}

.welcome-text span{
display: block;
font-size: 26px;
line-height: 2em;
}
.welcome-text span i{
color: crimson;
padding-left: 5px;
}
.opacity-image{
background: url(images/section-bg-01.jpg) no-repeat center center / cover;
width: 100%;
height: 100%;
opacity: 0;
animation: opacity 1s 2.0s both;
}
.home-heading{
position: absolute;
top: 50%;
left: 230px;
transform: translateY(-50%);
color: #fff;
font-size: 90px;
font-weight: bold;
}
.home-heading span{
display: block;
overflow: hidden;
animation: reveal 0.5s linear both;
}
.home-heading span:nth-child(1){
animation-delay: 2.4s;
}
.home-heading span:nth-child(2){
animation-delay: 2.6s;
}
.home-heading span:nth-child(3){
animation-delay: 2.8s;
}
@keyframes slideup{
0%{
opacity: 0;
top: 70%;
}
20%{
opacity: 1;
top: 50%;
}
80%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes overlay{
0%{
left: 0;
width: 0;
}
50%{
left: 0;
width: 100%;
}
100%{
left: 100%;
}
}
@keyframes opacity{
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 / 45%;
}
.about-items{
position: absolute;
width: 70%;
top: 50%;
left: 45%;
transform: translate(-50%, -50%);
}
.item{
position: relative;
}
.item .icon{
float: left;
width: 100px;
filter: invert(1);
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
.item .icon img{
width: 100%;
}
.item .text{
margin-left: 130px;
}
.item .text h3{
color: #fff;
font-size: 26px;
margin: 0;
transition: 0.3s;
}
.item .text p{
overflow: hidden;
font-size: 18px;
color: #fff;
}
.item:hover .icon{
filter: invert(0);
}
.item:hover .text h3{
color: #222;
}
/* ################### section : project ################### */
.project-inner{
background-color: #fff;
border: 1px solid #ddd;
}
.tabs{
width: 300%;
height: 100%;
transition: 0.5s;
}
.tab{
width: 33.33333%;
height: 100%;
float: left;
}
input[id=tab1]:checked ~ .tabs {
margin-left: 0;
}
input[id=tab2]:checked ~ .tabs {
margin-left: -100%;
}
input[id=tab3]:checked ~ .tabs {
margin-left: -200%;
}

input[type=radio]{
display: none;
}
.btn{
width: 36%;
height: 10px;
position: absolute;
bottom: 30px;
left: 40px;
}
.btn label{
width: 5px;
height: 5px;
background-color: #000;
border-radius: 50%;
display: block;
float: left;
margin: 0 10px;
position: relative;
cursor: pointer;
}
.btn label:first-child{
margin-left: 6px;
}
.btn label:before{
content: '';
display: block;
position: absolute;
top: -6px;
left: -6px;
width: 17px;
height: 17px;
border: 1px solid transparent;
border-radius: 50%;
transition: 0.5s;
}
.btn label:hover::before{
border: 1px solid #aaa;
}
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 #ddd;
}


.project-info{
width: 37%;
float: left;
padding-top: 20px;
padding-left: 40px;
}
.project-info h3{
margin-top: 35px;
font-size: 22px;
}
.project-info ul{
margin-bottom: 30px;
}
.project-info ul li{
margin: 10px 0;
}
.project-info ul li i{
font-size: 14px;
}
.project-info .detail{
margin-bottom: 30px;
}
.project-info .detail div{
font-size: 12px;
display: inline-block;
text-align: center;
margin: 0 15px;
}
.project-info .detail div span{
font-size: 30px;
display: block;
}
.project-info button{
border: none;
width: 230px;
padding: 12px 0;
text-transform: uppercase;
background-color: #3f3f3f;
color: #fff;
transition: 0.5s;
cursor: pointer;
}
.project-info button .fas{
transition: 0.3s;
}
.project-info button:hover{
background-color: #000;
}
.project-info button:hover .fas{
padding-left: 20px;
}
.project-photo{
width: 60%;
height: 100%;
float: right;
position: relative;

overflow: hidden;
}
.project-photo img{
position: absolute;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


/* ################### section : plan ################### */
.plan-inner{
background-color: #1d1b24;
}
.plan-feature{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
color: #fff;
}
.plan-info{
display: block;
overflow: hidden;
}
.plan-info .plan-heading{
width: 60%;
float: left;
padding-right: 50px;
}
.plan-info .plan-heading h3,
.history-info h3{
font-size: 34px;
margin: 0;
font-weight: normal;
}
.plan-info .plan-heading .bar,
.history-info .bar{
display: inline-block;
width: 50px;
height: 4px;
background-color: dodgerblue;
border: none;
margin: 20px 0;
}
.plan-info .plan-heading p,
.history-slider .item p{
margin: 0;
font-size: 16px;
color: #bbb;
line-height: 1.5em;
}
.plan-info .plan-photo{
width: 40%;
height: 250px;
float: right;
overflow: hidden;
text-align: center;
position: relative;
}
.plan-info .plan-photo img{
height: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.history-info{
margin: 0;
}

.history-slider .item h4{
margin: 0;
font-size: 20px;
font-weight: normal;
line-height: 1.3em;
}
.history-slider .item h4 span{
color: dodgerblue;
}

/* ################### section : awards ################### */
.awards-inner{
background-color: #fff;
border: 1px solid #eee;
}
.about-awards{
width: 50%;
height: 100%;
float: left;
background-color: #1a1f24;
text-align: center;
position: relative;
}
.about-awards .about-heading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.about-awards .about-heading h3{
color: #fff;
font-size: 40px;
font-weight: normal;
margin: 0;
}
.about-awards .about-heading .bar{
background-color: crimson;
width: 40px;
height: 4px;
border: none;
display: inline-block;
margin: 20px 0;
}
.about-awards .about-heading p{
margin: 0;
color: #bbb;
line-height: 1.5em;
}
.about-awards .about-heading .view-awards{
display: inline-block;
margin-top: 20px;
border: 1px solid #bbb;
padding: 10px 20px;
border-radius: 20px;
color: #bbb;
}
.victory-jump{
width: 50%;
height: 100%;
float: right;
position: relative;
overflow: hidden;
}
.victory-jump img{
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ################### section : location ################### */
.location-inner{
background: url(images/background-location.jpg) no-repeat center center / cover;
}
.location-inner::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-color: rgba(0, 0, 0, 0.692);
}
.feature{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.office{
color: #fff;
width: 50%;
float: left;
padding-right: 30px;
}
.office .headquarters{
margin-bottom: 20px;
}
.office span{
color: #bbb;
}
.office h3{
font-size: 40px;
margin: 0;
color: #1db1f0;
}
.office p{
color: #bbb;
line-height: 1.5em;
font-size: 18px;
margin: 0;
margin-top: 10px;
}
.office .address{
font-size: 12px;
color: #fff;
}
.service .service-items{
width: 50%;
float: right;
}
.service .service-items .item .fas{
color: #1db1f0;
font-size: 34px;
margin-bottom: 12px;
}
.service .service-items .item h4{
color: #fff;
margin: 0;
font-size: 24px;
}
.service .service-items .item p{
color: #bbb;
overflow: hidden;
}

/* ################### section : contact ################### */
.contact-inner{
background-color: #fff;
border: 1px solid #ddd;
}
.contact-feature{
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-form{
width: 50%;
float: left;
padding-right: 42px;
}
.contact-form h3{
font-size: 30px;
font-weight: normal;
margin: 0;
}
.contact-form h4{
font-size: 18px;
margin: 0 0 8px 0;
}
.contact-form h4 span{
color: crimson;
font-weight: normal;
}
.send-box input,
.send-box textarea{
width: 100%;
border: 1px solid #ccc;
margin-bottom: 15px;
transition: 0.3s;
outline: none;
padding: 10px;
}
.send-box input:hover,
.send-box textarea:hover{
box-shadow: 0 0 5px #0088cc;
}
.send-box input:focus,
.send-box textarea:focus{
background-color: #eee;
}
.send-box input{
padding: 10px;
}
.send-box textarea{
height: 100px;
}
.send-box button{
border: none;
background-color: #0088cc;
color: #fff;
padding: 10px 15px;
border-radius: 3px;
text-transform: uppercase;
}
.contact-info{
width: 50%;
float: right;
}
.contact-info h4{
font-weight: normal;
font-size: 20px;
margin: 0;
}
.contact-info ul{
margin-bottom: 28px;
}
.contact-info ul li{
margin-top: 10px;
}
.contact-info ul li:last-child{
color: #0088cc;
}
.contact-info ul li .far{
margin-right: 6px;
}
.contact-info p{
line-height: 1.5em;
}
@@@@@@@@@@@@@@ JS
$(function () {
// Trigger
$('.trigger').click(function () {
$('.gnb, .trigger, .opacity-black').toggleClass('active')
})
$('.opacity-black').click(function () {
$(this).removeClass('active');
})
// Smooth Scrolling
$('.menu a').click(function () {
$.scrollTo(this.hash || 0, 900)
$('.gnb, .opacity-black').removeClass('active')
})

// Change CSS with Scroll
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$('header, .gototop').addClass('active');
}
else {
$('header, .gototop').removeClass('active');
}
})
$('.opacity-black').click(function () {
$('.gnb').removeClass('active')
})

// slick.js : history
$('.history-slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
});
// slick.js : project-photo
$('.project-photo').slick({
dots: true,
infinite: true,
speed: 500,
fade: false,
autoplay: true,
autoplaySpeed: 2000,
// cssEase: 'linear'
})
})

full reload 질문

2024-11-30T03:41:58.992Z

178

섹션4에 있는 4번째 강의 질문(스크롤링)

2024-09-19T03:45:04.892Z

148

안녕하세요. 질문있어서 조심스레 글을 올려봅니다.

2024-08-08T01:21:53.770Z

197

브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ

2024-06-28T06:28:01.811Z

316

css full reload 문제가 발생하여 질문드립니다!

2024-06-20T07:45:22.613Z

315

파일 내 index.html에 대한 오류

2024-06-19T07:00:11.154Z

264

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ

2024-06-18T00:10:03.829Z

207

모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다

2024-06-17T08:55:59.546Z

218

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!

2024-06-14T08:03:50.961Z

201

모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.

2024-06-14T02:22:49.130Z

255

크로스브라우징-크롬

2024-05-08T06:15:27.824Z

280

섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..

2024-04-11T10:41:06.558Z

256

line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다

2024-04-01T02:56:42.894Z

217

슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다

2024-03-20T01:17:06.926Z

274

이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?

2024-03-15T04:58:40.813Z

257

모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역

2024-02-23T01:44:23.184Z

507

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4

2024-02-16T02:57:36.612Z

233

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3

2024-02-16T02:56:36.455Z

308

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2

2024-02-16T02:55:24.833Z

259

PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태

2024-02-16T02:52:20.315Z

422

포지션 속성 중복과 관련해서

2024-01-21T02:47:21.036Z

213

section about에 관련.. 궁금해요

2024-01-17T07:11:19.596Z

253

섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련

2024-01-11T08:25:19.947Z

190

개발자도구

2023-10-25T02:04:47.317Z

479