인프런 커뮤니티 질문&답변

안단감

작성한 질문수

[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드

A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다

해결된 질문

작성

질문 하실 때 어떤 유형인지 말씀해주세요. ex) A1 작업하는데 ???이 안됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>레이아웃 가로 고정형</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container">

        <header>
            <div class="header-logo"></div>
            <div class="navi"></div>
        </header>

        <div class="slide">
            <div></div>
        </div>

        <div class="items">
            <div class="news"></div>
            <div class="banner"></div>
            <div class="shortcut"></div>
        </div>

        <footer>
            <div class="footer-logo"></div>
            <div class="copyright"></div>
            <div class="sns"></div>
        </footer>

        <script src="js/jquery-1.12.4.js"></script>
        <script src="js/custum.js"></script>

    </div>
</body>

</html>


.container {
    border: 1px red solid;
    box-sizing: border-box;
    width: 1200px;
    margin: auto;
}

header{
    border: 1px red solid;
    box-sizing: border-box;
    height: 100px;
}

header div {
    border: 1px red solid;
    box-sizing: border-box;
    height: 100px;    
}

.header-logo{
    width: 200px;
    float: left;
}
.navi{
    width: 800px;
    float: right;
}


.slide{
    border: 1px red solid;
    box-sizing: border-box;
}

.slide div{
    border: 1px red solid;
    box-sizing: border-box;
    height: 300px;
}

.items{
    border: 1px red solid;
    box-sizing: border-box;
    overflow: hidden;
}

.items div{
    border: 1px red solid;
    float: left;
    height: 200px;

}

.news{
    width: 500px;
}

.banner{
    width: 350px;
}

.shortcut{
    width: 350px;
}

footer {
    overflow: hidden;
}

footer div{
    border: 1px red solid;
    box-sizing: border-box;
    height: 100px;
    float: left;
}

.footer-logo{
    width: 200px;
}

.copyright{
    width: 800px;
}

.sns{
    width: 200px;
}

HTML/CSS jquery 웹-디자인

답변 2

코딩웍스(Coding Works)

지식공유자

overflow: hidden이 잘 적용된 것 맞습니다. 다만 현재 보더가 여러개 겹쳐있는 상황이라 마지막 박스가 내려간 것입니다. 나중에 보더를 지우면 정상적인 레이아웃이 됩니다.

그리고 레이아웃을 플렉스로 잡으시면 overflow: hidden를 사용하실 일이 없고 레이아웃 잡는게 훨씬 간단해 집니다.

결국 플렉스로 레이아웃 잡으실거니까 지금 사항은 이해 정도만 하시면 됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 안단감님.

질문해주신 내용으로 보아, A1 레이아웃 작업 중 overflow: hidden이나 box-sizing: border-box;가 제대로 적용되지 않는 문제가 발생한 것 같습니다. 이와 관련된 문제는 대개 CSS의 정렬 및 레이아웃을 다루는 과정에서 많이 발생합니다.

기본적인 레이아웃 설정:
- box-sizing: border-box;는 요소의 총 너비와 높이를 경계 및 패딩을 포함하도록 계산합니다. 이를 모든 요소에 적용하면 요소 크기 계산이 더 직관적이 되므로 도움이 됩니다. 적극 권장됩니다.
- overflow: hidden;은 자식 요소가 부모 요소의 크기보다 클 때 넘치는 부분을 숨깁니다. 레이아웃이 복잡할 경우 이 속성을 통해 불필요한 스크롤 바나 과도하게 확장된 레이아웃을 방지할 수 있습니다.
적용 문제의 원인 파악:
- CSS 타이핑: 확인해 보셔야 할 것은 CSS 파일의 스펠링 오류입니다. 예를 들어 custum.js 대신 custom.js로 작성되어야 합니다.
- 파일 경로: CSS 및 JS 파일의 경로가 올바른지 확인하십시오. 경로 오류도 스타일이 적용되지 않는 이유가 될 수 있습니다.
- Specificity: 특정성이 높은 CSS 규칙이 있는지를 점검하십시오. 이는 해당 요소들에 대한 스타일 적용 우선순위를 변경할 수 있습니다.
- 캐싱 문제: 브라우저 캐시가 이전 스타일을 반영하고 있을 수 있습니다. 새로고침(F5)을 자주 누르거나 캐시를 직접 클리어하세요.

관련된 기존의 질문과 답변에서 해결 방법을 찾을 수 있습니다:
- 레이아웃 만들기 B형 관련 질문 드립니다. - CSS 설정에 대한 문제 해결 방법
- 세로2컬럼에 가로슬라이드 적용시 문제 - overflow 관련 문제 해결

위의 링크들은 비슷한 문제를 겪은 분들의 질문과 해결책을 다룹니다. 읽어보시면 해결에 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

안단감

작성한 질문수

전체 Q&A

질문하기