Deplux5편 - 22번 기능대학교 1편
이번 예제는 22번 기능대학교 입니다.
분량문제상 HTML, CSS/JS 두 편으로 나눠 두었습니다.
하단에 첨부파일을 다운로드 받으시면 코드 파일을 직접 확인하실 수 있습니다.
해당 링크를 통해 영상으로 작성 흐름을 익히셔도 좋습니다.
가장 먼저, 22번 예제의 완성본 형태입니다.
아래는 예제를 만들면서 사용한 이미지 파일입니다.
pixabay를 통해 받은 저작권 무료 이미지이며, 이 이미지들을 계속 이용할 예정입니다.
이제 실전 코드 작성으로 들어가 보도록 하겠습니다.
먼저 와이어프레임을 보고 기본적인 디자인과 포인트들을 가볍게 정리합니다.
이미지슬라이드가 100% 이므로 body를 1340px로 설정하는 대신 100%로 설정
내부 다른 요소들에 각각 1340px 주고 중앙정렬 필요
메뉴 호버시 해당 메인메뉴의 하위 서브 한줄만 내려오는 형태이므로 메뉴별로 구분 필요
이미지슬라이드 위에 링크 영역이 겹쳐 있으므로 메인에 relative 기준값 잡아둘거 염두
그럼 이제 바로 html로 들어가 보도록 하겠습니다.
<!-- html 기본 폼은 html:5 + 엔터 를 이용해 빠르게 불러와 주도록 합니다. --> <!DOCTYPE html> <html lang="ko-kr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>기능대학교</title> <!-- css는 head 영역에 넣어줍니다. --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 헤더 영역 --> <div class="header"> <!-- 헤더 높이가 로고보다 크니 로고 영역을 div로 감싸고, 감싼 div에서 가운데 정렬로 로고를 헤더 가운데로 정렬해 주도록 합니다. --> <div class="logo"> <img src="../이미지/logo.png" alt="로고 이미지"> </div> <div class="nav"> <!-- 여기는 써야 하는 텍스트가 다양하니 한 메뉴를 작성하고 복사하는것보다 --> <!-- .menu*4>a[href="#"]>.menuSub>a[href="#"]*4 를 이용해 만들고 tab 키를 이용해서 작성하는 것이 빠릅니다. --> <!-- 와이어프레임에서 메인메뉴 호버 시 해당 메뉴의 서브만 내려와 있으니 메뉴 안에 서브메뉴 부분만 따로 div로 묶어줍니다. --> <div class="menu"> <a href="#">교육/소개</a> <div class="menuSub"><a href="#">대학</a><a href="#">대학원</a><a href="#">대학현황</a><a href="#">대학상징</a></div> </div> <div class="menu"> <a href="#">연구성과</a> <div class="menuSub"><a href="#">연구현황</a><a href="#">연구기관</a><a href="#">연구기관</a><a href="#">연구지원</a></div> </div> <div class="menu"> <a href="#">입학</a> <div class="menuSub"><a href="#">대학</a><a href="#">대학원</a><a href="#">편입학</a><a href="#">글로벌</a></div> </div> <div class="menu"> <a href="#">대학생활</a> <div class="menuSub"><a href="#">뉴스</a><a href="#">학생활동</a><a href="#">캠퍼스생활</a><a href="#">학사행정</a></div> </div> </div> </div> <!-- 메인 ( 이미지슬라이드 & 컨텐츠 ) 영역 --> <div class="main"> <!-- 슬라이드 이미지는 position : absolute 를 이용해 겹쳐놓고 바꿀 예정이니 relative로 기준을 잡아주기 위해 무조건 감싸줘야 합니다. --> <div class="slide"> <!-- 이렇게 링크 / alt / 텍스트 등이 여러줄 필요한 경우 한줄을 작성한 후 shift+alt+아래 화살표로 복제해서 숫자만 바꾸는게 빠릅니다. --> <a href="#"><img src="../이미지/img1.jpg" alt="슬라이드이미지1"></a> <a href="#"><img src="../이미지/img2.jpg" alt="슬라이드이미지2"></a> <a href="#"><img src="../이미지/img3.jpg" alt="슬라이드이미지3"></a> </div> <!-- 슬라이드 위에 링크 영역이 겹쳐 있으니 absolute로 위치를 조정합니다. --> <div class="slideLink"> <!-- 이렇게 링크 / alt / 텍스트 등이 여러줄 필요한 경우 한줄을 작성한 후 shift+alt+아래 화살표로 복제해서 숫자만 바꾸는게 빠릅니다. --> <a href="#"><img src="../이미지/img4.jpg" alt="링크이미지1"><span>LINK1</span></a> <a href="#"><img src="../이미지/img5.jpg" alt="링크이미지2"><span>LINK2</span></a> <a href="#"><img src="../이미지/img6.jpg" alt="링크이미지3"><span>LINK3</span></a> <a href="#"><img src="../이미지/img7.jpg" alt="링크이미지4"><span>LINK4</span></a> <a href="#"><img src="../이미지/img8.jpg" alt="링크이미지5"><span>LINK5</span></a> </div> <!-- 영상에서는 배너를 a로 감싸지 않고 넘어갔는데, 그런 경우 감점이 발생합니다. --> <!-- 배너라는 특성 상 보통 전체를 링크로 거는 경우가 많으니 div를 통채로 a로 감싸주는 것이 좋습니다. --> <a href="#"> <div class="banner"> <img src="../이미지/img9.jpg" alt="배너 이미지"> <div class="bannerText"> <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</span> <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos eos doloribus molestias quis! Dolor fugit unde, quod omnis, nesciunt explicabo laudantium ex reiciendis libero inventore neque fugiat voluptatem quaerat ipsam. </span> </div> <span class="bracket">〉</span> </div> </a> <div class="contents"> <div class="notice"> <span>공지사항</span> <div class="notice-contents"> <!-- 이렇게 링크 / alt / 텍스트 등이 여러줄 필요한 경우 한줄을 작성한 후 shift+alt+아래 화살표로 복제해서 숫자만 바꾸는게 빠릅니다. --> <a href="#"><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span><span>0000.00.00</span></a> <a href="#"><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span><span>0000.00.00</span></a> <a href="#"><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span><span>0000.00.00</span></a> <a href="#"><span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span><span>0000.00.00</span></a> </div> </div> <div class="gallery"> <span>갤러리</span> <div class="gallery-contents"> <!-- 이렇게 링크 / alt / 텍스트 등이 여러줄 필요한 경우 한줄을 작성한 후 shift+alt+아래 화살표로 복제해서 숫자만 바꾸는게 빠릅니다. --> <a href="#"><img src="../이미지/img1.jpg" alt="갤러리이미지1"><span>Lorem ipsum dolor sit amet </span></a> <a href="#"><img src="../이미지/img2.jpg" alt="갤러리이미지2"><span>Lorem ipsum dolor sit amet </span></a> <a href="#"><img src="../이미지/img3.jpg" alt="갤러리이미지3"><span>Lorem ipsum dolor sit amet </span></a> </div> </div> </div> </div> <!-- 하단 푸터 영역 --> <div class="footer"> <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi quaerat sequi, corporis numquam voluptatem ab earum velit quis voluptatibus tempora perspiciatis eligendi ea rerum rem facere doloremque expedita impedit! Dolorem.</span> <!-- 클래스 이름은 보통 이렇게 짓는걸 지양해야 합니다만, 시험같은 경우에는 시험보는 동안 본인만 기억하면 되기 때문에 --> <!-- 그냥 직관적으로 본인이 알아들을 수 있는 클래스명을 설정하시면 됩니다. --> <div class="footerRight"> <div class="sns"> <a href="#"><img src="../이미지/sns1.png" alt="sns이미지1"></a> <a href="#"><img src="../이미지/sns2.png" alt="sns이미지2"></a> <a href="#"><img src="../이미지/sns3.png" alt="sns이미지3"></a> </div> <div class="family"> <a href="#">패밀리 사이트</a> </div> </div> </div> <!-- 팝업창 --> <!-- 팝업창의 경우 웹브라우저의 화면 크기를 기준으로 해야 하기 때문에 항상 body 바로 안쪽으로 넣어서 구성해 주도록 합시다.--> <div class="popUp"> <!-- space-between 으로 버튼과 텍스트 창을 위 아래 끝으로 보내기 위해 타이틀과 본문을 한 덩어리로 묶어줬습니다. --> <div class="text"> <span>타이틀</span> <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure molestias fuga, animi nihil reprehenderit minima, odit quo pariatur illum unde excepturi dolore modi corporis magni, ratione perspiciatis nesciunt dolorum id?</span> </div> <button>닫기</button> </div> <!-- 스크립트는 보통 html/css가 다 렌더링 되고 거기에 동작을 추가해 주기 위해 body 최하단에 위치시켜 주시기 바랍니다. --> <script src="jquery.js"></script> <script src="script.js"></script> </body> </html>
이렇게 HTML 작성이 완료되었습니다.
HTML의 구조가 탄탄해야 CSS와 JS가 추후 수정해야 할 부분이 적어지기 때문에
처음에 요구사항들을 잘 보고 구조를 짜는 연습이 필수적입니다.