inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

2. 공지사항, 갤러리 별도로 구성하기(HTML+CSS)

갤러리 이미지가 가려집니다

265

wlsgml6200

작성한 질문수 10

1

html      

  <div class="contents">

           <!--tab-->

            <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>

            <!--tab-->

            

            <!--갤러리-->

            <div class="banner">

                <div class="banner-inner">

                    <div class="btn">

                        <span></span>

                    </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="gallery2"></a>

                        <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a>

                    </div>

                </div>

               <!--갤러리-->         

          </div>

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

          

css

.tab-inner .btn span,

.banner-inner .btn span{

    border: 1px solid #000;

    display: inline-block; /*크기값을 주기위해,in-line으로 해야 밑줄 없애는거 적용*/

    width: 100px;

    text-align: center;

    padding: 5px;

    border-radius: 5px 5px 0 0;/*상우하좌*/

    border-bottom: none;

    margin-bottom: -1px;

    background-color: #fff;

}

.tab-inner .tab,

.banner-inner .tba{

    border: 1px solid #000;

    padding: 0 10px;

}

.tab-inner .tab a{

    display: block; /*가장 먼저 하기*/

    padding: 5px;

    border-bottom: 1px solid #333;

}

.tab-inner .tab a:last-child{ 

    border-bottom: none;

}

.tab-inner .tab a b{

    float: right;

    font-weight: normal;

}

.banner .tab img{

    width: 110px;

}

- 이미지들이 버튼 위에 위치해서 다 가려지네요 ㅠ

뭐가 문제일까요..?포지션-제트인덱스를 써봐도 안내려가네용 ㅠ

적용이 안된걸까요?

웹 디자인 HTML/CSS jquery

답변 5

0

wlsgml6200

앗 네 ㅠㅠ 감사합니다!! 

0

코딩웍스(Coding Works)

<div class="btn">
<span></span>
</div>
html 구조를 보니까 span 안에 텍스트를 적어주지 않아서 그렇네요.
아래처럼 내용을 적어주면 정상적으로 보일거에요.
<div class="btn">
<span>갤러리</span>
</div>

0

코딩웍스(Coding Works)

사진을 찍어서 올리셨네요. 선명하지 않아서 보기가 좀...

화면 캡쳐해서 올려주시구요. CSS 코드 따로 HTML 코드 따로 필요한 부분만 올리지 마시고 전체 Full Code로 다시 올려주세요..

0

wlsgml6200

이미지 첨부합니다 !!

0

코딩웍스(Coding Works)

오류가 나는 화면을 캡쳐해서 올려주세요.

그래야 어떤 현상인지 확인하고 해결책을 찾을 수 있을 듯 합니다.

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

1

54

2

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

1

91

2

예제파일

1

51

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

80

2

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

1

67

1

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

0

116

4

footer 높이 값

1

41

2

div 상하분배?가 안돼요

0

67

2