웹문서구조

오가람·2023년 2월 17일
<body>
    <!-- 전체 컨테이너 영역 -->
    <div class="container">

        <!-- 헤더 영역 -->
        <div class="header">
            <!-- 로고 영역 (클릭 시 메인페이지로 넘어가기) -->
            <div>
                <a href="#">
                    <img src="./src/bee1.jpg" alt="" id="home-logo">
                </a>
            </div>

            <div>
            <!-- 검색창 -->
                <div class="search-area">

                    <!-- form 내부 input 태그 값을 서버 또는 페이지로 전달 -->
                    <form action="#" name="search-form">
                        
                        <!-- fieldset : form 내부에서 input을 종류별로 묶는 용도로 많이 사용 -->
                        <fieldset>

                            <!-- autocomplete="off" : HTML 기본 자동완성 사용 X -->
                            <input type="search" id="query" name="query" 
                            autocomplete="off" placeholder="검색어를 입력해주세요.">
                        
                            <!-- 검색버튼 -->
                            <button id="search-btn" class="fa-solid fa-magnifying-glass"></button>
                        </fieldset>

                    </form>

                </div>
            </div>

            <!-- 공백영역 -->
            <div></div>
        </div>
        <!-- 헤더 영역 끝 -->

        <!-- nav 영역 시작-->
        <div class="nav">
            <ul>
                <li><a href="#">공지사항</a></li>
                <li><a href="#">자유 게시판</a></li>
                <li><a href="#">질문 게시판</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">1:1문의</a></li>
            </ul>
        </div>
        <!-- nav 영역 끝 -->

        <!-- content 영역 시작 -->
        <div class="content">
            <!-- content 내용 영역 -->
            <div class="content-1"></div>

            <!-- 아이디/비밀번호/로그인버튼 영역 -->
            <div class="content-2">
                <form action="#" name="login-form">
                    <fieldset id="id-pw-area">
                        
                        <div>
                            <input type="text" name="inputId" placeholder="아이디">
                            <input type="password" name="inputPw" placeholder="비밀번호">
                        </div>
                        
                        <div>
                            <!-- button의 type 기본값은 submit -->
                            <button>로그인</button>
                        </div>

                    </fieldset>

                    <!-- 회원가입 / ID/PW 찾기 영역 -->
                    <div id="signup-find-area">
                        <a href="#">회원가입</a>
                        <span>|</span>
                        <a href="#">ID/PW 찾기</a>
                    </div>

                </form>
            </div>
        </div>
        <!-- content 영역 끝 -->

    <!-- 전체 컨테이너 영역 끝 -->
    </div>
        
    <!-- footer 영역 시작 -->
    <div class="footer">
        <p>Copyright &copy; KH Information Educational Institute A-Class</p>
        
        <div>
            <a href="#">프로젝트 소개</a>
            <span>|</span>
            <a href="#">이용약관</a>
            <span>|</span>
            <a href="#">개인정보처리방침</a>
            <span>|</span>
            <a href="#">고객센터</a>
        </div>
    </div>
    
    <!-- footer 영역 끝 -->
    
profile
개발자준비생

0개의 댓글