inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

강의를 보고 똑같이 코드를 쳤는데 a태그가 밑으로 떨어집니다 ㅠㅠ

192

dusal

작성한 질문수 1

1

■

공지사항,갤러리가 별도로 구성되어있는 강의를 듣고있는데

news 클래스 아래로 a태그가 떨어집니다 ㅠㅠ

혹시 잘못된 부분이 있는걸까요?

 

 

<body>
    <section class="items">
        <article class="news">
            <div class="tab-inner">
                <div class="btn">
                    <span>공지사항</span>
                </div>
                <div class="tab">
                    <a href="#none">
                        문자발송서비스
                        <b>2024.03.06</b>
                    </a>
                    <a href="#none">문자발송서비스
                        <b>2024.03.06</b>
                    </a>
                    <a href="#none">문자발송서비스
                        <b>2024.03.06</b>
                    </a>
                    <a href="#none">문자발송서비스
                        <b>2024.03.06</b>
                    </a>
                    <a href="#none">문자발송서비스
                        <b>2024.03.06</b>
                    </a>
                </div>
            </div>
        </article>
        <article class="gallery">갤러리</article>
        <article class="now">바로가기</article>
    </section>
</body>

<css>

* { padding: 0; margin: 0; position: relative;}
a { color: inherit; text-decoration: none; display: inline-block;}
ul,li,ol { list-style: none;}


/*와이어프레임정렬*/
 .items {
    border: 3px solid blue;
    max-width: 1200px; margin: 0 auto;
    display: flex;
 }
 .items div {
    height: 200px; 
 }
 .news { width: 350px; background-color: lightblue;}
 .news .tab-inner {
    border: 5px solid salmon;
 }
 .news .tab a { 
    border: 3px solid slateblue;
 }




 .gallery { width: 500px; background-color: coral;}
 .now { width: 350px; background-color: lightseagreen;}

/*tab content*/

 

-출력화면-

 

모르는것.PNG

HTML/CSS jquery 웹-디자인

답변 1

0

코딩웍스(Coding Works) 

 .items div {
    height: 200px; 
 }

.items div 라고 하면 .items 아래의 모든 div를 선택하게 됩니다. 곧 .items diiv div 까지 선택되서 그렇습니다.

.items div를 자식선택자를 사용해야 합니다.

.items > div 이렇게 하세요.

그런데 제 영상을 보고 코드를 똑 같이 치셨다고 했는데 아닌 것 같은데요.

저는 아래처럼 리셋을 하시라고 강의 하지 않습니다.

이건 인테넷에서 보신 것을 넣으신 것 같습니다.

* { padding: 0; margin: 0; position: relative;}
a { color: inherit; text-decoration: none; display: inline-block;}
ul,li,ol { list-style: none;}

그리고 section, article 사용하지 마세요. 시험 볼 때 이것들 사용하시면 웹표준 검사에서 감점이 있습니다.

또 클래스 네임도 .now 라는 클래스네임으로 사용하지 않았거든요.

시험이니까 영상에 있는 html, css와 같이 연습하세요.

 

 

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

1

57

2

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

1

92

2

예제파일

1

55

1

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

1

82

2

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

1

58

1

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

0

65

1

강의 질문 있습니다

1

69

1

시험 관련 문의

1

61

1

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

1

55

1

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

0

65

1

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

1

80

1

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

1

70

2

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

1

90

3

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

1

50

2

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

1

69

2

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

1

55

2

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

1

62

1

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

1

84

2

뷰티파이 설치 관련 문의

1

72

3

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

1

87

2

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

1

74

1

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

0

122

4

footer 높이 값

1

47

2

div 상하분배?가 안돼요

0

72

2