inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

3. 공지사항, 갤러리 탭으로 구성하기(HTML+CSS+JQUERY)

갤러리가 하나 더 생깁니다... 와이어프레임이 망가졌어요.ㅜㅜ

319

빠삭

작성한 질문수 5

1

안녕하세요 선생님! 좋은 강의 늘 감사합니다.

다름이 아니라 강좌를 보면서 연습을 하다가 왜 이렇게 되는지 알 수가 없어 질문을 드립니다.

공지사항과 갤러리를 탭으로  구성하는 강의부문이었는데요. 전에 연습했던 갤러리 이미지 코드를 복사해서 붙였더니

 

이렇게 나와버려서 어디서 잘못된 건지 잘 모르겠습니다...ㅜㅜ 선생님의 강좌 이미지처럼 나와야 하는데요 ㅠㅠ 

 

어떤 부분이 잘못되어있는지 알려주심 넘넘 감사합니다...

HTML부문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>레이아웃 가로형-연습2</title>
    <link rel="stylesheet" href="script/style0720.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="item">
            <div class="notice">
                <div class="tab-inner">
                    <div class="btn">
                        <span class="active">공지사항</span>
                        <span>갤러리</span>
                    </div>
                    <div class="tabs">
                        <div class="tab1">
                            <a href="#none">SMS 발송 서비스 개선작업    <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>2017.12.20</b></a>
                        </div>
                        <div class="tab2">
                            <a href="#none"><img src="images/banner1.png" alt="gallery1"</a>
                            <a href="#none"><img src="images/banner2.png" alt="gallery2"</a>
                            <a href="#none"><img src="images/banner3.png" alt="gallery3"</a>
                    </div>
                </div>
            </div>
            <div class="banner">배너(c.3)</div>
            <div class="shortcut"></div>
        </div>
        <footer>
            <div class="footer-logo"></div>
            <div class="copyright"></div>
            <div class="sns"></div>
        </footer>
    </div>

    <script type="text/javascript" src="script/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="script/custom0801.js"></script>

</body>
</html>
 
CSS부문
 
.container {
    width: 1200px;
    border: 1px solid #000;
    margin: auto;
}
.container > div {}

header {
    height: 100px;
}
header div {
    border: 1px solid blue;
    height: 100px;
}
.header-logo {
    width: 200px;
    float: left;
}
.navi {
    width: 600px;
    float: right;
}

.slide {}
.slide > div {
    border: 1px solid sandybrown;
    height: 300px;
}

.item {
    overflow: hidden;
}
.item > div {
    height: 200px;
    border: 1px solid gray;
    float: left;
    box-sizing: border-box;
}
.notice {
    width: 400px;
}
.banner {
    width: 400px;
}
.shortcut {
    width: 400px;
}

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

/* TAB CONTENT */
.tab-inner {
    width: 97%;
    margin: auto;
}
.btn {}
.btn span {
    border: 1px solid #000;
    display: inline-block;
    width: 120px;
    text-align: center;
    padding: 3px;
    border-radius: 5px 5px 0 0;
    margin-right: -6px;
    background-color: gainsboro;
    cursor: pointer;
    border-bottom: none;
    margin-bottom: -1px;
}
.btn span.active {
    background-color: white;
}
.tabs {}
.tabs div {
    border: 1px solid #000;
    height: 150px;
    padding: 0 10px;
}
.tab1 {
}
.tab1 a {
    text-decoration: none;
    display: block;
    border-bottom: 1px solid gainsboro;
    padding: 3.5px;
}
.tab1 a:last-child {
    border-bottom: none;
}
.tab1 a b {
    float: right;
    font-weight: normal;
}
.tab2 {
    display: none;
    text-align: center;
}
.tab2 img {
    width: 110px;
    margin-top: 25px;
}

JS부문

// Tab Content
$('.btn span:first-child').click(function() {
    $('.tab1').show()
    $('.tab2').hide()
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})
$('.btn span:last-child').click(function() {
    $('.tab2').show()
    $('.tab1').hide()
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})

일케 코드 작성한 것 붙여서 올립니다... 

HTML/CSS jquery 웹 디자인

답변 1

0

코딩웍스(Coding Works)

.item 부분의 html 코드가 잘못되어 있습니다.

</div> 마감이 안되어 있습니다.

아래 코드처럼 해야 합니다.

<div class="container">

    <header>

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

      <div class="navi"></div>

    </header>

    <div class="slide">

      <div></div>

    </div>

    <div class="item">

      <div class="notice">

        <div class="tab-inner">

          <div class="btn">

            <span class="active">공지사항</span>

            <span>갤러리</span>

          </div>

          <div class="tabs">

            <div class="tab1">

              <a href="#none">SMS 발송 서비스 개선작업 <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>2017.12.20</b></a>

            </div>

            <div class="tab2">

              <a href="#none"><img src="images/banner1.png" alt="gallery1"></a>

              <a href="#none"><img src="images/banner2.png" alt="gallery2"></a>

              <a href="#none"><img src="images/banner3.png" alt="gallery3"></a>

            </div>

          </div>

        </div>

      </div>

      <div class="banner">배너(c.3)</div>

      <div class="shortcut"></div>

    </div>

    <footer>

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

      <div class="copyright"></div>

      <div class="sns"></div>

    </footer>

  </div>

0

빠삭

안녕하세요 선생님! 답변 잘 받았습니다. /div 마감 처리를 못한 부분이 한 군데 있었군요. 수정했습니다. 수정 후 다시 봤는데 화면이 이렇게 나오는데 css에서 어떤 부분을 수정하면 와이어프레임이 다시 잘 나올까요? ㅠㅠ

코드는 맨 처음과 동일합니다....(말씀해주신 수정부분도 적용했구요)

왜 이렇게 나오는 걸까요?

 

위 이미지처럼 배너 C3가 우측에 잘 나와야하는데.... 

0

코딩웍스(Coding Works)

올리신 CSS는 전혀 문제 없습니다. 제가 html에서 /div 하나 빠진게 아니라 많이 엉켜있습니다.

제가 올리 html로 고치시면 모두 정상적으로 나옵니다.

0

빠삭

안녕하세요 선생님! 답변 주신 코드와 제 코드를 비교하며 빠진 부분이 어딘지 체크했습니다. 지금은 잘 해결되었습니다! 감사합니다~!!!

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

1

84

2

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

1

120

2

예제파일

1

70

1

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

1

106

2

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

1

69

1

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

0

76

1

강의 질문 있습니다

1

73

1

시험 관련 문의

1

65

1

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

1

61

1

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

0

73

1

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

1

84

1

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

1

75

2

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

1

95

3

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

1

54

2

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

1

74

2

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

1

62

2

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

1

71

1

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

1

91

2

뷰티파이 설치 관련 문의

1

84

3

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

1

101

2

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

1

83

1

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

0

124

4

footer 높이 값

1

55

2

div 상하분배?가 안돼요

0

76

2