-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
화면겹침 현상
21.09.24 19:05 작성 조회수 411
1
<!-- Section : welcome -->
<section class="welcome">
<div class="slideshow">
<img src="images/slide-welcome-01.png">
<img src="images/slide-welcome-02.png">
<img src="images/slide-welcome-03.png">
</div>
<div class="welcome-heading">
<span>창의적인 아이디어를 만드는 가장 빠른 방법</span>
<h1>
An idea solution of startup for your
<em id="typing"></em></em>
</h1>
<p>
스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다.
</p>
<div class="welcome-btns">
<a href="#none" class="btn start">CEO 시작하기</a>
<a href="#none" class="btn guide">사용자 가이드</a>
</div>
</div>
</section>
<!-- Section : ceo-access -->
<section class="ceo-access">
<div class="ceo-inner">
<div class="ceo-content">
<div class="ceo-left">
<img src="images/quotation-mark.svg">
<h3>3 Pre-made Solutions for your Startup Business</h3>
<p>
창의적인 아이디어를 가장 빠르게 창출할 수 있는 최고의 앱 솔루션을 제공합니다. 여러분의 스타트업을 더욱 성장시키기 위해 온 힘을 다할 것이며, STARTUP MATE는 항상 동반자가 되겠습니다. 감사합니다.
</p>
<span>앤드류 - 스타트업 메이트 대표이사</span>
</div>
<div class="ceo-right">
<div class="ceo-msg">
<h3>Application Downloads
<span>30,000+</span>
</h3>
<p>
스타트업메이트는 앱 다운로드 30,000명 이상의 앱 사용자의 충분한 피드백을 통해 검증된 서비스를 제공합니다.
</p>
</div>
<div class="ceo-photo">
<img src="images/icon-face-ceo.jpg">
</div>
</div>
</div>
</div>
<div class="access-inner">
<div class="access-content">
<div class="access-left">
<h2>언제나 어디서나 즐겁고 편리한 액세스 스타트업 CEO들의 커뮤니티</h2>
<p>
언제나 어디서나, 즐겁고 편리한 액세스가 가능합니다.
회원 가입은 쉽고 간단합니다. 무료 회원 가입 후 로그인하시면 업데이트 된 스타트업 메이트의 서비스를 받으실 수 있습니다.
</p>
<div class="btn-download">
<a href="#none">
<img src="images/btn-appstore.png">
</a>
<a href="#none">
<img src="images/btn-playstore.png">
</a>
</div>
</div>
<div class="access-right">
<img src="images/access-mockup.png">
</div>
</div>
</div>
</section>
/* ################### Section : welcome ################### */
.welcome {
height: 90vh;
position: relative;
}
/* .slideshow {} */
.welcome-heading {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 200px;
text-align: center;
width: 750px;
}
.welcome-heading span {
font-size: 24px;
}
.welcome-heading h1 {
font-family: 'Montserrat', sans-serif;
font-size: 60px;
font-weight: 600;
line-height: 1.2em;
margin-bottom: 30px;
margin-top: 15px;
}
.welcome-heading h1 em {
display: block;
font-style: normal;
color: rgba(226, 57, 57, 0.959)
}
.welcome-heading p {
padding: 0 100px;
margin-bottom: 50px;
}
.welcome-btns {}
.welcome-btns .btn {
display: inline-block;
width: 160px;
padding: 8px;
color: #fff;
border-radius: 5px;
margin: 5px;
transition: 0.5s;
}
.btn.start {
background-color: skyblue;
}
.btn.guide {
background-color: #fff;
color: #222;
}
.welcome-btns .btn:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.699);
transform: translateY(-3px);
}
/* ################### Section : ceo-access ################### */
/* .ceo-access {} */
.ceo-inner, .access-inner {
display: block;
width: 1300px;
margin: auto;
}
.ceo-content {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 50px 0;
}
.ceo-content > div {
float: left;
width: 50%;
}
.ceo-left {
padding-right: 60px;
}
.ceo-left img {
width: 30px;
}
.ceo-left h3 {
font-weight: bold;
}
.ceo-right {
text-align: center;
}
.ceo-right > div {
float: left;
padding: 20px;
}
.ceo-msg {
width: 60%;
}
.ceo-msg h3 {
font-size: 28px;
color: rgb(31, 146, 102);
}
.ceo-msg h3 big {
display: block;
}
.ceo-photo {
width: 40%;
}
.ceo-photo img {
border-radius: 15px;
width: 100%;
}
.access-content {
padding: 50px 0;
padding-bottom: 0;
overflow: hidden;
}
.access-content > div {
float: left;
width: 50%;
}
.access-left {
padding-right: 50px;
padding-top: 85px;
}
.access-right {
text-align: center;
}
.access-right img {
display: block;
float: right;
}
.btn-download {
margin-top: 30px;
}
안녕하세요 선생님, banner강의까지 들은 후 인터넷창을 줄이거나 늘이거나 하면서 장난(?)을 치던 와중, 인터넷 창의 높이가 일정 부분 이하가 되었을 경우 사진과 같이 welcome의 slideshow부분과 ceo-access부분이 겹치게 되면서 ceo-access의 일부가 보이지 않게 된다는 것을 발견하였습니다.
혹시 자연스러운 현상인건지, 아니면 제가 무언가를 실수한것인지, 해결방법이 있을지 궁금하여 질문을 올리게 되었습니다.
글 제주가 부족하여, 위의 현상을 동영상으로도 찍어봤는데... 동영상 업로드 방법을 몰라서 유튜브에 업로드 후 링크 첨부해드립니다. 감사합니다.(https://youtu.be/3lolcNQKMRw)
(동영상을 찍으면서 인터넷창의 height를 조절할 때, slideshow의 이미지는 고정이 되어있는데, 그 외는 같이 왔다갔다 하는 이게 문제인 것 같은데,,,, 잘 모르겠습니다 하하 ㅠ)
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.09.27
ournature9196 님~ 명절이 끼고 개인적으로 바쁜일이 있어서 답변이 늦었습니다.
저도 완성본으로 해보니까 그렇게 되네요.
브라우저의 높이가 줄어들지만 .heading 내부의 높이가 변하는건 아니니까 어쩔 수 없는 부분인 듯 합니다.
명쾌한 답이 되지는 못하지만... 브라우저 높이를 반이상 강제로 줄여서 보는 유저는 거의 없다고 봅니다.
만약 있어도 그런 유저까지 고려하지는 못한다고 생각합니다.
답변을 드릴려고 저도 해봤는데 딱히 문제가 있어서 그런 것 같지는 않아요.
그런데 올리신 영상을 보니까 슬라이더의 높이가 현저하게 낮던데 이건 왜 그런거죠?
답변 1