서로 다른 노트북에서 볼때 여백이 다르게 보이는 현상

서로 다른 노트북에서 볼때 여백이 다르게 보이는 현상

QA

서로 다른 노트북에서 볼때 여백이 다르게 보이는 현상

본문

https://sir.kr/g5_theme/8851 공개해주신 테마로 제작 중입니다.

필요한 부분을 골라 붙여넣기로 하며 인덱스를 꾸미고 있습니다. 텍스트와 이미지 각 카테고리 별 상하 여백(em) 이라는 간격 조정만 했습니다. 

 

1.

그리고 첨부 이미지에 최신글 처럼 불러오기 위해 게시판을 만들고 글작성 후 최신글 처럼 불러와지는데, 작업을 한 노트북에서는 아래 처럼 오른쪽 여백이 생기며 왼쪽으로 밀착을 하고 있습니다.

2106366341_1680149957.8463.png  

상하여백 조정한게 영향있나 해서 원복을 했는데도 오른쪽 공백이 사라지지 않네요.

 

2.

그런데 특이한건 서브로 열어놓은 노트북에서는 아래와 같이 정상적으로 보입니다.

2106366341_1680150040.1162.png 

1번 노트북도 처음에는 정상적으로 보였는데 어느순간 부터 공백이 생기네요. 물리적인 차이점은 오른쪽 공백생기는 노트북 모니터 화면이 조금 더 큰거 외...; 같은 인터넷망으로 보는데도 다른건 왜일까요?

 

해당하는 css코드는 아래와 같습니다.

 


 
.sec6{
    padding:15em 0;
}
.sec6-inner{
    width:1400px;
    display: flex;align-items: flex-start;
    justify-content: space-between;
    margin:0 auto;
}
.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;
}
.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;
}

 

 

이 질문에 댓글 쓰기 :

답변 4

CTRL+휠로 확대되지않았는지 확인을해보시는것도 좋습니다

 

브라우저의 캐시를 지우고 살펴보세요

크롬 일 경우, 컨트롤+쉬프트+R 누르시면 캐시삭제되어

최신 CSS로 보일겁니다.

개발자도구에서 같은 버전, 같은 내용 css가 불러와지는지 확인해보세요.

같은 버전, 같은 내용인데도 다르게 출력된다면 원인이 뭔지는 사이트를 직접 봐야 알 것 같습니다.

노트북의 해상도에 따라서 다르게 보이는건 아닐까요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT