05 - 24 검은사막 메인 페이지 마크업 (6) - 메인 반응형

 

 

 

:: 1025px일 때 메엔 반응형 ( 태블릿모드 )

 

윗 상단 헤더 삭제, 로고가 가운데에 위치, nav li 들 삭제, 왼쪽엔 햄버거 메뉴 오른쪽엔 사람 아이콘 메뉴 배치 ( xeicon, float ),

메인 동영상 -> 이미지 교체, 폰트 사이즈, 버튼 사이즈 조정, 메인 높이 값 조정, main video width 100% 해제 , height값 추가 

 

 

 

왼쪽 햄버거 메뉴를 선택하면 왼쪽에서 사이드 메뉴가 나오게끔. 

양쪽 메뉴 html 추가해주고 평소엔 안보이고 모바일 사이즈가 되면 나오게끔.

이 사이드 메뉴 html도 새로 추가 필요. 

 

 

 

 

:: 모바일 반응형 작업하는데 저 흰색 공간이 안 없어지는 문제 발생 

 

 

:: 얘 때문에 그랬던거였음 height값 초과

header .main_header img { height:auto; line-height:1; }

 

메인 로고 float값 해제해주고 앱솔루트로 변경, 가운데 정렬해주고 높이 정렬해줌

 

 

:: 이미지 교체, 가운데 h2 , p 문구들 크기 조정, 양 쪽에 메뉴 추가

 

 

 

양 쪽 메뉴 추가 ( float:left, right )

 

 

:: 1025px 기준 ( 미디어쿼리 ) 

 

 

 

:: 메인 반응형 완료

 

 

:: 더 작은 사이즈에서도 완료

:: background : no-repeat 추가, img:100%에서 background-image:cover로 변경, ( 반응형 배경 이미지 안짤리게끔 )

 

 

 

 

 

 

 

 

 

 

:: 우선, 사이드 메뉴 html 추가 이후 제이쿼리로 붙여주기 ( 추가 버튼 및 마크업 수정도 필요 )

 

https://github.com/wonpoem/blackdesert/tree/master/blackdesert

GitHub - wonpoem/blackdesert: blackdesert mark up study

 

https://rkqtlr15159.cafe24.com/blackdesert/

검은사막