서로 다른 노트북에서 볼때 여백이 다르게 보이는 현상 채택완료
https://sir.kr/g5_theme/8851 공개해주신 테마로 제작 중입니다.
필요한 부분을 골라 붙여넣기로 하며 인덱스를 꾸미고 있습니다. 텍스트와 이미지 각 카테고리 별 상하 여백(em) 이라는 간격 조정만 했습니다.
1.
그리고 첨부 이미지에 최신글 처럼 불러오기 위해 게시판을 만들고 글작성 후 최신글 처럼 불러와지는데, 작업을 한 노트북에서는 아래 처럼 오른쪽 여백이 생기며 왼쪽으로 밀착을 하고 있습니다.
상하여백 조정한게 영향있나 해서 원복을 했는데도 오른쪽 공백이 사라지지 않네요.
2.
그런데 특이한건 서브로 열어놓은 노트북에서는 아래와 같이 정상적으로 보입니다.
1번 노트북도 처음에는 정상적으로 보였는데 어느순간 부터 공백이 생기네요. 물리적인 차이점은 오른쪽 공백생기는 노트북 모니터 화면이 조금 더 큰거 외...; 같은 인터넷망으로 보는데도 다른건 왜일까요?
해당하는 css코드는 아래와 같습니다.
</strong></p>
<p> </p>
<p><strong>.sec6{
padding:15em 0;
}
.sec6-inner{
width:1400px;
display: flex;align-items: flex-start;
justify-content: space-between;
margin:0 auto;
}</strong></p>
<p><strong>.sec6-lt{
width:48%;
}
.sec6-lt h3{
font-size: 40px;
line-height: 1.2;
letter-spacing: -0.03em;
position: relative;
}
.sec6-lt .sec6-wrap{
width:100%;
height: 380px;
margin-top:20px;
}</strong></p>
<p><strong>.sec6-con{
width:100%;height:380px;
position: relative;
display: flex;align-items: center;
justify-content: center;
}
.sec6-con p{
font-size: 30px;
color:#fff;
transform: translateY(300%);
opacity: 0;
font-weight: 600;
width:100%;text-align: center;
}
.sec6-img{
width:100%;height: 100%;
position: absolute;
top:0;left:0;
z-index: -1;
}
.slick-current .sec6-img{
transform: scale(1.3);
transition: 1.5s ease;
}
.slick-current .sec6-con p{
transform: translateY(0) scale(1.2);
opacity: 1;
transition:1s ease;
}
.sec6-rt{
width:48%;
}
.sec6-rt ul{
width:95%;
display: flex;flex-flow: row wrap;
align-content: center;
justify-content: center;
}
.sec6-rt li{
width:100%;
padding:30px 0px;
border-bottom: 1px solid #ddd;
}
.sec6-rt li:nth-of-type(1){
padding-top: 0;
}
.sec6-rt li a{
width:100%;height: 100%;
display: flex;align-items: flex-start;
}
.sec6-rt .category{
font-size: 16px;
color:#b7815a;
white-space: nowrap;
}
.sec6-rt .date{
text-align: center;
margin:0px 40px;;
}
.sec6-rt .date h4{
font-size: 60px;
line-height: 0.8;
}
.sec6-rt .date span{
font-size: 16px;
margin-top:5px;
display: inline-block;
}
.sec6-rt dt{
font-weight: 500;
font-size: 18px;
}
.sec6-rt dd{
font-size: 16px;
margin-top:2px;
word-break: keep-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
max-height: 2.6;
}</strong></p>
<p><strong>
답변 4개
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
개발자도구에서 같은 버전, 같은 내용 css가 불러와지는지 확인해보세요.
같은 버전, 같은 내용인데도 다르게 출력된다면 원인이 뭔지는 사이트를 직접 봐야 알 것 같습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인