-
7주차실습_클론코딩_HIVELAB 홈페이지 따라하기!_구역나누기2학년/멋사 2023. 4. 6. 22:29
HIVELAB 기업사이트
UI.UX기반의 디지털 플랫폼 그룹과 융합중심의 디지털 마케팅 그룹의 유기적인 연결을 통해 최적의 디지털 솔루션을 제공합니다.
hivelab.co.kr
이짝 1페이지만 구현해보도록 하자
우선 개발자 모드로 구역을 살짝쿵 보
보자보자....우선
1. 헤더 태그
- 첫 사진 보면 라이언 페이지 만들었을 때 처럼 헤더에다
- 헤더 > 한 줄에 (하이브 DIV ), (메뉴 DIV (각각의 요소 DIV )), (가장 오른 쪽 메뉴 각각의 요소 DIV ) 로 하면 되겠고
2. 바디태그
- HIBRID 큰 글자 DIV
- 하이브랩은 플랫폼 중심의 ....설명 DIV
- 회사소개서 ( 보더로 원 만들기 ABSOLUTE줘서 다운로드 아이콘 넣기 ( 그 ...저번에 했던 아이콘넣는방법으로))
- 01/04 > 여유있으면 왼편 아래에 넣기
- 오른편 아래에 하이브올라잇 리설브 넣기
3. 백그라운드 동영상 넣기 !
로 HTML 구성하면 되겠고
CSS에는
1. 마우스 HOVER시 어바웃 서비스 ....메뉴 밑에...아 css는 그냥 하면서 보고
중요한건 hidden으로 메뉴 상세보기 hover시 뜨게 해야한다는 점
> zindex설정 건드리면 될 듯 ?
허어~~~막막도하여라.....
우선 오늘은 간단하게 html 구조만 짜보자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>나자신화이띵</title> <link rel="stylesheet" href="./main.css"> <script src="./main.html" defer></script> </head> <body> <header> <div class = "hivelab">H I V E L A B</div> <div class = "left_menu"> <div class="lmenu1">ABOUT</div> <div class="lmenu2">SERVICE</div> <div class="lmenu3">WORK</div> <div class="lmenu4">PEOPLE</div> <div class="lmenu5">CONTACT</div> </div> <div class = "right_menu"> <div class="rmenu1">회사소개서</div> <div class="rmenu2">o</div> <div class="rmenu3">BLOG</div> <div class="rmenu4">o</div> <div class="rmenu5">FACEOOK</div> <div class="rmenu6">KOR</div> </div> </header> <section> <div class = "main"> <div class="bold_text">Hybrid<br>Digital Solution.</div> <div class="explain">하이브랩은 플랫폼 중심의 디지털 커뮤니케이션 에이전시입니다.</div> <div class="downloat_circle">회사소개서<br>downloadicon</div> </div> </section> <footer> <div class="page_num"> <div class="page_current">01</div> <div class="page_end">/04</div> </div> <div class ="up_down"> <div class="up">^</div> <div class="down">V</div> </div> <div class="reserved">@ HIVELAB All rights reserved.</div> </footer> </div> </body> </html>728x90'2학년 > 멋사' 카테고리의 다른 글
7주차실습_클론코딩_HIVELAB 홈페이지 따라하기!_css해주기2 (0) 2023.04.09 7주차실습_클론코딩_HIVELAB 홈페이지 따라하기!_css해주기1 (0) 2023.04.06 js_이벤트 실습_덜 된 코드...+ 완성! (0) 2023.04.06 JS_Dom 구조 (0) 2023.04.04 3차시_CSS심화 (0) 2023.03.28