inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

공지사항, 갤러리 tab 부분

468

lek7248

작성한 질문수 10

1

.tab-inner .tab,
.gallery-inner .tab {  
    border: 1px solid black;
    padding: 0 10px;
    height: 145px;
}

화면 캡처 2022-11-06 211550.png부분에 갤러리도 같이 묶었는데 갤러리 부분만 반영되지 않습니다.

실제 문제를 보니 공지사항과 tab 부분에 border값을 넣지 않던데 큰 상관이 없는 건가요?

<!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 class="tab-inner">
                    <div class="btn">
                        <span>공지사항</span>
                    </div>
                    <div class="tab">
                        <a href="#none">SNS 발송 서비스 개선작업 <b>2020.01.09</b></a>
                        <a href="#none">휴대폰 인증 서비스 개선 작업 <b>2020.01.07</b></a>
                        <a href="#none">카드사 부분 무이자 할부 이벤트 <b>2019.12.31</b></a>
                        <a href="#none">올앳 서비스 작업 안내 <b>2019.12.20</b></a>
                        <a href="#none">휴대폰 결제 시스템 작업 안내 <b>2019.12.20</b></a>
                    </div>
                </div>
            </div>
            <div class="gallery">
                <div class="gallery-inner">
                    <div class="btn">
                        <span>갤러리</span>
                    </div>
                </div>
                <div class="tab">
                    <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a>
                    <a href="#none"><img src="images/gallery-02.jpg" alt="gallery1"></a>
                    <a href="#none"><img src="images/gallery-03.jpg" alt="gallery1"></a>
                </div>
            </div>
            <div class="banner">배너</div> 
        </div>           
        <footer>
            <div class="footer-logo">로고</div>
            <div class="copyright">copyright</div>
            <div class="sns">sns</div>
        </footer>
    </div>
</body>
</html>

 

.container {
    border: 2px solid gray;
    width: 1200px;
    margin: auto;
}
header {
    height: 100px;
}
header > div {
    background-color: rgb(185, 185, 185);
    height: 100px;
}
.header-logo {
    width: 200px;
    float: left;
}
.navi {
    width: 660px;
    float: right;
}
/* Content */
.slide {}
.slide > div {
    border: 1px solid gray;
    height: 300px;
}

.items {
    overflow: hidden;
}
.items > div {
    height: 200px;
    float: left;
    box-sizing: border-box;
    /*border: 1px solid gray;*/
}
.news {
    width: 500px;
}
.gallery {
    width: 350px;
}
.banner {
    border: 1px solid black;
    width: 350px;
}   

/*Footer*/
footer {
    overflow: hidden;
}
footer > div {
    border: 1px solid gray;
    height: 100px;
    float: left;
    box-sizing: border-box;
}
.footer-logo {
    width: 200px;
}
.copyright {
    width: 800px;
}
.sns {
    width: 200px;
}

/* Tab Content */
.tab-inner,
.gallery-inner {
    width: 95%;
    margin: auto;
}
.tab-inner .btn {}
.tab-inner .btn span,
.gallery-inner .btn span {
    border: 1px solid black;
    display:inline-block;
    width: 100px;
    text-align: center;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    margin-bottom: -1px;
    background-color: white;
}
.tab-inner .tab,
.gallery-inner .tab {
    border: 1px solid black;
    padding: 0 10px;
    height: 145px;
}
.tab-inner .tab a {
    display: block;
    padding: 3px;
    border-bottom: 1px solid black;
    text-decoration: none;
    color: black;
}
.tab-inner .tab a:last-child {
    border-bottom: none;
}
.tab-inner .tab a b {
    float: right;
    font-weight: normal;
}

/* gallery Content */

.gallery .tab img {
    width: 100px;
}
.gallery .tab {
    text-align: center;
    padding-top: 30px;
    box-sizing: border-box;
}

웹 디자인 jquery HTML/CSS

답변 1

0

코딩웍스(Coding Works)

지시사항에 있는 보더는 보더가 없으면 시험기준을 보여줄 방법이 없어서 그런거구요.
그리고 보더가 몇개 없다고 당락을 결정하지는 않습니다.

현재 문제는 html 구조에서 문제가 있습니다.

.gallery-inner 안에 .tab이 있어야 하는데 .gallery-inner와 .tab이 형제요소로 되어 있어서 보더가 그리지지 않습니다.

image

해당 강의 PDF는 어디에 있나요?

1

54

2

2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?

1

91

2

예제파일

1

52

1

섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?

1

79

2

보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?

1

55

1

시험 시 슬라이드 작성 관련 문의

0

63

1

강의 질문 있습니다

1

67

1

시험 관련 문의

1

60

1

파워포인트 자료 다운로드 버튼 어디에 있나요?

1

53

1

브라우저 화면 줄일 시 빈 공간 발생

0

63

1

서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?

1

76

1

슬라이드 및 완성본 관련 사항

1

67

2

D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다

1

88

3

B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.

1

49

2

A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다

1

66

2

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

1

54

2

레이어 팝업 '닫기' 가 안됩니다

1

61

1

공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.

1

83

2

뷰티파이 설치 관련 문의

1

70

3

웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?

1

81

2

A유형~C유형 수험자 제공파일 어디서

1

67

1

A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..

0

117

4

footer 높이 값

1

42

2

div 상하분배?가 안돼요

0

69

2