• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

선생님 헤드영역의 레이아웃 자체가 틀어지는데 왜 그런지 검토부탁드립니다.

21.08.28 16:53 작성 조회수 96

1

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>네비게이션-상단-03-개별(완성)</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    

    <div class="container">

        <div class="header-inner">

            <header>

                <article class="header-logo">로고</article>

                <article class="navi">

                    <!--Navigasion-->

                        <ul class="menu">

                            <li>

                                <a href="#none">MENU-1</a>

                                <div class="sub-menu">

                                    <a href="#none">SUB-MENU-1</a>

                                    <a href="#none">SUB-MENU-2</a>

                                    <a href="#none">SUB-MENU-3</a>

                                    <a href="#none">SUB-MENU-4</a>

                                </div>

                            </li>

                            <li>

                                <a href="#none">MENU-2</a>

                                <div class="sub-menu">

                                    <a href="#none">SUB-MENU-1</a>

                                    <a href="#none">SUB-MENU-2</a>

                                    <a href="#none">SUB-MENU-3</a>

                                    <a href="#none">SUB-MENU-4</a>

                                </div>

                            </li>

                            <li>

                                <a href="#none">MENU-3</a>

                                <div class="sub-menu">

                                    <a href="#none">SUB-MENU-1</a>

                                    <a href="#none">SUB-MENU-2</a>

                                    <a href="#none">SUB-MENU-3</a>

                                    <a href="#none">SUB-MENU-4</a>

                                </div>

                            </li>

                            <li>

                                <a href="#none">MENU-4</a>

                                <div class="sub-menu">

                                    <a href="#none">SUB-MENU-1</a>

                                    <a href="#none">SUB-MENU-2</a>

                                    <a href="#none">SUB-MENU-3</a>

                                    <a href="#none">SUB-MENU-4</a>

                                </div>

                            </li>

                        </ul>

                    <!--Navigasion--> 

                </article>

            </header>

        </div>

        <div class="content-inner">

            <section class="slide">

                <article>이미지 슬라이드</article>

            </section>

            <section class="items">

                <article class="news">공지사항(C.1)</article>

                <article class="banner">갤러리(C.2)</article>

                <article class="shortcut">바로가기(C.3)</article>

            </section>

        </div>

        <div class="footer-inner">

            <footer>

                <article class="footer-logo">Copyright</article>

                <article class="footer-content">

                    <div>SNS</div>

                    <div>패밀리 사이트</div>

                </article>

            </footer>

        </div>

    </div>

    

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

    <script type="text/javascript" src="script/custom.js"></script>

    

</body>

</html>

답변 2

·

답변을 작성해보세요.

1

article에서 div로 바꾼다고 선택자만 잘 사용되었다면 크게 달라지는 건 없습니다.

시험보실 때 article, section 이 시멘틱 태그는 사용하지 마세요.

html 유효성 검사에서 article, section은 h태그와 함께 써야한다고 오류 출력해요.

소소하지만 감점 사항이니까 강의 내용처럼 header, footer 그리고 나머지는 div로 학습하세요.

0

css 코드도 올려주셔야 확인해 볼 수 있어요.

head-logo랑 navi를 article에서 div로 바꿔서 했더니 됐어요^^;;;

css변경한거 없구요... 두개의 차이점이 있나요?